/* Universal Styling */
* {
    margin: 0;
    padding: 0;
}

:root {
    --light: hsl(0, 0%, 100%);
    --light-medium: hsl(0, 10%, 78%);
    --dark-medium: hsl(0, 12%, 26%);
    --dark: hsl(0, 49%, 8%);
    --dark-translucent: hsla(0, 12%, 8%, 0.98);
    --contrast: hsl(138, 65%, 17%);

    --text-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --header-font: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
                   'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}



/* Generic Styling */
html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    font-family: var(--text-font);
    background-color: var(--light);
    color: var(--dark);
}

h1 {
    margin: 3rem 0 2rem;
    font-family: var(--header-font);
    font-size: 1.8rem;
}

h2 {
    margin: 2rem 0;
    font-size: 1.6rem;
}

h3 {font-size: 1.4rem}
a {
    text-decoration: none;
    text-align: center;
}

header > a, .carousel img.mobile, span.arrow {display: block}
.carousel img, .headerarea, .slideshow       {display: none}
body, nav ul                                 {display: flex}

header, nav > ul                                         {position: fixed}
header > a, nav, nav li, .carousel, .carousel img.mobile {position: relative}
nav > div, nav > div div, span.arrow                     {position: absolute}

main, header, footer, nav > ul, nav li ul, .carousel img {width: 100%}
main, footer section, .slideshow {max-width: 81.25rem} /*1300px*/



/* Header */
header {
    top: 0;
    height: 13.25rem;
    z-index: 3;
}

header > a {
    height: 9.25rem;
    background-color: var(--light);
    z-index: 4; /* Place on top of submenu */
}

body > header + * { /* Element right after header*/
    margin-top: 13.25rem;
}



/* Main */
main {flex-grow: 1}
main section {margin: 2rem}
main p {margin: 1rem 0}
main li {margin-left: 2rem}
main a {color: var(--contrast)}

main img {
    max-width: 100%;
    float: left;
    margin: 1rem 2rem 1rem 0;
}




/* Footer */
footer {
    line-height: 2rem;
    background-color: var(--dark);
    color: var(--light);
}

footer section {
    display: grid;
    margin: 1rem auto;
    grid-template-columns: 6rem 1fr 6rem 1fr;
    row-gap: 1rem;
}

footer img {
    height: 4rem;
    justify-self: center;
}

footer a {color: var(--light)}






/* Nav Bar */
nav {
    height: 4rem;
    z-index: 3;
    background-color: var(--dark);
}

/* Nav Hamburger Menu Icon */
nav > div {
    top: 0.75rem;
    right: 0.75rem;
    height: 2.5rem;
    width: 2.75rem;
    z-index: 5;
    cursor: pointer;
}

nav > div div {
    background-color: var(--light);
    height: 0.5rem;
    width: 2.75rem;
    left: 0;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
}
/* .5 .5 .5 .5 .5 = 2.5 */
.menuicon-top    {top: 0}
.menuicon-middle {top: 1rem}
.menuicon-bottom {top: 2rem}
nav.active .menuicon-top    {rotate: 45deg}
nav.active .menuicon-middle {width: 0; left: 1.5rem}
nav.active .menuicon-bottom {rotate: -45deg}
nav.active > div div {top: 1rem} /* Move all to the center */



/* Nav Menu */
nav > ul {
    height: 100%;
    top: 13.25em;
    left: 100%;
    flex-direction: column;
    list-style: none;
    background-color: var(--dark);
    text-align: center;
    transition: 0.3s left ease-in-out;
}
nav.active > ul {left: 0}

nav a {
    display: inline-block;
    width: 16rem;
    line-height: 4rem;
    font-size: 2rem;
    color: var(--light);
}



/* Nav Submenu */
nav li ul {
    height: 0;
    /*height: auto;*/
    flex-direction: column;
    overflow-y: hidden;
    transition: 0.3s height;
}
nav li.active ul {height: 15rem} /* 3*5 */

nav li li a {
    font-size: 1.4rem;
    line-height: 3rem;
    color: var(--light-medium);
}



/* Menu with Submenu Arrow */
span.arrow {
    height: 2rem;
    width: 2rem;
    right: 1.5rem;
    top: 1rem;
    clip-path: polygon(0 20%, 100% 20%, 50% 80%);
    background-color: var(--light);
    rotate: 0.25turn;
    transition: 0.3s rotate;
}
.active > span.arrow {rotate: none}






/* Grid */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
}

/* Blog */
.blog a {
    font-size: 1.2rem;
    transition: opacity 0.2s;
}
.blog a:hover {opacity: 0.8}

.blog img {
    float: none;
    margin: 0;
}

/* Carousel disabled on mobile */
.carousel {height: auto}
.carousel img {user-select: none}







/* Desktop */
@media only screen and (min-width: 1200px)
{
    /* Generic Styling */
    nav > ul, nav.active > ul, .overlay, .slideshow section, .dotarea   {display: flex}
    nav li ul, nav.active li ul, .carousel img, .headerarea, .slideshow {display: block}
    nav div, nav span.arrow                                             {display: none}
    nav li ul, nav.active li ul , .carousel img, .headerarea, .dotarea  {position: absolute}



    /* Reajust Grids */
    footer section {
        grid-template-columns: 6rem 1fr 6rem 1fr 6rem 1fr 6rem 1fr;
    }
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }



    /* Nav bar */
    nav > ul, nav.active > ul { /* */
        position: static;
        max-width: 86rem; /*>1300px*/
        margin: 0 auto;
        flex-direction: row;
        justify-content: space-evenly;
    }

    nav > ul > li {flex: 0 1 20rem} 

    nav li a {width: 100%}
    nav li:hover > a {background-color: var(--dark-medium)}

    nav > ul > li > a { /* Top li a */
        position: relative;
        background-color: var(--dark);
        z-index: 2; /* Show on top of submenu */
    }

    nav li ul, nav.active li ul { /* Submenu */
        height: auto; /* Just in case */
        top: 4rem; /* Height of top li */
        translate: 0 -100%;
        background-color: var(--dark);
        transition: translate 0.3s ease-in-out
    }
    nav li:hover ul {translate: 0 0;}






    /* Carousel */
    .carousel img {
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 1s;
    }
    .carousel img.active {
        pointer-events: unset;
        opacity: 1;
    }

    .headerarea {
        bottom: 50%;
        left: 5%;
        font-size: 4rem;
        font-style: italic;
        color: var(--light);
    }
    
    .dotarea {
        bottom: 1rem;
        width: 100%;
        justify-content: center;
        z-index: 1;
    }
    
    .dotarea div {
        height: 1rem;
        width: 1rem;
        margin: 0.3rem;
        background-color: var(--light-medium);
        border: 0.15rem solid var(--light-medium);
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
    }
    .dotarea div.active {background-color: var(--dark)}
    .dotarea div:hover {scale: 1.2}



    /* Lightbox */
    .lightbox img, .overlay {cursor: pointer}
    .lightbox img {transition: opacity 0.2s}
    .lightbox img:hover {opacity: 0.8}

    .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 2rem;
        justify-content: center;
        z-index: 5;
        pointer-events: none;
        background-color: hsla(0, 0%, 0%, 0.9);
        align-items: center;
        animation: fade-out 0.3s forwards;
    }
    .overlay.active {
        pointer-events: unset;
        animation: fade-in 0.3s;
    }
    @keyframes fade-in {from {opacity: 0}}
    @keyframes fade-out {to {opacity: 0}}

    .overlay img {
        max-width: 100%;
        max-height: 100%;
        margin: 1rem;
    }



    /* Slideshow */
    .slideshow section {
        overflow-x: hidden;
        margin: 2rem;
    }

    /* 23.5%*4 + 2%*3 = 100%*/
    .slideshow img {
        min-width: 23.5%;
        max-width: 23.5%;
        padding-right: 2%;
    }

    .slideshow .active img {
        animation: slide 1s forwards ease-in-out;
    }
    @keyframes slide {from {translate: -100%}}
}