<!-- THIS IS THE CSS !-->
        <style>

            :root 
                --body-bg-image: url('forest.jpg');

                /* colors */
                --content: #43256E;
            }

            @font-face {
                font-family: Slabo27px-Regular;
                src: url('https://wintersolcticezero.neocities.org/FONTS/Slabo27px-Regular.ttf');
            }

           @font-face {
    font-family: 'Agenda-Regular';
    src:url('fonts/Agenda-Regular.ttf.woff') format('woff'),
        url('fonts/Agenda-Regular.ttf.svg#Agenda-Regular') format('svg'),
        url('fonts/Agenda-Regular.ttf.eot'),
        url('fonts/Agenda-Regular.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
               
            }
            
                @font-face {
                font-family: VCR_OSD_MONO;
                src: url('https://wintersolsticezero.neocities.org/FONTS/VCR_OSD_MONO_1.001.ttf');
                font-weight: bold;
            }
                    
            @font-face {
                font-family: tahomabd;
                src: url('fonts/tahomabd.ttf');
                font-style: normal;
            }

             @font-face {
                font-family: tahomabd;
                src: url('fonts/tahomabd.ttf');
                font-style: normal;
            }

             @font-face {
                font-family: RockIt;
                src: url('fonts/RockIt.ttf');
                font-style: normal;
            }

  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  


}

            html {
            
    background-attachment: fixed;
    background-position: center;
    -webkit-font-smoothing: antialiased;
                
            }

            body {
            
                margin: 0;
                background-color: #08031A;
                
                background-size: 500px;
                background-attachment: fixed;
                background-size:cover;
                background-position: center;
                background-blend-mode: soft-light; 
                background-attachment: fixed
                animation: moveIt 10s linear infinite;
                
    -webkit-font-smoothing: antialiased;
                
                color: #FAFAFA;
                
                background-image: var(--body-bg-image);
            }

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 900px;
                margin: 0 auto;
    
            }

           
            #container a {
                
                
 :visited {
     font: italic;
  text-decoration: line-through;
}
:hover {
    color: white;
  text-decoration: underline;
    font-weight: bold;
  
}
               
            }

            #header {
                width: 100%;
                background-color: #080808;
               
                height: 150px;
               
                background-image: var(--header-image);
                background-size: 50%;
                background-repeat: no-repeat;
                background-position: top;
                background-blend-mode: normal; 
            }

           
            #navbar {
                height: 40px;
                background-color: #13092D;
                /* 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;
            }

           
            #navbar li a {
                color: #13092D;
               
                font-weight: 800;
                text-decoration: none;
               
            }

            
            #navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            
            aside {
                background-color: #181818;
                width: 200px;
                padding: 20px;
                font-size: smaller;
               
            }


            
            main {
                background-color: #000000;
                flex: 1;
                padding: 20px;
                order: 2;
            }

            

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #000000;
            
                width: 100%;
                height: 1px;
                padding: 10px;
                text-align: center;
               
            }
            
            footer.footer {
    height: 44px;
    width: 100%;
    background-color: #000000;
    opacity: 50px;
}

footerContainer {
    background-color: #808080;
    opacity: none;
    height: 5;
    position: fixed;
                
}
            
p.copyright {
    
    background-color: dimgrey;
    color: whitesmoke;
    opacity: 40%;
    height: 5px;
    line-height: 4px;
    font-size: 0.7em;
}
            
            #logo {
    align-self: center;
    width: 88px;
    height: 31px;
}
            span{
  vertical-align: right;
}
            
            side-div {
  background-color: yellow;
  width: 200px;
  border: 20px darkgrey;
  padding: 20px;
  margin: 70px;
}

textarea {
    
    box-shadow: 55px; color: darkolivegreen; 
    width: 120px;
    padding-top: 1px;
    padding-bottom: 1px;
    
}

iframe {
  overflow: hidden;
}
            
  
a:link {
  color: whitesmoke;
}


a:visited {
  color: dimgray;
  text-decoration: line-through;
}


a:hover {
  color: grey;
}


a:active {
  color: whitesmoke;
}

           li{
               text-align: left;
                font-family: 'sans-serif' ; 
                color: #f0f0f0;
                padding-top: 0px;
               padding-bottom: 0px;

    
}

hr{
                color: #909090; 
}

h1{
                text-align: center;
                font-family: 'VCR_OSD_MONO' ; 
                color: #ffffff;
                padding-top: 1px;

    
}

h2{             text-align: center;
                font-family: 'VCR_OSD_MONO' ; 
                color: #ffffff;
                padding-top: 2px;
}

            h3 {
                
                text-align: center;
                font-family: 'VCR_OSD_MONO' ; 
                color: #ffffff;
                opacity: 0.3;
                padding-top: 2px;
                padding-bottom: 0px;
                margin: inherit
                    
            }

            h1 {
                text-align: center;
                font-family: 'VCR_OSD_MONO' ; 
                color: #ffffff;
                padding-top: 15px;
                padding-bottom: 10px;
                margin: inherit;
            }



            h5 {
                text-align: center;
                font-family: 'RockIt' ; 
                color: #ffffff;
                padding-top: 15px;
                padding-bottom: 5px;
            }



      h5 {
        text-align: center;
        color: #d9fff9;
        font-size: 7px;
        letter-spacing: 10px;
        font-weight: 20;
        padding-top: 18px;
        margin: 0;
        line-height: 0;
        animation: glitch1 0.5s infinite;
      }
      h5:nth-child(2) {
        color: purple;
        animation: glitch2 2.0s infinite;
      }
      h5:nth-child(3) {
        color: red;
        animation: glitch3 2.0s infinite;
      }
      @keyframes glitch1 {
        0% {
          transform: none;
          opacity: 1;
        }
        50% {
          transform: skew(-2deg, 0.6deg);
          opacity: 0.75;
        }
        100% {
          transform: none;
          opacity: 1;
        }
      }
      @keyframes glitch2 {
        0% {
          transform: none;
          opacity: 0.25;
        }
        50% {
          transform: translate(-3px, -1px);
          opacity: 0.5;
        }
        100% {
          transform: none;
          opacity: 0.25;
        }
      }
      @keyframes glitch3 {
        0% {
          transform: none;
          opacity: 0.25;
        }
        50% {
          transform: translate(3px, 1px);
          opacity: 0.5;
        }
        100% {
          transform: none;
          opacity: 0.25;
        }
      }

            strong {
                /* this styles bold text */
                color: #808080;
            }
            
  

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #13092D;
                border: 1px solid #ffffff;
                padding: 10px;
            }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }


            /* 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%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
            
        </style>
