@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);
        animation: Up 1s;
    }

    #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: 3/5;
        text-decoration: underline;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        text-underline-offset: 12px;
    }





    #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: 14/16;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ce1126;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    #hem {
        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;
    }

    .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: 5px 5px 0.2px rgba(0,0,0, 0.6);
    }

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

    @keyframes Up {
        0% {
            height: 100%
        }

        100% {
            height: 100%
        }
    }

    #interior {
        background-image: url(../Bilder/photo-1613478549952-47b2db19e194.jpg);
        grid-row: 9/19;
        grid-column: 1/7;
        background-size: cover;
        background-position: center;
        margin-left: 20px;
        border-radius: 25px;
        border: 2px white solid;
    }

    #party {
        grid-row: 8/15;
        grid-column: 14/21;
        z-index: 2:
    }

    #people {
        grid-column: 14/19;
        grid-row: 13/19;
    }

    #titeln {
        grid-row: 9/10;
        grid-column: 7/15;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        color: #d4b535;
        display: flex;
        justify-content: center;
        text-decoration: underline;
        font-size: 1.5vw;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
    }

    #textt {
        grid-row: 10/18;
        grid-column: 8/14;
        font-family: Jomhuria;
        font-weight: 500;
        font-style: normal;
        color: floralwhite;
        font-size: 3vh;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        z-index: 3;
        line-height:35px;
    }
}

@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;
    }

    #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);
        animation: Up 1s;

        
    }

    #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: 5.5vh;
        grid-row: 5/6;
        text-decoration: underline;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        text-underline-offset: 12px;
        display:flex;
        justify-content:center;
       
    }





    #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: 17/19;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ce1126;
        text-decoration: underline;
        text-underline-offset: 10px;
        white-space: nowrap;
    }

    #hem {
        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;
    }

    .nav-item {
        color: white;
        cursor: pointer;
        text-decoration: none;
        font-family: Jomhuria, serif;
        font-weight: 500;
        font-size: 4.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;
        }

    @keyframes Up {
        0% {
            height: 100%
        }

        100% {
            height: 100%
        }
    }

    #interior {
        background-image: url(../Bilder/photo-1613478549952-47b2db19e194.jpg);
        grid-row: 15/19;
        grid-column: 1/20;
        background-size: cover;
        background-position: center;
        margin-left: 20px;
        border-radius: 25px;
        border: 2px white solid;
    }

    #party {
        grid-row: 5/8;
        grid-column: 10/21;
        z-index: 2;
        display:none;
    }

    #people {
        grid-column: 14/19;
        grid-row: 13/19;
        display: none;
    }

    #titeln {
        grid-row: 6/8;
        grid-column: 1/21;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        color: #d4b535;
        display: flex;
        justify-content: center;
        text-decoration: underline;
        font-size: 2.1vh;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        z-index:3;
        display:flex;
        align-items:start;
        margin-top:20px;
    }

    #textt {
        grid-row: 7/16;
        grid-column: 2/20;
        font-family: Jomhuria;
        font-weight: 500;
        font-style: normal;
        color: floralwhite;
        font-size: 2.5vh;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        z-index: 3;
        
        margin-top:20px;
        line-height:25px;
    }
}