:root {
                --header-image: url('https://kittie-kittie-cat.neocities.org/header-ver2.png');
                --body-bg-image: url('/background-stars.gif');

                /* colors */
                --main-black: black;
                
                --text-color: #fffbea; /* regular text */
                --text-color2: #ffb700; /* yellow */
                --text-color3: #e66b00; /* orange */
                
                --bg-primary: #23340f;  /* mid green, main content area*/
                --bg-secondary: #1a290b;  /* darker green */
                
                --bg-light: #283d0f;
            }
            
            
             @keyframes spin-counterclockwise {
              0% {
                  transform: rotate(0deg);
              }
              100% {
                  transform: rotate(-360deg);
              }
            }
            
            @keyframes spin-clockwise {
              0% {
                  transform: rotate(0deg);
              }
              100% {
                  transform: rotate(360deg);
              }
            }
            

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }


            body {
                font-family: 'Nunito', sans-serif;
                margin: 0;
                background-size: 150px;
                color: var(--text-color);
                background-image: var(--body-bg-image);
                background-size: auto;
                background-attachment: scroll;
                background-color: black;
            }

            * {
                box-sizing: border-box;
            }
            
            #container {
                max-width: 1100px;
                margin: 0 auto;
            }

            #container a {
                color: var(--text-color2);
                font-weight: bold;
            }

            #header {
                width: 100%;
                background-color: black;
                height: 150px;
                background-image: var(--header-image);
                background-size: cover;
                background-position: center center;
            }

            /* subheader and flavourtext section!! */
            #navbar {
                height: 50px;
                margin-bottom: 10px;
                background-color: var(--bg-secondary);
                width: 100%;
                text-align: center;
                align-content: center;
                
                color: var(--text-color2);
                font-weight: 800;
                font-size: 20px;
            }

            #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: var(--text-color2);
                font-weight: 800;
                text-decoration: none;
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: var(--text-color3);
                text-decoration: none;
            }

            #flex {
                display: flex;
            }
            
            aside {
                box-sizing: border-box;
                border: 5px solid var(--bg-light);
                background-color: #000000;
                width: 200px;
                padding: 20px;
                font-size: smaller;
                text-align:center;
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: var(--bg-light);
                flex: 1;
                padding: 20px;
                order: 2;
            }

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

            #leftSidebar {
                order: 1;
            }

            
            #leftSidebar button{
                font-family: 'Nunito', sans-serif;
                color: var(--text-color3);
                font-weight: bold;
                font-size: 18px;
                
                padding: 10;
                min-width: 100%;
                min-height: 40px;
                border-radius: 5px;
                border: 0px;
                background-color: var(--bg-primary);
                
                margin-bottom: 10px;
                
                /* position: absolute; messed this shit up */
                z-index: 1;
            }
            
            #leftSidebar button:hover{
                color: var(--text-color2);
                background-color: var(--bg-light);
            }
            
            button.active-tab {
              color: var(--text-color2) !important; 
              background-color: var(--bg-light) !important;
              width: calc(100% + 25px);
            
              border-top-right-radius: 0 !important;
              border-bottom-right-radius: 0 !important;
            
              position: relative;
              z-index: 2;
            }

            footer {
                background-color: var(--bg-secondary);
                width: 100%;
                height: 40px;
                padding: 10px;
                margin-bottom: 10px;
                text-align: center;
            }

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

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: var(--text-color2);
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #13092D;
                border: 1px solid #ED64F5;
                padding: 10px;
            }

          .interact-img-wrapper {
            display: inline-block;
          }
          

          .interact-img-wrapper.interact-img:hover  {
            transform: scale(1.05); /* Scale only on hover DOESN'T FUCKING WORK ANYMORE :( */
          }

          .interact-img{
            position: relative;
            display: inline-block; 
            animation: rotateBackAndForth 2s infinite ease-in-out alternate;
          }
          
          
          @keyframes rotateBackAndForth {
            0% {
              transform: rotate(-5deg);
            }
            100% {
              transform: rotate(5deg);
            }
          }

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

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }


                #navbar ul {
                    flex-wrap: wrap;
                }
            }