/*
                              .:^~~^:.
                                 .^~!!!~:.            
                                    .~!7!!~. 
                                      .~7!!7~.
                               :::.     ^!!!77^
                           .^~77777!^.   :77777~
                        .^!?????777??!:   ^77777~
                      :!????????????7?7^   !77777^
                    :7JJJJ?????????????~   ^77777!
                  :7YYJJJJJJJJJ??????7^    :?77777 
                 ~YYYYYYYJJJJJJJJJJ?~.     :?????7 
         .      7P555YYYYYYYYJJJJJ?~.      ~?????7
       ^J5?:    :JP555555YYYYYYYYYYJ7^    .?J????! 
    .7YPPPPY?Y?^  75PPP55555J!7YYYYYYY7:  7JJJJJ?^  
    :5PPPPPPPPPP?^ .!Y5PY?!:   :?55YYYYY!?YJJJJJ~.
      ?PPPPPPPPPP7.   .:.        ^J555YY5YYYYYY!. 
     ^JPPPPPPPPPP5J!:.             ~Y555555YYJ~.
   ~YPPPPPPPPPPPPPPPP5J?!~^::::^~!?YPPPP55555Y!.
 ~YPPPPPPPJ~7YPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP555J~.  
7PPPPPPP?^    :!J5PPPPPPPPPPPPPPPPPPPPPY775PPPPPP7  
~PPPPP?:         .^!?Y5PPPPPPPPPPPP5J!:.  .?PPPP5~

This is my css file, it used to be worse but I suppose it's alright now. Feel free to steal the code idrc. 
People's war and revolution till communism!
*/

/*
================================================================================
basic styliization
================================================================================
*/
html {
  overflow-x: hidden;
  background-size: 100% 100%;
  color: black;
  background-color: white;
  /* background-image: linear-gradient(90deg, #e80000, #ffc9d3); */
  background:
  linear-gradient(217deg, rgba(255, 0, 98, 0.8), transparent 70.71%),
  linear-gradient(127deg, rgba(0, 251, 255, 0.8), transparent 70.71%),
  linear-gradient(336deg, rgba(247, 0, 255, 0.8), transparent 70.71%);
  font-family: 'BPmono', 'ms gothic';
  text-align: center;
  font-size: 16px;
}


body {
  margin: 0;
}
/*
================================================================================
basic styliization
================================================================================
*/

/*
================================================================================
text styliization
================================================================================
*/

@font-face {
  font-family: 'BPmono';
  src: url('https://file.garden/ZsJltiD-bXBSm0-A/bpmono/BPmono.ttf'); 
}

.globalTitleText {
    color:#e80000;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 8px #e80000;
  }
  .titleText {
    color:#e80000;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
  }

  .headingText {
    color:#e80000;
    font-size: 24px;
    font-weight: bold;
  }

  .subHeadingText {
    color:#e80000;
    font-size: 20px;
    font-weight: bold;
  }

  .subSubHeadingText {
    color:#e80000;
    font-size: 18px;
    font-weight: bold;
  }

  .microHeadingText {
    color:#e80000;
    font-size: 14px;
    font-weight: bold;
  }

h1 {
  font-size: 32px
}

h2 {
  font-size: 28px
}

h3 {
  font-size: 24px
}

p {
  font-size: 12px 
}

a:hover {
  color: red;
}

/*
================================================================================
text styliization
================================================================================
*/

/*
================================================================================
marks stylization
================================================================================
*/
  .standardMark {
    background-color: white;
    border: black 3px solid;
    border-radius: 8px;
    padding: 4px;
  }

  .standardGlobalTitleMark {
    color: #e80000;
    background-color: white;
    border: black 3px solid;
    border-radius: 8px;
    padding: 4px;
  }

/*
================================================================================
marks stylization
================================================================================
*/


/*
================================================================================
containers
================================================================================
*/

.genericContainer {
  border: #ebcc00 5px solid; 
  box-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
  border-radius: 5px;
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background-size: 100% 100%;
  background-color: white;
}

#menuBar {
  border-top: rgb(255, 44, 251) 5px solid;
  border-bottom: rgb(26, 179, 255) 5px solid;
  border-radius: 4px;
  box-shadow: 0px 0px 5px black, 0px 0px 5px black;
  height: auto;
  width: 110%;
  overflow: hidden;
  margin-left: -5%;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-right: -10%;
  padding: 2px;
  background: linear-gradient(to bottom, rgb(248, 248, 248), rgba(255, 255, 255, 0.186));
  font-size: 24px;
}

  .menuButton {
    border: #fc1f91 3px solid; 
    border-radius: 8px;
    box-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
    padding-top: 2px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 2px;
    font-family: 'BPmono';
    font-weight: bolder;
    font-size: 18px;
    color: black;
    background-image: url('https://file.garden/ZsJltiD-bXBSm0-A/Website%20Media/images/360_F_338033184_8oKq8czljHGktFpBPpytrJAHIZyBMLyL.jpg'); /* change this later to a different image */
    background-size: 100% 100%;
    /* background: linear-gradient(217deg, rgb(255 0 0 / 80%), transparent 70.71%), linear-gradient(127deg, rgb(0 255 0 / 80%), transparent 70.71%), linear-gradient(336deg, rgb(0 0 255 / 80%), transparent 70.71%); */
    transition-property: letter-spacing;
    transition-duration: 0.5s;
  }

  .menuButton:hover {
    letter-spacing: 3px;
  }

#musicPlayer {
  height: auto;
  width: auto;
  margin-right: 16px;
  margin-left: 16px;
  color: aquamarine;
  border: #ebcc00 5px solid;
  border-radius: 8px;
  box-shadow: 0px 0px 5px black, 0px 0px 5px black;
  padding: 4px;
  padding-top: 16px;
  padding-bottom: 16px;
  background-size: 100% 100%;
  background: linear-gradient(217deg, rgb(253, 65, 162), transparent 70.71%), linear-gradient(118deg, rgb(252, 160, 177), transparent 70.71%), linear-gradient(336deg, rgb(0, 255, 145), transparent 70.71%), linear-gradient(92deg, rgb(0, 191, 255), transparent 70.71%);
  /* background-image: linear-gradient(#ffa5d6, #f70019); */
  font-size: 24px;
}

  #playButton{
    height: 60px;
    width: 60px;
    padding: 5px;
    background: linear-gradient(217deg, rgb(255, 68, 130), transparent 70.71%), linear-gradient(127deg, rgb(21, 249, 234), transparent 70.71%), linear-gradient(336deg, rgb(161, 106, 249), transparent 70.71%);
    box-shadow: 5px 5px rgba(0, 230, 246, 0.8);
    border: black 3px solid;
    border-radius: 50%;
    transition: background-color;
    transition-duration: 1s;
  }

    #playImage {
      height: 75%;
      width: 100%;
    }
  
  #playButton:hover {
    background-color: red;
  }

  #pauseButton{
    height: 40px;
    width: 50px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0);
    border: black 5px solid;
    border-radius: 500px;
  }

    #pauseImage {
      height: 100%;
      width: 100%;
    }
  
  #pauseButton:hover {
    box-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
  }

#univChatBox {
  border: #ebcc00 5px solid; 
  box-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
  border-radius: 5px;
  width: auto;
  height: auto;
  background-size: 100% 100%;
  background-color: white;
}

#superevents {
  height: 500px;
  width: 469px;
  margin: auto;
  vertical-align: middle;
  background-image: url(https://file.garden/ZsJltiD-bXBSm0-A/tv.png);
}

@keyframes dividerAnimation {
  0% {background: crimson;
  box-shadow: 0px 0px 1px crimson, 0px 0px 3px crimson, 0px 0px 5px crimson, 0px 0px 7px crimson;
  border: crimson 3px solid;}

  50% {background: rgb(255, 200, 0);
  box-shadow: 0px 0px 1px rgb(255, 200, 0), 0px 0px 3px rgb(255, 200, 0), 0px 0px 5px rgb(255, 200, 0);
  border: rgb(255, 200, 0) 3px solid;}

  100% {background: crimson;
  box-shadow: 0px 0px 1px crimson, 0px 0px 3px crimson, 0px 0px 5px crimson, 0px 0px 7px crimson;
  border: crimson 3px solid;}
}

.divider {
  border: black 3px solid;
  border-radius: 5px;
  height: 1%;
  margin: auto;
  animation-name: dividerAnimation;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
  /*
  ================================================================================
  bottom section
  ================================================================================
  */
    #bottomWrapper {
      display: grid;
      grid-gap: 16px;
      padding: 0px;
      margin: 16px;
    }
    /*
    ================================================================================
    bottom bar
    ================================================================================
    */ 
      #bottomBar {
        position: static;
        border: #ebcc00 5px solid;
        border-radius: 8px;
         box-shadow: 0px 0px 5px black, 0px 0px 5px black;
        height: auto;
        width: auto;
        padding: 2px;
        background-color: white;
        font-size: 24px;
      }
    /*
    ================================================================================
    bottom bar
    ================================================================================
    */ 

    /*
    ================================================================================
    slogan bar
    ================================================================================
    */ 
      #sloganBar {
        position: static;
        float: bottom;
        border: #ebcc00 5px solid;
        border-radius: 8px;
        box-shadow: 0px 0px 5px black, 0px 0px 5px black;
        height: auto;
        width: auto;
        padding: 8px;
        color: black;
        background: 
          linear-gradient(127deg, rgb(255, 87, 87), transparent 70.71%),
          linear-gradient(217deg, rgb(39, 255, 158), transparent 70.71%),
          linear-gradient(336deg, rgb(51, 160, 255), transparent 70.71%);
      }
    /*
    ================================================================================
    slogan bar
    ================================================================================
    */         
    
    /*
    ================================================================================
    slogan slop
    ================================================================================
    */ 
    #sloganSlop {
      color: crimson;
      text-shadow: 1.5px 1.5px rgba(0, 230, 246, 0.8);
      -webkit-text-stroke: 0.5px black;
    }
    /*
    ================================================================================
    slogan slop
    ================================================================================
    */
  /*
  ================================================================================
  bottom section
  ================================================================================
  */ 

/*
================================================================================
containers
================================================================================
*/