@font-face{
  font-family: gamepaused;
  src: url(/fonts/gamepaused.otf);
  }
@font-face {
  font-family: bytebounce;
  src: url(/fonts/bytebounce.ttf);
  }

@keyframes spin{
    0%, 100% {
        transform: rotateZ(0)
      }
    25% {
        transform: rotateZ(3deg)
      }
    75% {
        transform: rotateZ(-3deg)
      }
}

@keyframes spin2{
   100% {transform: rotate(1turn);}
      
}

body{
  background-color: #6f3198;
  background-image: url(/img/greenbg.png);
  background-size: 100%;
  background-repeat: repeat-Y;
  font-family: gamepaused, sans-serif;
  padding-bottom: 20px;
  }
  
a{
  color: #6f3198;
  }
  
a:hover{
  color: #a8e61d;
  }
/* Title */ 
.titles{
  position: absolute;
  border: solid 2px black;
  border-radius: 8px;
  background-color: white;
  padding: 10px;
  margin-top: 20px;
  margin-left: 200px;
  width: 80%;
  height: 42px;
  font-size: 50px;
  animation: spin 10s ease infinite;
  }

.titles h1{
    font-size: 50px;
    margin-top: -5px;
  }
  
/* Home Button */
.homebutton{
  position: absolute;
  margin-left: 20px;
  margin-top:20px;
  border: solid 2px black;
  border-radius: 8px;
  background-color: white;
  padding: 7px;
  width: 150px;
  font-size: 20px;
  }
  
/* Weeklies */
.weeklies {
  position: absolute;
  margin-left: 200px;
  margin-top: 100px;
  border: solid 2px black;
  border-radius: 8px;
  background-color: white;
  padding: 10px;
  width: 80%;
  }
  
.weeklies img{
  width: 100px;
  border-radius: 7px;
  border: solid 2px black;
  }
  
.weeklies img:hover{
  animation: spin2 5s linear infinite;
  }
  
.weeklies td{
  width: 200px;
  padding-right: 5px;
  }
  
.weeklies .date{
  font-family: bytebounce;
  font-size: 25px;
  line-height: 0px;
  padding: 0;
  }
  
.prev{
  position: absolute;
  margin-top: 100px;
  margin-left: 20px;
  overflow-y: scroll;
  width: 145px;
  height: 275px;
  border: solid 2px black;
  border-radius: 8px;
  background-color: white;
  padding: 10px;
  }

.artists{
  position: absolute;
  margin-top: 410px;
  margin-left: 20px;
  overflow-y: scroll;
  width: 1193px;
  height: 400px;
  border: solid 2px black;
  border-radius: 8px;
  background-color: white;
  padding: 15px;
  }
  
.artists .artpic img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: solid 2px black;
  border-radius: 7px;
  color: #5F9EA0;
  }
  
.artists .artpic img:hover{
  animation: spin2 5s linear infinite;
  }

.artists td{
  width: 150px;
  padding: 5px;
  }