body{
    font-family: Playfair Display;
    display: grid;
    row-gap: 0;
}
header{
    display: grid;
    row-gap: 0.5vw;
    width: 100%; 
}
main{
    display: grid;
    row-gap: 2vw;
    width: 98%;
    margin: 0 auto;
}
/* #main_slide{
    width: 100%;
    aspect-ratio: 16/6;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.navigation{
    position:sticky;
    width: 100%;
    height: auto;
    aspect-ratio: 16/1;
    grid-column: 1/3;
    grid-row: 1;
    background-image: url("../img/background/header_back.webp");
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
#headline_news{
    grid-column: 1/3;
    grid-row: 2;   
    width: 100%;
    aspect-ratio: 35/1;
    background-image: url("../img/header_back.webp");
}
#banner{
    grid-column: 1/3;
    grid-row: 3;   
}
#WaitingTherapist{
    grid-column: 1/3;
    grid-row: 4;
    background-image: url(../img/background/AdobeStock_392165869.webp);
    background-size: cover;
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten;
    width: 100%;
    margin: 0 auto;
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#pickup_therapist{
    width: 60vw;
    grid-column: 1;
    grid-row: 5;
    padding: 1vw;
    background-image: url(../img/background/AdobeStock_1025377788.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#diary{
    grid-column: 2;
    grid-row: 5;
    background-image: url(../img/background/AdobeStock_1025377788.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#newface_info{
    grid-column: 1/3;
    grid-row: 6;   
    width: 100%;
}
#access{
    grid-column: 1/3;
    grid-row: 7;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../img/background/AdobeStock_1247431775.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten;    
}
footer{
    top:1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 97vw;
    height: 100vh;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    #main_slide{
        width: 100%;
        aspect-ratio: unset;
        height: 90vh;
        margin: 0 auto;
    }
    .navigation{
        position:fixed;
        right: 0;
        width: 100%;
        aspect-ratio: unset;
        grid-column: unset;
        grid-row: unset;
        background-image: none;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        z-index: 5;
    }
    #pickup_therapist{
        width: 97vw;
        grid-column: 1/3;
        grid-row: 5;
        padding: 1vw;
        background-image: url(../img/background/AdobeStock_1025377788.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgba(255,255,255,0.8);
        background-blend-mode: lighten;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #newface_info{
        grid-column: 1/3;
        grid-row: 6;   
    }
    #diary{
        grid-column: 1/3;
        grid-row: 7;
        background-image: url(../img/background/AdobeStock_1025377788.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgba(255,255,255,0.8);
        background-blend-mode: lighten; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #access{
        grid-column: 1/3;
        grid-row: 8;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-image: url(../img/background/AdobeStock_1247431775.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgba(255,255,255,0.8);
        background-blend-mode: lighten;    
    }
    footer{
        width: 98vw;
        height: fit-content;
    }
} */
@media screen and (max-width: 768px) {
    main{
        display: grid;
        row-gap: 3vw;
        width: 98%;
        margin: 0 auto;
    }
}