@import url("https://fonts.googleapis.com/css?family=Varela+Round|Iceland");
@media only screen {
  body {
    font-size: 60px;
  }
}
@media only screen and (max-width: 650px) {
  body {
    font-size: 50px;
  }
}
@media only screen and (max-width: 550px) {
  body {
    font-size: 45px;
  }
}
@media only screen and (max-width: 500px) {
  body {
    font-size: 40px;
  }
}
@media only screen and (max-width: 450px) {
  body {
    font-size: 35px;
  }
}
@media only screen and (max-width: 400px) {
  body {
    font-size: 30px;
  }
}
@media only screen and (max-width: 375px) {
  body {
    font-size: 25px;
  }
}
body {
  background-color: #0C0C0C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%230a0a0a' fill-opacity='0.6'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
  color: #070707;
  font-family: "Varela Round";
  height: 100vh;
  line-height: 1;
  min-width: 320px;
  padding: 30px;
  text-align: center;
  width: 100vw;
}

.center {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.game {
  background-color: #070707;
  border: 5px solid #070707;
  border-radius: 100%;
  box-shadow: 0 0 50px white;
  height: 650px;
  margin: 0 auto;
  max-width: 650px;
  overflow: hidden;
  position: relative;
  content: "";
}

.btn-game-container {
  height: 100%;
  width: 100%;
}

.spin {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-game {
  filter: brightness(0.5);
  float: left;
  height: 50%;
  width: 50%;
  transition: all 0.25s;
}
.btn-game.brighten {
  filter: brightness(1);
}
.btn-game#btn-1 {
  background-color: #32CD32;
}
.btn-game#btn-2 {
  background-color: #FF3030;
}
.btn-game#btn-3 {
  background-color: #FFFF20;
}
.btn-game#btn-4 {
  background-color: #1E90FF;
}
.btn-game:hover {
  cursor: pointer;
}
.btn-game:hover.disabled {
  cursor: auto;
}

.module {
  margin: 0 auto;
  background: #696969;
  border-radius: 100%;
  height: 70%;
  width: 70%;
  border: 5px solid #070707;
  overflow: hidden;
}

.title {
  color: #CCCCCC;
  font-size: 150%;
  font-weight: bold;
  margin-top: 10%;
  text-shadow: -3px 0 #070707, 0 -3px #070707, 3px 0 #070707, 0 3px #070707;
}
.title span:hover {
  cursor: pointer;
}

.score {
  color: #070707;
  background-color: #AAAAAA;
  border: 2px solid #070707;
  border-radius: 15px;
  line-height: 1;
  font-family: "Iceland";
  font-size: 100%;
  margin: 0 auto;
  margin-bottom: 5%;
  padding: 0 3%;
  width: 30%;
}

.row {
  line-height: 0;
  margin: 2% auto;
  width: 70%;
}
.row .col-6 {
  padding: 0 3px;
}

.btn-mod {
  background-color: #CCCCCC;
  border: 2px solid #070707;
  border-radius: 1000px;
  box-shadow: 0 3px 1px #333;
  color: #070707;
  font-size: 25%;
  font-weight: bold;
  height: 100%;
  margin: 0;
  padding: 3%;
  transform: translateY(-3px);
  transition: all 0s;
  width: 100%;
}
.btn-mod:focus {
  box-shadow: 0 0 10px #070707;
}
.btn-mod:active, .btn-mod.enabled {
  background-color: #AAAAAA;
  box-shadow: 0 0 10px #070707;
  color: #070707;
  transform: translateY(0px);
}