/* a CSS stylesheet sets the basic style of your site--whatever will stay the same across all pages, like font type, header image, link colors, background image, that kind of thing. This means you don't have to define that stuff for every single page on your site. This file is modified from sadgrl.online, who has lots of layout resources that I recommend!! */

            :root {
                --header-image: url('FULL URL OF YOUR HEADER IMAGE');
                --background-image: url('FULL URL OF YOUR BACKGROUND IMAGE');
                /* use color-hex.org to find the hex number of any color you want. this one defines the default color of content unless otherwise specified*/
                --content: #151515;
            } /* closes root block of code */

          

            body {
                font-family: 'Helvetica', sans-serif;
                margin: 0;
                background-color: #031a15;
                background-size: 125px;
                color: #ffffff;
            } /* anything called 'body' in any other HTML file that references this sheet will inherit these properties. */

            * {
                box-sizing: border-box;
            } /* causes any box defined in the layout to take padding into account, helps keep things consistent. */

            /* below this line is CSS for the layout */

            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            } /* now any div named 'container' in a page that references this sheet will inherit these properties */

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #51C5B0;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
                width: 100%;
                background-color: #092d28;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
                background-repeat: no-repeat;
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: #071613;
                /* navbar color */
                width: 100%;
            }
          
            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            } /* in your HTML pages, the ul (unordered list) tags in your header will inherit these properties */

            #navbar li {
                padding-top: 10px;
            } /* same as above, but for li, list items */

            /* navigation links*/
            #navbar li a {
                color: #ff9886;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #93d0c2;
                text-decoration: underline;
            }

            #flex {
                display: flex;
                max-width: 100%;
                /* max-width causes an element with the id="flex" to scale down according to screen size if smaller than 100% */
            }


            /* this is the color of the main content area*/
            main {
                background-color: #071613;
                flex: 1;
                padding: 20px;
                order: 2;
            }


            footer {
                background-color: #071613;
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #ff9886;
            } /* when you use an h1, h2, or h3 tag, it will default to this color */

            h1 {
                font-size: 25px;
            } /* h1 tags will default to this text size */

            strong {
                /* this styles bold text, so you can make it a different color automatically if you wish */
                color: #ff9886;
            }



            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }
            }