html {
  height: 100%;
  width: 100%;
  background-color:#cfcfcf;
}

#buttons{
  position:absolute;

}

#confirmation{
  overflow: hidden;
  position: fixed;
  left:50%;
  top:50%;
  padding:1vw;
  width:50vw;
  opacity:0;
  transform: translate(-50%,-50%);
  height:25vw;
  background-color:#70f0e1;
  outline: 8px solid #030303;
  outline-offset: 0px;
  border: 2vw solid #4c7176;
  border-radius:20px;
  text-align:center;
  
  font-weight: 900;
  font-size:4vw;
}

.sconfirmation{
  animation: sconfirmation 1s linear;
}
.econfirmation{
  animation: econfirmation 1s linear;
}

@keyframes sconfirmation{
  0%{width:0vw; height:0vw; opacity:0;}
  80%{width:53vw; height:27vw; opacity:1;}
  100%{width:50vw;height:25vw;opacity:1;}
}
@keyframes econfirmation{
  0%{width:50vw;height:25vw;opacity:1;}
  20%{width:53vw; height:27vw; opacity:1;}
  100%{width:0vw; height:0vw; opacity:0;}
  
}

button{
  transition-duration: 0.1s;
}
button:hover{
  
  transform:translateY(-15px);
}
button:active{
  transform:scale(0.9);
}

#yes{
  font-weight: 900;
  font-size:4vw;
  margin-right:5px;
  width:20vw;
  height:10.5vw;
  background-color:#80f269;
  border: 10px solid black;
  border-radius:2vw;
}
#no{
  font-weight: 900;
  font-size:4vw;
  margin-left:5px;
  width:20vw;
  height:10.5vw;
  background-color:#f269a4;
  border: 10px solid black;
  border-radius:2vw;
}
#yesnomaybeso{
  margin-top:3vw;
  position:fixed;
  left:50%;
  transform: translate(-50%,0);
}

#restarts{
  position: fixed;
  bottom: 0;
  right: 0;
  transform:translateY(-18px);
  transition-duration: 0.3s;
  margin-right:20px;
  

}

#restarts:active{

  transform:scale(0.95);
}

#spawnspeed{
  margin-top:-5px;
  margin-left:7.5px;
  border:7.5px solid black;
  padding:5px;
  padding-top:2px;
  border-radius:10px;
  background-color:#a0fe62;
  width:200px;
  height:75px;
}
#spawnspeeds{
  margin-top:7.5px;
  width:97%;
  background-color:#6ccb8d;
  border-radius:5px;
  text-align:center;
  letter-spacing: 3px;
  font-weight: 900;
  font-size:200%;
}
#spawntitle{
  font-size:150%;
  letter-spacing: 3px;
  position:absolute;
  left:50%;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-30%);
  margin-bottom:10px;
  font-weight: 900;
}
#titlep{
  outline: 3px solid #565255;
  outline-offset: 0px;
  margin-top:-25px;
  margin-left:10px;
  font-size:150%;
  letter-spacing: 3px;
  position:absolute;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 900;
  background-color:#c09b9b;
  border:3px solid black;
  border-radius:10px;
  padding:5px;
  
}
#titlesp{
  outline: 3px solid #565255;
  outline-offset: 0px;
  margin-top:-20px;
  margin-left:10px;
  font-size:150%;
  letter-spacing: 3px;
  position:absolute;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 900;
  border:3px solid black;
  background-color:#cba9a9;
  border-radius:10px;
  padding:5px;
}

#gamecontainer{
  height: 100%;
  width: 100%;
}
#player{
  position:fixed;
  width:25px;
  height:25px;
  
  
  background-color:#000000;
  border-radius:15px;
  border:5px solid #3d3d3d;
}

.mob{
  position:fixed;
  width:50px;
  height:50px;
  border-radius:30px;
  background-color:red;
  border: 3px solid black;
}

.mob2{
  position:fixed;
  width:70px;
  height:70px;
  border-radius:40px;
  background-color:#00e1ff;
  border: 5px solid black;
}

.mob3{
  position:fixed;
  width:100px;
  height:100px;
  border-radius:55px;
  background-color:#aeff00;
  border: 8px solid black;
}
.mob4{
  position:fixed;
  width:200px;
  height:200px;
  border-radius:105px;
  background-color:#ffae00;
  border: 8px solid black;
}

.mob5{
  position:fixed;
  width:100px;
  height:100px;
  border-radius:55px;
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #dbac48 30%, #cf9e2a 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #ffe59e 25%, #ba994a 62.5%, #5d4a1f 100%);
  box-shadow: 1px 25px 57px 20px rgba(255,228,104,0.8);
  -webkit-box-shadow: 1px 25px 57px 20px rgba(255,228,104,0.8);
  -moz-box-shadow: 1px 25px 57px 20px rgba(255,228,104,0.8);
}
.mob6{
  position:fixed;
  width:100px;
  height:100px;
  border-radius:55px;
  box-shadow: 3px 35px 68px 28px rgba(169,83,203,0.77);
  -webkit-box-shadow: 3px 35px 68px 28px rgba(169,83,203,0.77);
  -moz-box-shadow: 3px 35px 68px 28px rgba(169,83,203,0.77);
  background: linear-gradient(91.1deg, rgb(254, 113, 250) -2.3%, rgb(193, 77, 255) 44.4%, rgb(231, 75, 184) 103.4%);

}

.mobanimation{
  animation:mobanimation 0.5s linear;
}

@keyframes mobanimation{
  0%{transform: scale(0);opacity:0;}
  80%{transform: scale(1.25);opacity:1;}
  100%{transform: scale(1);}
}

.popanimation{
  animation:popanimation 0.125s linear;
}

@keyframes popanimation{
  0%{opacity:1;}
  40%{opacity:0.1;transform: scale(1.5);}
  100%{transform: scale(1.2);opacity:0;visibility: hidden;}

}

.trail{
  position:absolute;
  width:25px;
  height:25px;
  background-color:red;
  border-radius:12.5px;
}

#pauseeee{
  transition-duration: 0.3s;
}
#pauseeee:hover{
  
  transform:translateY(-8px);
}
#pauseeee:active{

  transform:scale(0.95);
}


.goldan{
  animation:goldan 0.25s linear infinite;
}

@keyframes goldan{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0px);}

}