/*Variable Root*/

            :root {
                --header-image: url('/pictures/headers/EvelynxZoey.jpg');
                --body-bg-image: url('/pictures/bg/ZombieMiso1.png'), url('/pictures/bg/ZombieMiso2.png');
                --avatar-image: url('/pictures/avatars/Miso3.jpg');
                --ad1-image: url('/pictures/ads/0701msz_19980702.gif');
                --ad2-image: url('/pictures/ads/ra_comeback_slider_19990505.gif');

/* Colours */

                --content: #E4E5F1;
            }

/* Fonts */

            @font-face {
                font-family: Silkscreen;
                src: url('/fonts/Silkscreen-Regular.ttf');
            }

            @font-face {
                font-family: Silkscreen;
                src: url('/fonts/Silkscreen-Bold.ttf');
                font-weight: bold;
            }

            /*@font-face {
                font-family: Silkscreen;
                src: url('');
                font-style: italic;
            }

            @font-face {
                font-family: Silkscreen;
                src: url('');
                font-style: italic;
                font-weight: bold;
            }*/

            body {
                background-color: #FFFFFF;
                background-size: 520px 800px;
                color: #000000;
                background-image: var(--body-bg-image);
                background-repeat: no-repeat, no-repeat;
                background-attachment: fixed, fixed;
                background-position: right center, left center;
                cursor: url('/cursors/Yellow-Eye-Shadow.cur'), pointer;
                font-family: 'Silkscreen', sans-serif;
                margin: 0;
            }
            
            * {
                box-sizing: border-box;
            }

/* 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 */
            }

/* the area below is for all links on your page EXCEPT for the navigation */

            #container a {
                color: #000000;
                font-weight: bold;
                text-decoration:none;
            }

/* Customiseable Banner per CSS style */

            #header {
                width: 100%;
                height: 150px;
                background-color: #E4E5F1;
                background-image: var(--header-image);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            
/* Customiseable Avatar per CSS style */

            #avatar {
                width: 100%;
                height: 136px;
                background-color: #E4E5F1;
                background-image: var(--avatar-image);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            
/* Customiseable Top Fake Advert per CSS style */

            #ad1 {
                width: 100%;
                height: 90px;
                background-color: #E4E5F1;
                background-image: var(--ad1-image);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border: solid;
                border-color: #D39A22;
                margin-top:2px; 
                margin-bottom:5px;
            }
            
/* Customiseable Top Fake Advert per CSS style */

            #ad2 {
                width: 100%;
                height: 90px;
                background-color: #E4E5F1;
                background-image: var(--ad2-image);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border: solid;
                border-color: #D39A22;
                margin-top:2px; 
                margin-bottom:5px;
            }

/* navigation section!! */

            #navbar {
                width: 100%;
                height: 50px;
                background-color: #D2D3DB;
                /* navbar color */
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 15px;
            }

/* navigation links*/

            #navbar li a {
                color: #000000;
                /* 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: #D39A22;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }
            

/* scrollbar stuff */  

/* width */

            ::-webkit-scrollbar {
              width: 2px;
            }

/* Track */

            ::-webkit-scrollbar-track {
              background: #f1f1f1; 
            }

/* Handle */

            ::-webkit-scrollbar-thumb {
              background: #888; 
            }

/* Handle on hover */

            ::-webkit-scrollbar-thumb:hover {
              background: #555; 
            }

/* this colors BOTH sidebars, if you want to style them separately, create styles for #leftSidebar and #rightSidebar */

            aside {
                background-color: #D2D3DB;
                width: 200px;
                padding: 20px;
                font-size: small;
                /* this makes the sidebar text slightly smaller */
            }

/* this is the color of the main content area, between the sidebars! */

            main {
                background-color: #D2D3DB;
                flex: 1;
                padding: 20px;
                order: 2;
            }

/* Sidebar order */

            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

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

            h1,
            h2,
            h3 {
                color: #000000;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #000000;
            }
            
            hr {
              height: 2px;
              background-color: #D39A22;
              border: none;
            }

/* this is just a cool box, it's the darker colored one */

            .box {
                background-color: #FFFFFF;
                border: 2px solid #D39A22;
                padding: 10px;
            }
            

/* this is for a border around images */

            .imgborder {
              background-color: #FFFFFF;
              border: 2px solid #D39A22;
              padding: 10px;
            }

/* CSS for extras */

            #topBar {
                width: 100%;
                height: 50px;
                padding: 10px;
                font-size: smaller;
                background-color: #D2D3DB;
            }

/* Hide rightSidebar */

            #rightSidebar {
                display: none;
            } 
            

/* BELOW THIS POINT IS MEDIA QUERY */

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

                aside {
                    width: 100%;
                }

                #leftSidebar {
                    display: none;
                } 

                #rightSidebar {
                    display: none;
                } 

                main {
                    order: 3;
                }

                #leftSidebar {
                    order: 1;
                }

                #rightSidebar {
                    order: 2;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }

/* Tablet - 900px */

            @media only screen and (max-width: 900px) {
              :root {
                --body-bg-image:none;
              }
                
              #topBar {
                display:none;
              }
            }
          }

/* Footer Fix - 710px */

            @media only screen and (max-width: 710px) {
              :root {
                --body-bg-image:none;
                --ad1-image:none;
                --ad2-image:none;
              }
               
              #topBar {
                display:none;
              }
              
              #ad1 {
                height:0px;
                border:none;
                margin-top:0px; 
                margin-bottom:0px;
              }
              
              #ad2 {
                height: 0px;
                border: none;
                margin-top:0px; 
                margin-bottom:0px;
              }
               
              footer a {
                font-size:75%;
              }
                
              footer b {
                font-size:75%;
              }
            }

/* Mobile Phone - 600px */

            @media only screen and (max-width: 600px) {
              :root {
                --body-bg-image:none;
                --ad1-image:none;
                --ad2-image:none;
              }
               
              #topBar {
                display:none;
              }
                
              #navbar ul {
                font-size:70%;
              }

              #ad1 {
                height:0px;
                border:none;
                margin-top:0px; 
                margin-bottom:0px;
              }
              
              #ad2 {
                height: 0px;
                border: none;
                margin-top:0px; 
                margin-bottom:0px;
              }

            }