/* =================================================================at
   1. RESET
   ================================================================ */

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
img,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
a,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
}

* {
    box-sizing: border-box;
}




/* =================================================================
   2. BASE & TYPOGRAPHY
   ================================================================ */

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    background-image: url('https://img.magnific.com/free-vector/wavy-elegant-lines-blue-background_78370-3228.jpg?semt=ais_hybrid&w=740&q=80');
    
}



/* h1, */
/* h2 { */
    /* font-weight: bold; */
/* } */

/* h1 { */
    /* font-size: 2em; */
/* } */

/* h2 { */
    /* font-size: 1.5em; */
    /* margin-bottom: 1em; */
/* } */

/* p { */
    /* margin-bottom: 1em; */
/* } */


/* =================================================================
   3. LAYOUT & STRUCTURE
   ================================================================ */

header {
    margin-top: 0.5em;
}

header,
main,
aside,
footer,
nav {
    padding: 1em;
}


aside {
    background-image: url('https://preview.redd.it/wallpaper-i-made-combining-the-windows-7-wallpaper-and-a-v0-bx1fysq2idba1.png?auto=webp&s=c5d42f7691784048b55136655c725796995444d1');

}

main {
    background-color: white;
    
}

header, main, nav, aside, footer {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* table { */
    /* background-color: #95986b; */
/* } */

footer {
    background-color: #48531a;
    color: #fff;
    text-align: center;
}

/* #blank,  */
/* td { */
    /* background-color: #48531a; */
/* } */

nav, header {
    background-color: 	#66B7E1;
}


/* =================================================================
   4. COMPONENTS (Navigation, Tables, Media, Images)
   ================================================================ */

/* Navigation */
nav {
    width: 100%;
    height: 100%;
}

nav ul {
    list-style-type: none;
}

nav > ul {
    display: flex;
    justify-content: left;
    gap: 0.1rem;
}

nav a {
    text-decoration: none;
    color: #000000;
}

/* Tables */
/* table { */
    /* width: 100%; */
    /* border-collapse: collapse; */
    /* border-color: white; */
/* } */

/* td { */  
    /* color: white; */
    /* padding: 0.5em; */
    /* border-color: white; */
/* } */

/* Images & Media */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#LOGO {
    border-radius: 5%;
}

header > img {
    max-height: 4rem;
}

.tree-thumbnail {
    max-width: 13rem;
    height: auto;
    display: inline;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#About_image {
    max-width: 100%;
}

video {
    max-width: 100%;
    max-height: 100%;
}

/* Map */
#map {
    height: 32em;
    width: 100%;
}

/* SECTIONS */

.introduction_page_body {
    display:flex;
    justify-content: space-between;
}

/* .introductionsection { */
    /* padding-bottom: 1em; */
/* } */

section {
    
}


/* =================================================================
   5. STATES & INTERACTIVE PAGES
   ================================================================ */

.hidden {
    display: none;
}

#saved_list_page {
    overflow-x: auto;
    max-width: 100%;
}

#map_page,
#tutorial_page,
#saved_list_page,
#advanced_options_page,
#about_page,
#introduction_page {
    display: none;
}

#map_page.active,
#tutorial_page.active,
#saved_list_page.active,
#advanced_options_page.active,
#about_page.active,
#introduction_page.active {
    display: block;
}

#blank_aside,
#map_aside,
#saved_list_aside,
#tutorial_aside,
#about_aside, 
.map_aside_section {
    display: none;
}

#blank_aside.active,
#map_aside.active,
#saved_list_aside.active,
#tutorial_aside.active,
#about_aside.active, 
.map_aside_section.active {
    display: block;
}


/* =================================================================
   6. MEDIA QUERIES
   ================================================================ */

@media screen and (min-width: 54rem) {
    html,
    body {
        height: 100vh;
        /* overflow: hidden; */
    }

    body {
        display: grid;
        grid-template-columns: 20rem 4fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "header nav"
            "blank infobar"
            "aside main"
            "footer footer";
    }

    header {
        grid-area: header;
        color: black;
    }

    nav {
        grid-area: nav;
    }

    nav > ul > li > button {
        font-size: 1;
    }

    main {
        grid-area: main;
        height: 100%;
        /* overflow-y: auto; */
    }

    aside {
        grid-area: aside;
        /* overflow-y: auto; */
    }

    footer {
        grid-area: footer;
        background: #95986b;
        color: black;
    }

    #infobar {
        grid-area: infobar;
        background-color: #06B3E0;
        color: white;
    }

    #blank {
        grid-area: blank;
    }

    #map {
        height: 100%;
    }

    .tree-thumbnail {
        max-width: 9rem;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    .portfolio-thumbnail {
        max-height: 15em;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .section.active {
        height: 100%;
    }
}

@media screen and (min-width: 60rem) {
    header {
    margin-top: 0.5em;
}

nav {
    margin-top: 0.5em;
}
    
    
    body {
        display: grid;
        grid-template-columns: 1fr 20rem 40rem 1fr;
        grid-template-areas:
            "infobar infobar infobar infobar"
            ". header nav ."
            ". main main ."
            ". aside aside ."

            ". footer footer .";
    }

    .tree-thumbnail {
        max-width: 17rem;
        height: auto;
        display: block;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    nav {
        padding-bottom: 0%;
        padding-top: 2.5em;
    }
}