/*
 
   !!!!! READ ALL THE COMMENTS IN THIS STYLESHEET !!!!!

   
   This stylesheet shows a simple layout change from a single-column to two columns
   when the viewport (window) is wide enough to fit two columns. Notice that the
   layout code for the single column occurs first and is not in a media query - 
   this makes the single column the 'default' layout. This is a good approach
   because older browsers that don't understand media queries can still display
   the single-column layout. At the bottom of this stylesheet there is a media 
   query that tests the width of the viewport and contains the grid layout.
   
   Check what happens when you change the width of the browser window from very
   narrow to very wide when you are viewing the web page. */


/* RESET */

/* Cancel out some differences between browser defaults */
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;
}


/* LAYOUT */

/* The default layout (before any media queries take effect) is a single-column
   layout with the principal structural elements as blocks in normal flow. That
   is: the header, main, and aside are allowed to take their normal positions
   one after the other down the window. We don't need a grid or other layout CSS
   for this - it is default behaviour. */

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




/* TYPOGRAPHY */

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

h1,
h2 {
    font-weight: bold;
}

h1 {
    font-size: 2em;
}

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


p {
    margin-bottom: 1em;
}

footer {
    text-align: center;
}



/* COLOUR SCHEME */

header,
footer {
    background-color: #48531a;
    color: #fff;
}

main {
    background-color: white;
}



#blank {
    background-color: #48531a;
}

nav {
    background-color: #95986b;
}

nav a {
    color: #000000;
}

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

/* .active, a:hover {
    color: #ff0000;
} */

/* IMAGES */

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

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


nav {
    width: 100%;
    height: 100%;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
}



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



aside {
    background-color: #48531a;
    color: white;
}



/* INTERACTIVE PAGES */

#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;
}



/* NAVIGATION */

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

nav a {
    text-decoration: none;
}


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



@media screen and (min-width: 54rem) {


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

    html,
    body {
        height: 100vh;
        overflow: hidden;
    }

    #infobar {
        background-color: #48531a;
        color: white;
    }

    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;
    }

    nav {
        grid-area: nav;
    }

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

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

    footer {
        grid-area: footer;
    }

    #infobar {
        grid-area: infobar;
    }

    #blank {
        grid-area: blank;
    }

    .section.active {
        height: 100%;
    }

    #map {
        height: 100%;
    }

    nav>ul>li>button {
        height: 100%;
        font-size: 1.5em;
        margin-bottom: 1em;
    }

    header,
    footer {
        background: #95986b;
        color: black;
    }
}



@media screen and (min-width: 82rem) {

        #tree-thumbnail {
        max-width: 17rem;
        height: auto;
        display: block;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

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





}






/* This is the end of the media query. Note how it is just like a CSS rule,
      but that it contains other CSS rules. It is the same as an IF statement
      in programming. When the result of the media query is true, all the CSS
      inside the media query is applied by the browser. When the result of the
      media query is false (i.e., a viewport that is narrower than 50rem) the
      browser ignores all the CSS ruls inside the media query. */