@media only screen and (min-width: 1001px) {

    body {
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20,1fr);
        height: 100vh;
        width: 100vw;
        display: grid;
        background-color: #270000;
        overflow-x: hidden;
    }

    #header {
        background-image: url("../Bilder/savory-mexican-food-composition.jpg");
        grid-column: 1/21;
        grid-row: 1/7;
        background-position: top;
        background-size: cover;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(10,1fr);
    }

    #title {
        color: white;
        font-weight: 500;
        text-shadow: 4px 4px 0.2px rgba(0,0,0, 0.6);
        grid-column: 1/21;
        text-align: center;
        align-items: center;
        font-size: 4.5vw;
        grid-row: 2/4;
        text-decoration: underline;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        text-underline-offset: 12px;
    }

    #slogan {
        color: white;
        font-weight: 500;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        grid-row: 7/10;
        grid-column: 1/21;
        text-align: center;
        align-items: center;
        font-size: 2.2vw;
        font-family: Jomhuria, serif;
        font-style: normal;
    }



    #nav {
        grid-column: 1/21;
        grid-row: 7/8;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: 1fr;
        border-bottom: solid white 2px;
    }



    #meny {
        grid-column: 6/8;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: green;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    #boka {
        grid-column: 10/12;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    #om {
        grid-column: 14/16;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    .nav-item {
        color: white;
        cursor: pointer;
        text-decoration: none;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2.5vw;
        transition: 0.3s;
        text-align: center;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

        .nav-item:hover {
            transform: scale(1.15);
            color: white;
        }

    #text {
        grid-row: 12/15;
        grid-column: 3/11;
        transition: 0.8s;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
    }

    #info {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2vw;
        text-align: left;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        line-height:35px;
    }

    #title2 {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2.5vw;
        text-align: center;
        grid-column: 4/10;
        grid-row: 10/12;
        text-decoration: underline;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        text-underline-offset: 10px;
    }

    #image {
        grid-row: 9/18;
        grid-column: 13/20;
        border-radius: 20px;
        background-image: url("../Bilder/pexels-rdne-5737254.jpg");
        background-position: center;
        background-size: cover;
    }

    #navbot {
        grid-row: 19/21;
        grid-column: 1/21;
        border-top: 2px white solid;
        grid-template-rows: repeat(5,1fr);
        grid-template-columns: repeat(20,1fr);
        display: grid;
    }

    #mail {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2.5vw;
        justify-content: center;
        display: flex;
        grid-column: 1/6;
        grid-row: 1;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

    #Oss {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2.5vw;
        grid-column: 1/21;
        justify-content: center;
        display: flex;
        grid-row: 1;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

    #nummer {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2.5vw;
        grid-column: 15/21;
        justify-content: center;
        display: flex;
        grid-row: 1;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

    #title2 i {
        color: green;
        font-style: normal;
        text-decoration-color: green;
    }

    #title2 b {
        color: red;
        font-style: normal;
        text-decoration-color: red;
    }
    #besökadmin {
        color: white;
        grid-column: 2/3;
        white-space: nowrap;
        opacity:0.8;
        color: white;
        border-radius: 10px;
        margin: auto;
        padding: 0px;
        font-size: 1.5vw;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
 text-decoration:underline;
        text-underline-offset: 10px;
    }
}


















@media only screen and (max-width: 1000px) {
    body {
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20,1fr);
        height: 100vh;
        width: 100vw;
        display: grid;
        background-color: #270000;
        overflow-x: hidden;
    }
    #besökadmin {
        color: white;
        grid-column: 2/4;
        display:none;
    }

    #header {
        background-image: url("../Bilder/savory-mexican-food-composition.jpg");
        grid-column: 1/21;
        grid-row: 1/5;
        background-position: top;
        background-size: cover;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(10,1fr);
    }

    #title {
        color: white;
        font-weight: 500;
        text-shadow: 4px 4px 0.2px rgba(0,0,0, 0.6);
        grid-column: 1/21;
        text-align: center;
        align-items: center;
        font-size: 6vh;
        grid-row: 2/4;
        text-decoration: underline;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        text-underline-offset: 12px;
    }

    #slogan {
        color: white;
        font-weight: 500;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        grid-row: 7/10;
        grid-column: 1/21;
        text-align: center;
        align-items: center;
        font-size: 4vh;
        font-family: Jomhuria, serif;
        font-style: normal;
    }



    #nav {
        grid-column: 1/21;
        grid-row: 5/6;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: 1fr;
        border-bottom: solid white 2px;
    }



    #meny {
        grid-column: 3/5;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: green;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    #boka {
        grid-column: 10/12;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    #om {
        grid-column: 17/19;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    .nav-item {
        color: white;
        cursor: pointer;
        text-decoration: none;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 5vh;
        transition: 0.3s;
        text-align: center;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
    }

        .nav-item:hover {
            transform: scale(1.15);
            color: white;
        }

    #text {
        grid-row: 9/13;
        grid-column: 2/20;
        justify-content: center;
        align-items: center;
        transition: 0.8s;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
    }

    #info {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 2.8vh;
        text-align: left;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        line-height:25px;
      
    }

    #title2 {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 3.3vh;
        text-align: center;
        grid-column: 1/21;
        grid-row: 7/9;
        text-decoration: underline;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        text-underline-offset: 10px;
    }

    #image {
        grid-row: 13/19;
        grid-column: 3/19;
        border-radius: 20px;
        background-image: url("../Bilder/pexels-rdne-5737254.jpg");
        background-position: center;
        background-size: cover;
    }

    #navbot {
        grid-row: 20/21;
        grid-column: 1/21;
        border-top: 2px white solid;
        grid-template-rows: repeat(10,1fr);
        grid-template-columns: repeat(20,1fr);
        display: grid;
        padding:15px;
        padding-bottom:40px;
    }

    #mail {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 3vh;
        justify-content: center;
        display: flex;
        grid-column: 1/7;
        grid-row: 1/11;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        align-items:center;
    }

    #Oss {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 3.5vh;
        grid-column: 1/21;
        justify-content: center;
        display: flex;
        grid-row: 1/11;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        align-items: center;
    }

    #nummer {
        color: white;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 3vh;
        grid-column: 14/21;
        justify-content: center;
        display: flex;
        grid-row: 1/11;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        align-items: center;
    }

    #title2 i {
        color: green;
        font-style: normal;
        text-decoration-color: green;
    }

    #title2 b {
        color: red;
        font-style: normal;
        text-decoration-color: red;
    }
}