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

    #header {
        background-image: url("../Bilder/savory-mexican-food-composition.jpg");
        grid-column: 1/21;
        grid-row: 1/6;
        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-row: 1/11;
        grid-column: 1/21;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 4.5vw;
        text-decoration: underline;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        text-underline-offset: 20px;
    }



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



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

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

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

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


    #rätterbox {
        grid-column: 1/21;
        grid-row: 7/21;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20,1fr);
    }

    .varmrätt {
        padding: 0 0 0 20px;
        grid-column: 1/10;
        grid-row: 1/10;
        color: white;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(3,1fr);
        font-family: 'Calistoga';
        border-bottom: dotted 2px white;
        text-wrap: nowrap;
       
    }

    #mattitel {
        grid-column: 1/3;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
    
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        font-size:1.5vw;
    }

    #drycktitel {
        grid-column: 1/3;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;

        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        font-size: 1.5vw;
    }

    .mat {
        grid-template-columns: repeat(4,1fr);
        color: white;
        display: grid;
        font-size:0.9vw;
    }

    .rätt {
        grid-column: 1/4;
        grid-row: 1/2;
        display: flex;
        align-items: center;
        font-weight: 600;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        margin:0;
    }

    .pris {
        grid-column: 4;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 600;
        text-shadow: 5px 5px 0.2px rgba(0,0,0, 0.6);
        margin: 0;
    }

    .beskrivning {
        grid-column: 1/5;
        grid-row: 2/3;
        font-size: 0.5vw;
        color: dimgray;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        margin-bottom:10px
    }

    #matbild {
        grid-column: 9/14;
        grid-row: 1/10;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px 0 75px;

    }

    #bildtaco {
        width: 100%;
        height: 80%;
        border-radius:10px;
    }

    .efterrätt {
        margin-top: -2px;
        border-top: dotted 2px white;
        grid-column: 5/14;
        grid-row: 10/20;
        color: white;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(4,1fr);
        font-family: 'Calistoga';
        text-wrap: nowrap;
    }

    .drinks {
        padding: 0 0 0 20px;
        grid-column: 14/21;
        grid-row: 1/20;
        color: white;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(7,1fr);
        font-family: 'Calistoga';
        text-wrap: nowrap;
        border-left: dotted 2px white;
    }

    #wrap {
        text-wrap: wrap;
        padding-right: 10px;
    }

    #dessertbild {
        padding: 0 20px 0 20px;
        grid-row: 10/21;
        grid-column: 1/5;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #bildchurro {
        width: 100%;
        height: 80%;
        border-radius: 10px;
    }
}














@media only screen and (max-width: 1000px) {
    body {
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(50,1fr);
        height: 300vh;
        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/4;
        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-row: 1/11;
        grid-column: 1/21;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 12vw;
        text-decoration: underline;
        font-family: "Calistoga", serif;
        font-weight: 400;
        font-style: normal;
        text-underline-offset: 20px;
    }



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



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

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

    #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: 10vw;
        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;
        }


    #rätterbox {
        grid-column: 1/21;
        grid-row: 5/51;
        display: grid;
        grid-template-columns: repeat(20,1fr);
        grid-template-rows: repeat(20,1fr);
    }

    .varmrätt {
        padding: 0 20px 0 20px;
        grid-column: 1/21;
        grid-row: 1/6;
        color: white;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7,1fr);
        font-family: 'Calistoga';
        border-bottom: dotted 2px white;
        text-wrap: nowrap;
    }

    #mattitel {
        grid-column: 1/2;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

    #drycktitel {
        grid-column: 1/2;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

    .mat {
        grid-template-columns: repeat(4,1fr);
        color: white;
        display: grid;
        
    }

    .rätt {
        grid-column: 1/4;
        grid-row: 1/2;
        display: flex;
        align-items: center;
        font-weight: 600;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        font-size: 3vw;
    }

    .pris {
        grid-column: 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-weight: 600;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
        font-size: 3vw;
    }

    .beskrivning {
        grid-column: 1/5;
        grid-row: 2/3;
        font-size: 2.8vw;
        color: dimgray;
        text-shadow: 3px 3px 0.2px rgba(0,0,0, 0.6);
    }

    #matbild {
        grid-column: 9/14;
        grid-row: 1/10;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px 0 75px;
    }

    #bildtaco {
        width: 100%;
        height: 80%;
    }

    .efterrätt {
        padding: 0 20px 0 20px;
        border-bottom: dotted 2px white;
        grid-column: 1/21;
        grid-row: 6/11;
        color: white;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7,1fr);
        font-family: 'Calistoga';
        text-wrap: nowrap;
    }

    .drinks {
        padding: 0 20px 0 20px;
        grid-column: 1/21;
        grid-row: 11/20;
        color: white;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(13,1fr);
        font-family: 'Calistoga';
        text-wrap: nowrap;
        border-bottom: dotted 2px white;
    }

    #wrap {
        text-wrap: wrap;
        padding-right: 10px;
    }

    #dessertbild {
        padding: 0 20px 0 20px;
        grid-row: 10/21;
        grid-column: 1/5;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #bildchurro {
        width: 100%;
        height: 80%;
    }
    .disabled {
        display: none;
    }
}