body{
  background-color: #7b1fa2;
  text-align:center;
  color: white;
}

h1{
  color:white;
  font-family: 'Fredoka One', cursive, monospace;
  font-weight:200;
  font-size:3.5em;
}

h2{
  color: white;
  font-family: 'Fredoka One', cursive, monospace;
  font-weight:200;
  font-size:2.2em;
}

.leaderboard td, tr{
  border: 2px solid white;
  border-radius: 4px;
  font-family: 'Thasadith', sans-serif;
  font-weight: bold;
  font-size: 1.3em;
}

.leaderboard th{
  font-size: 1.5em;
}

code{
  background-color: #C3B8B8;
  padding: 8px;
  border-radius: 5px;
  color: black;
}

#explanation{
  width: 30%;
  display: inline-block;
}

#explanation-wrapper{
  text-align: center;
}

p{
  color: white;
  font-family: 'Thasadith', sans-serif;
  font-size: 1.3em;
}

.circle-btn{
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  font-size:10em;
  color:#7b1fa2;
  border:none;
  outline:none;
}

.circle-btn:hover{
  opacity:0.7;
  cursor:pointer;
}

.button{
  outline: none;
  border-radius: 5px;
  line-height: 2;
  font-size: 2em;
  text-align: center;
  width: 25%;
  background-color: #38006b;
  border: 3px solid white;
  color: white;
  font-family: 'Fredoka One', cursive;
  font-weight: 200;
}

.button:hover{
  background-color:#4a0072;
  cursor:pointer;
}

.bottom{
  position: absolute;
  bottom: 2vh;
  right: 0;
  left: 0;
  margin: auto;
}

.red{
  background-color: #8e0707;
}

.red:hover{
  background-color: #a80a0a;
}

.top{
  height:10vh;
}

#countdown-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#countdown{
  transition: opacity 0.25s;
  font-size: 8em;
}

#timer{
  position:fixed;
  top:20px;
  right:30px;
  margin:0;
  opacity:0;
}

input{
  opacity:0;
  border:none;
  outline:none;
  border-radius:5px;
  line-height: 2;
  font-size:2em;
  text-align:center;
  width:25%;
}

input[type=checkbox]{
  width: 0.8em;
  height: 0.8em;
}

#submit-score{
  background-color: white;
  color: #7b1fa2;
  border: none;
}

#submit-score:hover{
  background-color: #bcbcbc;
  color: #7b1fa2;
}

#submit-score:disabled{
  background-color: gray;
}

.report{
  margin-left: auto;
  margin-right: auto;
  border-spacing: 40px 0;
}

#qnumber{
  position:fixed;
  top:20px;
  left:30px;
  margin:0;
  opacity:0;
}

@media only screen and (max-width: 800px) {
    .button, #submit, #name-input, #text, #class-code, #submit-score{
      width: 80vw;
      left: 10vw;
    }

    .report{
      display: none;
    }

    .finish-submit{
      position:static !important;
    }

    #explanation{
      width: 80%;
      display: inline-block;
    }

    #leaderboard{
      bottom: 15vh;
    }

    #countdown{
      font-size: 5em;
    }
}