/*Variable Root*/
            :root {
                --header-image: url('/pictures/headers/Smug!Zoey.jpg');
                --body-bg-image: url('/pictures/bg/Eye.png');
                --avatar-image: url('/pictures/avatars/1.png');
                --ad1-image: url('/pictures/ads/nav_8k_19971007.gif');
                --ad2-image: url('/pictures/ads/mm0144_19971114.gif');

/* Colours */

                --content: #0E0E10;
            }

/* Fonts */

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

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

            @font-face {
                font-family: ;
                src: url('fonts/-Italic.tff');
                font-style: italic;
            }

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

            body {
                font-family: 'ArchitectsDaughter', sans-serif;
                margin: 0;
                background-color: #18181B;
                background-size: auto;
                color: #FCEAFF;
                background-image: var(--body-bg-image);
                cursor: url('/cursors/Yellow-Arrow.cur'), pointer;
            }

            * {
                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: #FFFFFF;
                font-weight: bold;
                text-decoration:none;
                border-radius: 30px;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

/* Customiseable Banner per CSS style */

            #header {
                width: 900px;
                height: 150px;
                background-color: #0E0E10;
                background-image: var(--header-image);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 30px;
            }
            
/* Customiseable Avatar per CSS style */

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

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

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

/* navigation section!! */

            #navbar {
                width: 100%;
                height: 50px;
                background-color: #2F2F31;
                border-radius: 30px;
                /* 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: #FFFFFF;
                /* 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: #2F2F31;
                width: 200px;
                padding: 20px;
                font-size: smaller;
                border-radius: 30px;
                /* this makes the sidebar text slightly smaller */
            }

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

            main {
                background-color: #2F2F31;
                flex: 1;
                padding: 20px;
                order: 2;
                border-radius: 30px;
            }

/* Sidebar order */

            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

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

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

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #FFFFFF;
            }

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

            .box {
                background-color: #18181B;
                border: 2px solid #D39A22;
                padding: 10px;
                border-radius: 30px;
            }
            

/* this is for a border around images */

            .imgborder {
              background-color: #18181B;
              border: 2px solid #D39A22;
              padding: 10px;
              border-radius: 30px;
            }

/* CSS for extras */

            #topBar {
                width: 100%;
                height: 50px;
                padding: 10px;
                font-size: smaller;
                background-color: #2F2F31;
                border-radius: 30px;
            }

/* Hide leftSidebar */

            #leftSidebar {
                display: none;
            } 

/* iframe */

            iframe {
              border-radius: 10px;
            }

/* Margins' Gaps */

            #rightSidebar {
              margin-left: 10px;
            }
            
            #leftSidebar {
              margin-right: 10px;
            }
            
            #header {
              margin-top: 10px;
              margin-bottom: 10px;
            }
            
             #navbar {
              margin-bottom: 10px;
            }
            
             #footer {
              margin-top: 10px;
            }

/* 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:80%;
              }
              
              #ad1 {
                height:0px;
                border:none;
                margin-top:0px; 
                margin-bottom:0px;
              }
              
              #ad2 {
                height: 0px;
                border: none;
                margin-top:0px; 
                margin-bottom:0px;
              }
            
            }