@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
:root {
  font-size: 16px;
}

@media (max-width: 22rem) {
  :root {
    font-size: 11px;
  }
}

:focus {
  outline: none;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body,
button {
  font-family: "Varela Round", sans-serif;
  background-color: #1d1e22;
  color: white;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body h1 {
  padding: 3rem .25rem;
}

body h1 a {
  text-transform: uppercase;
  font-size: 5rem;
  font-size: clamp(3rem, 5vw, 6vw);
  color: #0ff;
  text-shadow: 0 0 2em #0ff;
  text-decoration: none;
}

body .stopwatch {
  font-size: 2rem;
}

body .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

body button {
  padding: 1rem;
  margin: 1rem;
  font-size: 1.75rem;
  width: 5em;
  border-radius: 0.4em;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  border: grey;
  -webkit-box-shadow: grey 0 0 0.5em;
          box-shadow: grey 0 0 0.5em;
  position: relative;
}

body button::after {
  content: "";
  display: block;
  height: 0.08em;
  background-color: grey;
  -webkit-box-shadow: grey 0 0 0.25em;
          box-shadow: grey 0 0 0.25em;
  border-radius: 50%;
  -webkit-transform: scale(0, 0);
          transform: scale(0, 0);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

body button:hover, body button:focus {
  background-color: white;
  color: #1d1e22;
  cursor: pointer;
}

body button:hover::after, body button:focus::after {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

#audio-controller {
  position: absolute;
  top: 0;
  right: 0;
}
/*# sourceMappingURL=style.css.map */