/* Containers with fixed content: Index */
.container-index {
    display: grid;
    grid-template-rows: 30% 40% 20%;
    gap: 1em;
    width: 100vw;
}
/* Index page */
.container-index {
    grid-template-rows: 18% 57% 15%;
    gap: 0;
    height: 100vh;
}
.biglogo img {
    width: 70vw;
}

/* Containers with growing content: Price lists (Drinks, Food) */
.container-drink, .container-food {
    display: grid;
    grid-template-rows: 17vh 15fr 3vh;
    gap: 0;
    width: 100vw;
}

/* TEMPORARY: Until food menu grows bigger */
.container-food {
    grid-template-rows: 20vh 12fr 3vh;
}

.container-index *, .container-drink * , .container-food *, .container-music *, .container-contact * {
    font-family: Garamond, serif;
}
.container-drink .header, .container-food .header {
    min-height: 10vh;
}
.container-drink .header, .container-food .header, .container-contact .header {
    margin-bottom: 1rem;
}
.container-index div, .container-drink div, .container-food div, .container-contact div {
    display: grid;
    justify-content: center;
}
.drink-title, .food-title {
    margin-top: 0.8rem;
    line-height: 1rem;
    font-weight: 300;
    font-size: 2rem;
}
/* Title underline*/
.drink-title span, .food-title span {
    padding: 20px 50px 15px 50px;
    border-bottom: 1px solid #ccc;
}
/* Sub-titles: red wine, white wine*/
.drink-subtitle, .food-subtitle {
    margin-top: 0.8rem;
    line-height: 2rem;
    font-weight: 200;
    font-size: 1.5rem;
}
/* subtitle underline*/
.drink-subtitle span, .food-subtitle span {
    padding: 10px 20px 0px 20px;
    border-bottom: 1px solid #eee;
}
/* Normal text */
.drink span, .food span {
    margin-top: 0.3rem;
    line-height: 1.5rem;
    font-weight: 100;
    font-size: 1.5rem;
}

.header {
    grid-column: 1 ;
    grid-row: 1 ;
    align-self: end;
}
.main {
    grid-column: 1 ;
    grid-row: 2;
}
.footer {
    grid-column: 1 ;
    grid-row: 3;
}

.drink, .food {
    grid-template-columns: repeat(2, 1fr);
    width: 30vw;
    margin-top: 0.75em;
}

.drink span:nth-child(even), .food span:nth-child(even) {
    text-align: right;
}

/* Music */
.container-music {
/*    gap: calc(0.2rem + 1vw);*/
    gap: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: 25% 50% 10%;
    justify-content: center;  
}
.container-music .header {
    font-weight: 300;
    font-size: calc(2rem + 3vh);
    line-height: calc(2rem + 3vh);
    text-align: center;
}
.container-music .footer {
    font-weight: 300;
    font-size: calc(1rem + 2vh);
    line-height: calc(1rem + 2vh);
}
.spotify {
    display: flex;
    justify-content: center;
    background-color: orange;
    margin: auto;
}

/* https://love2dev.com/blog/absolute-centering-css/ */
.spotify img {
    /*width: 60vw;*/
    /*min-width: 360px;*/
    text-align: center;
    margin: 0;
    background-color: #aaffaa;
    display: block;
    max-width:calc(60px + 40vh);
    max-height:calc(60px + 40vh);
    width: auto;
    height: auto;
}

/* Contact - almost identical to Music */
.container-contact {
    /*    gap: calc(0.2rem + 1vw);*/
    gap: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: 27% 48% 10%;
    justify-content: center;  
}
.container-contact .header {
    font-weight: 300;
    font-size: calc(2rem + 3vh);
    line-height: calc(2rem + 3vh);
    text-align: center;
}
.container-contact .footer {
    font-weight: 300;
    font-size: calc(1rem + 2vh);
    line-height: calc(1rem + 2vh);
}
.googlemap {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.googlemap > iframe {
    display: grid;
    justify-content: center;
    background: #eeeeee;
    border:0;
/*    height: 100%;*/
    min-height: 90%;
    max-height: 400px;
    width: 30vw;
}

/* Styling for small screens, portrait */
@media screen and (max-width: 800px){
    /* Index page */
    .container-index {
        grid-template-rows: 9% 72% 3%;
        gap: 0;
        height: 100vh;
    }
    /* Big logo for mobile */
    .biglogo img {
        width: 85%;
        margin: auto;
        padding-top: 10rem;
    }
    .drink, .food {
        min-width: 80%;
        width: 80vw;
    }

    /* Music on mobile */
    .container-music .header {
        font-weight: 300;
        font-size: calc(1rem + 3vh);
        line-height: calc(1rem + 3vh);
        text-align: center;
    }
    .container-music .footer {
        font-weight: 300;
        font-size: calc(0.7rem + 2vh);
        line-height: calc(0.7rem + 2vh);
        padding-left: 0.2rem;
    }
    .spotify img {
        max-width:calc(25px + 80vw);
        max-height:calc(25px + 80vw);
    }

    /* Contact on mobile */
    .container-contact .header {
        font-weight: 300;
        font-size: calc(1rem + 2vh);
        line-height: calc(1rem + 2vh);
        text-align: center;
    }
    .container-contact .footer {
        padding-top: calc(0.7rem + 1vh);
        font-weight: 300;
        font-size: calc(0.7rem + 1vh);
        line-height: calc(0.7rem + 1vh);
        padding-left: 0.2rem;
    }
    .googlemap > iframe {
        width: 80%;
        margin: auto;
    }

    /* Font size on mobile */
    .header  {
        font-size: 1.8rem;
    }
    .footer  {
        font-size: 1.5rem;
    }
}

/* Styling for small screens, landscape */
@media screen and (orientation:landscape) and (max-device-height: 480px) {
    .container-index {
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: 5% 63% 2%;
        gap: 1em;
        /*grid-auto-rows: minmax(100px, auto);*/
        height: 100hw;
    }
    /* Styling big logo for landscape mobile */
    .biglogo img {
        height: 30vw;
        padding: 0;
        padding-top: 2rem;
    }

    /* Music on mobile landscape */
    .container-music {
        grid-template-rows: 22% 50% 20%;
        gap: 0.1rem;
    }
    .container-music .header {
        font-weight: 300;
        font-size: calc(1rem + 3vh);
        line-height: calc(1rem + 3vh);
        text-align: center;
/*        background-color: #8899aa;*/
    }
    .container-music .footer {
        font-weight: 300;
        font-size: calc(0.5rem + 3vh);
        line-height: calc(0.5rem + 3vh);
/*        background-color: #338899;*/
    }
    .spotify img {
        max-width:calc(15px + 40vh);
        max-height:calc(15px + 40vh);
    }
    /* Contact on mobile landscape */
    .container-contact {
        grid-template-rows: 30% 30% 20%;
        gap: 0.1rem;
    }
    .container-contact .header {
        font-weight: 300;
        font-size: calc(1rem + 3vh);
        line-height: calc(1rem + 3vh);
        text-align: center;
        /*        background-color: #8899aa;*/
    }
    .container-contact .footer {
        font-weight: 300;
        font-size: calc(0.5rem + 3vh);
        line-height: calc(0.5rem + 3vh);
        /*        background-color: #338899;*/
    }
    .googlemap > iframe {
        width: 90%;
        height: 80%;
        margin: auto;
    }
}