:root {
                --header-image: url('https://i.imgur.com/LM2fXIf.png');
                --body-bg-image: url('https://i.imgur.com/1tbSOoe.jpg');

                /* colors */
                --content: #43256E;
            }

            /* fonts */

           @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
            
            @font-face {
                font-family: PixelOperator;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/PIXEL%20OPERATOR/PixelOperator.ttf');
            }
            
            @font-face {
                font-family: PixelOperator;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/PIXEL%20OPERATOR/PixelOperator-Bold.ttf');
                font-weight: bold;
            }

            body {
                font-family: 'Nunito', sans-serif;
                font-size: 18px;
                margin: 0;
                background-size: 65px;
                color: white;
                background-image: none;
                background-color: #08031a;
                background-attachment: fixed;
                background-repeat: repeat;
                background-size: auto;
                overflow-x: hidden;
            }

            * {
                box-sizing: border-box;
            }

            /* layout */

            /* container*/

            #container {
                width: 80%;
                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: #ED64F5;
                font-weight: bold;

            }
            
            #container2 {
               display: flex;
                width: 100%;
                margin: 0 auto;
            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                /* header color here! */
                height: 117px;
                background-image: var(--header-image);
                background-size: cover;
                background-position: 10% 40%;
            }

            /* navigation */
            #navbar {
                height: 40px;
                background-color: #000000;
                /* navbar color */
                width: 100%;
            }

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

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

            /* navigation links*/
            #navbar li a {
                color: #f2f2f2;
                /* 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: #b5e51d;
                text-decoration: underline;
            }

            #flex {
                display: flex;
                flex-wrap: wrap;
            }


            /*main content area*/
            main {
                background-color: black;
                border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
                flex: 1;
                padding: 20px;
                order: 1;
            }
            sidebar {
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 20px;
              order: 2;
              margin-left: 10px;
            }
            #button-div{
              text-align: center;
            }
            
            site-stuff{
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              width: 100%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 20px;
              
            }
            
            chat-box{
              display: flex;
              flex-direction: column;
              margin-top: 10px;
              margin-right: 10px;
              width: 50%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 10px;
            }
            
            guestbook{
              display: flex;
              flex-direction: column;
              margin-top: 10px;
              width: 50%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 10px;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */


            footer {
                width: 100%;
                height: fit-content;
                background-color: black;
                position: relative;
                bottom: -10px;
                margin-top: 10px;
                text-align: center;
            }
            
            footer p{
              margin: 0px;
            }

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

            h1 {
                font-size: 25px;
            }

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

            * {
                box-sizing: border-box;
            }

            /* layout */

            /* container*/

            #container {
                width: 80%;
                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: #ED64F5;
                font-weight: bold;

            }
            
            #container2 {
               display: flex;
                width: 100%;
                margin: 0 auto;
            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                /* header color here! */
                height: 117px;
                background-image: var(--header-image);
                background-size: 100%;
            }

            /* navigation */
            #navbar {
                height: 40px;
                background-color: #000000;
                /* navbar color */
                width: 100%;
            }

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

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

            /* navigation links*/
            #navbar li a {
                color: #f2f2f2;
                /* 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: #b5e51d;
                text-decoration: underline;
            }

            #flex {
                display: flex;
                flex-wrap: wrap;
            }


            /*main content area*/
            main {
                background-color: black;
                border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
                flex: 1;
                padding: 20px;
                order: 1;
            }
            sidebar {
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 20px;
              order: 2;
              margin-left: 10px;
            }
            #button-div{
              text-align: center;
            }
            
            site-stuff{
              display: flex;
              flex-direction: row;
              margin-top: 10px;
              width: 100%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 20px;
              
            }
            
            chat-box{
              display: flex;
              flex-direction: column;
              margin-top: 10px;
              margin-right: 10px;
              width: 50%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 10px;
            }
            
            guestbook{
              display: flex;
              flex-direction: column;
              margin-top: 10px;
              width: 50%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 10px;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */


            footer {
                width: 100%;
                height: fit-content;
                background-color: black;
                position: relative;
                bottom: -10px;
                margin-top: 10px;
                text-align: center;
            }
            
            footer p{
              margin: 0px;
            }

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

            h1 {
                font-size: 25px;
            }

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

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #13092D;
                border: 1px solid #ED64F5;
                padding: 10px;
            }
            
            textarea{
              border: dashed 2px #a04b9f;
              background: black;
              color: #b5e51d;
              width: 90%;
              height: 75px;
              resize: none;
              font-family: PixelOperator;
              font-size: 15px;
              scrollbar-width: none;
            }
            
            .updates-box {
              border: dashed 4px #a04b9f;
              background: black;
              width: 95%;
              height: 300px;
              font-family: PixelOperator;
              font-size: 21px;
              color: white;
              overflow: scroll;
              scrollbar-width: none;
            }
            
            .updates-box bold{
              color: #23b14d;
            }
            
            .site-box{
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              flex-direction: column;
              width: 100%;
              scrollbar-width: none;
            }
            
            #chat-and-site{
            width: 100%;
            display: flex;
          }
          
          marquee-container{
            width: 100%;
              height: fit-content;
              background-color: black;
              border: 5px solid;
                border-image: linear-gradient(#B5E51D, #23B14D, #7428C0) 1;
              padding: 20px;
              order: 3;
              margin-top: 10px;
          }
          
          marquee img{
            height: 31px;
            width: 88px;
            image-rendering: pixelated;
          }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
          
          
        @media(max-width:1300px) {
          #container{
            width: 80%;
            }
          }
          
          @media(max-width:1000px) {
          
          #header{
            height: 80px;
          }
          
          #flex{
            flex-direction: column;
            }
            
            main{
              margin-bottom: 10px;
            }
            
            sidebar{
              margin-left: 0px;
            }
          }

            
            /*mobile */
        @media(orientation: portrait) {
          
          #container{
            width: 100%;
          }
          
          #header{
            height: 45px;
          }
          
          #headerarea{
            width: 100%;
          }
          
          #navbar{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            
          }
          
          #navbar ul{
            width: 90%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-around;
            }
            
            #navbar li {
                padding: 10px 10px 0px 10px;
            }
            
          #flex{
            display: flex;
            flex-wrap: wrap;
          }
          
          main{
            display: inline-block;
            width: 100%;
          }
          
          sidebar{
            width: 100%;
            display: inline-block;
            margin: 10px 0 0 0;
          }
          
          site-stuff{
            flex-direction: column;
            width: 100%;
            margin-top: 0px;
          }
          
          .site-box{
            width: 100%;
          }
          
          #container2{
            flex-wrap: wrap;
          }
          
          resources-box, chat-box, guestbook{
            width: 100%;
            margin-right: 0px;
            margin-bottom: 10px;
          }
          
          guestbook{
            margin-top: 0px;
          }
          
          #chat-and-site{
            width: 100%;
            flex-wrap: wrap;
          }
          
          footer,
          .footer{
            position: relative;
            font-size: 12px;
           }
        }