* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

html {
  overflow: hidden !important;
}

body {
  background-color: #fff;
  /* background-image: url('https://media0.giphy.com/media/l0O9xPjD3d8G80PXG/giphy.gif'); */
  background-image: url('../img/bg.gif');
  background-repeat: no-repeat;
  background-position: fixed;
  background-size: 100% 100%;
  font-family: courier;
  margin: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  height: 100vh !important;
}

body.swal2-iosfix {
  position: initial !important;
}

.begin {
  max-width: 400px;
  text-align: center;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  color: white;
  padding: 30px 60px;
  background: rgba(0, 0, 0, .8);
  transform: translateX(-50%) translateY(-50%);
  cursor: pointer;
}

#score {
  margin: 25px;
  background: #FFFA62;
  padding: 16px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 0 0 #000000;
  box-shadow: 10px 10px 0 0 #000000;
  width: 150px;
  text-align: center;
}

#points {
  margin: 0 auto;
}

#leaderboard {
  display: none;
  max-width: 500px;
}

.modal_board {
  text-align: left;
}

.modal_board ul, #leaderboard ul {
  list-style: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.score_board {
  margin: 25px;
  background: #FFFA62;
  padding: 16px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 0 0 #000000;
  box-shadow: 10px 10px 0 0 #000000;
  font-family: courier;
  /* transition: all 1s ease; */
}

.btn-normal {
  background: #fff !important;
  color: #000 !important;
  border: 0px;
  padding: 5px 10px;
  margin: 5px 0px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 0 0 #000000 !important;
  box-shadow: 5px 5px 0 0 #000000 !important;
  font-family: courier;
  cursor: pointer;
  outline: 0;
}

.btn-leaderboard {
  margin: 25px;
  background: #fff !important;
  color: #000 !important;
  border: 0px;
  padding: 16px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 0 0 #000000 !important;
  box-shadow: 5px 5px 0 0 #000000 !important;
  font-family: courier;
  cursor: pointer;
  outline: 0;
}

.btn-normal:active, .btn-leaderboard:active {
  -webkit-box-shadow: 2px 2px 0 0 #000000 inset !important;
  box-shadow: 2px 2px 0 0 #000000  inset!important;
}

.score_board h4 {
  text-align: center;
  margin-top: 0px;
}

.mike {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  max-height: 100px;
}

.blur {
  opacity: 0;
}

@-webkit-keyframes scaleSpin {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  10% {
    -webkit-transform: scale(1.5) rotate(360deg);
  }
  25% {
    -webkit-transform: scale(1.1) rotate(0deg);
  }
  35% {
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg);
  }
  75% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(0.2) rotate(360deg);
    opacity: 0;
  }
}

@keyframes scaleSpin {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  10% {
    -webkit-transform: scale(1.5) rotate(360deg);
  }
  25% {
    -webkit-transform: scale(1.1) rotate(0deg);
  }
  35% {
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg);
  }
  75% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(0.2) rotate(360deg);
    opacity: 0;
  }
}

.active {
  -webkit-animation-name: scaleSpin;
  animation-name: scaleSpin;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: once;
  animation-iteration-count: once;
  -webkit-filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
  filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
}

@keyframes spinOut {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  10% {
    -webkit-transform: scale(1.1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(0.5) rotate(360deg);
    -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.5);
  }
}

.inactive, .inactive.mike {
  max-height: 75px;
  position: absolute;
  z-index: 2;
  cursor: disabled !important;
  -webkit-animation-name: spinOut;
  animation-name: spinOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: once;
  animation-iteration-count: once;
  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(0.1);
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}