*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -msbox-sizing: border-box;
}
html, body {
  overflow-x: hidden;
}

body{
cursor: none;
width: 100%;
color: white;
background-size: cover;
}




.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 20vh;
  

}
#follow {
  position: absolute;
  text-align: center;
  z-index:1000;
}
#bugbox{
  display: block;

  margin-top: 15vh;
  height: 20vh;
  width:auto;
  -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */

}
.bugtext{
  
  font-size: 2.5em;
  position:sticky;
  text-align:center;
  margin-top:5vh;
}
.averageFormat{
  font-size: 1.5em;
  margin-top: 0vh;
}
.offcanvas-btn{
  left: 250px;
  top: 250px;
  position: absolute;
  visibility: visible;
}
#timer{
  position:absolute;
  bottom:1%;
  right:1%;
}
#currentlyPlaying{
  position:absolute;
  bottom:1%;
  left:1%;
}
#congrats100{
  font-size: 2em;
  position:absolute;
  top:20%;
  right: 10%;
}
#congrats200{
  font-size: 2em;
  position:absolute;
  top:10%;
  left: 20%;
}
#congrats500{
  font-size: 2em;
  position:absolute;
  top:80%;
  right:30%;
}
.colorRotate{
  animation: colorRotate 15s linear 0s infinite;
}
@keyframes colorRotate {
  from {
      background-color: rgb(255, 0, 0);
  }
  16.6% {
    background-color: rgb(255, 0, 255);
  }
  33.3% {
    background-color: rgb(0, 0, 255);
  }
  50% {
    background-color: rgb(0, 255, 255);
  }
  66.6% {
    background-color: rgb(0, 255, 0);
  }
  83.3% {
    background-color: rgb(255, 255, 0);
  }
  to {
    background-color: rgb(255, 0, 0);
  }
}
.swaymild{
  animation: swaymild 3s infinite;
  transform-origin: center;
}
.sway {
  animation: sway 1s infinite;
  transform-origin: center;
}
.gonuts{
  animation: gonuts 20ms infinite;
  transform-origin: center;
}
@keyframes swaymild {
  0%, 100%{ transform: rotate(-6deg);}

  50%{ transform: rotate(6deg); }
}
@keyframes sway {
  0%, 100%{ transform: rotate(-12deg);}

  50%{ transform: rotate(12deg); }
}
@keyframes gonuts{
  0%{transform: rotate(0deg) translateX(-1vw);}
  100%{transform: rotate(360deg)translateX(1vw);}
}
#planetbutton{
  cursor:none;
  position:absolute;
  padding:1%;
  background-color:	#414A4C;
  top: 10vh;
  right:1vw;
  border-radius:10px;
}
#planetbutton:hover{
  filter:brightness(.8);

}
#planetbutton img{

  height: 5vh;
  
  
}