html {
    color: #012340;
    font-size: 1em;
    line-height: 1.4;
    font-family: brother-1816, sans-serif;
    font-weight: 300;
    font-style: normal;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: #1C2329
}

/*  =================
        SCROLLIMG
    =================*/


#scrollImg {
    grid-area: scrollImg;
    background-image: url(../media/BG_Alps.jpg);
    height: 100vh;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: -2em -1em -2em -1em;
    text-align: center;
}

#scrollImg a img:hover {
    /*    padding: 2em;*/
    background-color: #3385A6;
    border-radius: 1em;
}

#scrollImg a img {
    width: 3em;
    position: relative;
    top: 35%;
    padding: 1em;
    margin: 0 auto;
}

#scrollLogo {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 20%;
}

/*  =================
        CURTAIN
    =================*/
#curtainLeft,
#curtainRight {
    position: fixed;
    height: 100vh;
    width: 50vw;
    background-color: #012340;
    z-index: 5;
}

#curtainLeft {
    left: 0;
    -webkit-animation: slideLeft 0.5s ease-in-out 1;
    animation: slideLeft 0.5s ease-in-out 1 forwards;
}

#curtainRight {
    right: 0;
    -webkit-animation: slideRight 0.5s ease-in-out 1 forwards;
    animation: slideRight 0.5s ease-in-out 1 forwards;
}

@-webkit-keyframes slideLeft {
    from {
        -webkit-transform: translate(0vw);
        transform: translate(0vw);
    }

    to {
        -webkit-transform: translate(-100vw);
        transform: translate(-100vw);
    }
}

@keyframes slideLeft {
    from {
        -webkit-transform: translate(0vw);
        transform: translate(0vw);
    }

    to {
        -webkit-transform: translate(-100vw);
        transform: translate(-100vw);
    }


}

@-webkit-keyframes slideRight {
    from {
        -webkit-transform: translate(0vw);
        transform: translate(0vw);
    }

    to {
        -webkit-transform: translate(100vw);
        transform: translate(100vw);
    }
}

@keyframes slideRight {
    from {
        -webkit-transform: translate(0vw);
        transform: translate(0vw);
    }

    to {
        -webkit-transform: translate(100vw);
        transform: translate(100vw);
    }
}






/*  =================
        BODY
    =================*/



.body {
    padding: 1em;
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
        "scrollImg scrollImg scrollImg"
        "header header header"
        "nav nav nav"
        "main main main"
        "main main main"
        "contact contact contact"
        "news news news"
        "footer footer footer";
    -ms-flex-line-pack: center;
    align-content: center;
    margin: 0 auto;
    max-width: 28em;
    z-index: 2;
}

.body a:link {
    color: #012340;
    text-decoration: none;
}

.body a:visited {
    color: #012340;
    text-decoration: none;
}

.body a:hover {
    text-decoration: underline;
}


/*  =================
        HEADER
    =================*/


header {
    grid-area: header;
    margin-top: 3em;
    font-family: anisette-petite, sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 0.99em;
    color: #d9c7c1;
    border-bottom: 2px solid #d9c7c1;
}




/*  ==========
        NAV
    ==========*/
.navigation {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat (3, 1fr);
    grid-template-rows: 1fr;
    height: auto;
    width: auto;
}



input#navCheck {
    display: none;
}

#navMenu {
    display: block;
    cursor: pointer;
    grid-column: 2;
}

#navMenu,
#navMenu:before,
#navMenu:after {
    z-index: 3;
    display: block;
    position: relative;
    background-color: white;
    border: 1px solid black;
    border-radius: 0.4em;
    height: 0.3em;
    width: 2em;
    top: 1em;
}

#navMenu:before {
    content: " ";
    top: 0.6em;
    right: 0.35em;
}

#navMenu:after {
    content: " ";
    top: -1.15em;
    right: -0.25em;
}

#navMobile,
#navMenu,
#navMenu:before,
#navMenu:after {
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

#navCheck:checked + #navMenu {
    z-index: 3;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;

}

#navCheck:checked + #navMenu:before {
    z-index: 3;
    -webkit-transform: rotate(90deg) translate(-0.6em);
    transform: rotate(90deg) translate(-0.7em, -0.3em);
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

#navCheck:checked + #navMenu:after {
    opacity: 0;
}

#navCheck:checked ~ #navMobile {
    left: 0;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;

}

#navMobile {
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100vh;
    width: 100vw;
    text-align: center;
    background-color: rgba(1, 25, 54, 0.9);
}

#navMobile ul {
    /*    display: none;*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    top: 35vh;
    right: 2.5em;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

#navMobile ul li {
    list-style: none;
    line-height: 2em;
    font-size: 2em;
    -webkit-box-flex: 1;
    -ms-flex: 1 100%;
    flex: 1 100%;
}

#myLinksMobile a {
    display: inline-block;
    width: 90%;
    text-align: center;
    color: #D9C7C1;
    text-decoration: none;
    padding: 0.1em 1em 0.1em 1em;
    background-color: #3385A6;
    border-radius: 0.4em;
    margin: 0.2em;
}

#myLinksMobile a:hover,
#myLinksMobile a:focus {
    background-color: #d9c7c1;
    color: #012340;
}

#navDesktop {
    display: none;
}

#dropDownBtn:active + #dropDownMenu li {
    display: flex;
}

#dropDownMenu {
    /*    display: none;*/
}

#dropDownMenu li {
    display: none;
}


/*  ===============
        MAIN
    ===============*/

.about {
    grid-area: main;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(4, auto);
    background-color: #D9C7C1;
    border: 0.6em #3385A6 solid;
    border-radius: 2em;
    margin-top: 2em;
}

.about h2 {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    margin-bottom: -1em;
}

.about .name {
    grid-row: 2;
    text-align: center;
    font-family: anisette-petite, sans-serif;
    font-weight: 300;
    font-size: 1.5em;
}

.about figure {
    grid-row: 3;
    text-align: center;

}

.about figure img {
    height: 10em;
    border-radius: 50%;
    -webkit-box-shadow: 5px 5px 10px #012340;
    box-shadow: 5px 5px 10px #012340;
    margin: -2em 0 -2em 0;
}

.about .biography {
    grid-row: 4;
    line-height: 1.7em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding: 1em;
}

.about .biography h3 {
    margin-right: 1em;
}


/*  ===============
        CONTACT
    ===============*/

.contact {
    grid-area: contact;
    background-color: #D9C7C1;
    border: 0.6em #3385A6 solid;
    border-radius: 2em;
    padding: 0.5em;
}


/*  ===============
        NEWS
    ===============*/

.news {
    grid-area: news;
    background-color: #D9C7C1;
    border: 0.6em #3385A6 solid;
    border-radius: 2em;
    padding: 0.5em;
}


/*  ===============
        FOOTER
    ===============*/

footer {
    grid-area: footer;
    text-align: center;
    background-color: #D9C7C1;
    border: 0.6em #3385A6 solid;
    border-radius: 2em;
}

.socialIcon {
    width: 2em;
    margin: 1em;
}

.socialIcon:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


/*  ===================
        DESKTOP-ONLY
    ===================*/


@media (min-width: 53em) {
    .body {
        grid-template-areas:
            "scrollImg scrollImg scrollImg"
            "header header header"
            "nav nav nav"
            "main main main"
            "contact news news"
            "footer footer footer";
        max-width: 49em;
    }

    header {
        font-size: 1.3em;
    }

    #scrollImg {
        background-attachment: fixed;
    }

    #navMobile {
        display: none;
    }

    #navMenu {
        display: none;
    }

    .navigation {
        background-color: #012340;
        border: 1em solid #3385a6;
        border-radius: 1em;
    }

    #navDesktop {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        text-align: center;
        margin: 0 auto;
    }

    #navDesktop ul {
        list-style: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    #navDesktop ul li {}

    #navDesktop ul li a {
        color: #d9c7c1;
        padding: 0.1em 0.5em;
        background-color: #3385a6;
        margin: 0 0.5em;
        border-radius: 1em;
    }

    .about h2 {
        width: 100%;
    }

    .about .name {
        grid-column: 1 / -1;
    }

    .about figure {
        margin: 4em 2em 0 2em;
    }

    .about .biography {
        grid-row: 3;
        margin: 0 2em 0 0;
    }

    .news p {
        max-width: 30em;
    }




}

@media (min-width: 94em) {
    .body {
        grid-template-areas:
            "scrollImg scrollImg scrollImg scrollImg"
            "header header header header"
            "nav nav nav nav"
            "contact main main main"
            "news main main main"
            "footer footer footer footer";
        max-width: 90em;
    }


}