html {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #3e437e, #393c3c)
}
* {
  transition-duration: 0.24s;
  font-family: mtg;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#targetImg {
  width: 70vw;
  box-shadow: 0 0 10px #bde3ef;
}
#imgBorder {
  border: 5px ridge white;
  overflow: hidden;
}
.name {
  font-size: 5vmin;
}
#board {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  gap: 2.5vmin;
}
@font-face {
  font-family: mtg;
  src: url(bel.ttf);
}
button {
  font-size: 4.5vmin;
  padding: 1vmin;
  border-radius: 10% / 60%;
  background: linear-gradient(to bottom, white, #dedede, #999999);
  border: 1px solid balck;
  box-shadow: 0 0 1px 5px white;
}
.correct {
  background: green;
}
#endPage {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 6vmin;
  color: white;
  flex-direction: column;
  text-shadow: 1px 1px 1px black, -1px 1px 1px black, 1px -1px 1px black, -1px -1px 1px black;
}
#score {
  color: white;
  font-size: 4.5vmin;
}
#buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5vmin;
  width: 100vw;
  align-items: center;
}
hr {
  width: 100vw;
  background: white;
  height: 1px;
  border: none;
}
.red {
  color: #f56666;
}
@keyframes unblur {
  from {
    filter:blur(20px);
  }
  to {
    filter: blur(0);
  }
}
@keyframes drain {
  0% {
    width: 100%;
    background: #32c832;
  }
  50% {
    width: 50%;
    background: #f1f11e;
  }
  100% {
    width: 0;
    background: #ce2222;
  }
}
#timingBlock {
  color: white;
  text-align: center;
  font-size: 3.5vmin;
}
#outer {
  width: 70vw;
  height: 5vmin;
  border: 2px solid white;
  overflow: hidden;
  border-radius: 10% / 60%;
}
#inner {
  background: #32c832;
  height: 100%;
  width: 100%;
}
#turns {
  font-size: 4vmin;
  color: white;
  opacity: 0.75;
}
#intro {
  display: flex;
}
#endScreen {
  display: none;
}
#intro, #endScreen {
  flex-direction: column;
  color: white;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  gap: 3vmin;
  font-size: 3.75vmin;
  padding: 2.5vmin;
}
#logo {
  font-size: 7vmin;
}