@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Calligraffitti&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');

body {
  font-family: "Fira Code", monospace;
  margin: 0px; padding: 0px;
  background-color: rgb(52, 71, 101);
  overflow: hidden;
}

#controlpanel{
  display: block;
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 10px;
  color: rgb(1, 139, 12);

  font-size: 14px;
}

#LagDealer{
  display: block;
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 100px;
  color: rgb(255, 0, 0);

  font-size: 14px;
}

p {
  display: inline;
}


@keyframes fade-in-out {
  0% { opacity: 0; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.fade-in-out {
  animation: fade-in-out 3s;
}

#homeScreenCom p{
  font-family: 'Sedgwick Ave', cursive;
  text-shadow: 2px 2px 12px #3162a8;
  z-index: 512;
  color: whitesmoke;
  position: absolute;
    text-align: left;
    align-items: center;
    vertical-align: top;
    cursor: pointer;
    font-size: 36px;
}

#homeScreenCom p:hover{
  text-shadow: 2px 2px 12px #2c84ff;
}


#startButton{
  z-index: 9999;
  
  top: 300px;
  left:80px;
  position: absolute;
}

#extraStageStart{
  z-index: 9999;
  top: 360px;
  position: absolute;
  left: 80px;
}

#practiceStart{
  z-index: 9999;
  top: 420px;
  position: absolute;
  left: 80px;
}

#setting{
  z-index: 9999;
  top: 480px;
  position: absolute;
  left: 80px;
}

#escape{
  z-index: 9999;
  top: 540px;
  position: absolute;
  left: 80px;
}

#start1{
  position: relative;
  z-index: 998;
  top: 300px;
  left: 360px;
  transition-duration: 2s;
  opacity: 1;
}

#start2{
  position: relative;
  z-index: 998;
  top: 300px;
  left: 480px;
  transition-duration: 2s;
  opacity: 1.0;
}

#start3{
  position: relative;
  z-index: 998;
  top: 300px;
  left: 600px;
  transition-duration: 2s;
  opacity: 1.0;
}

#start4{
  position: relative;
  z-index: 998;
  top: 300px;
  left: 720px;
  transition-duration: 2s;
  opacity: 1.0;
}

.tst{
  display: none;
}