@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,400;0,700;1,100&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,100,1,-25");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;
  place-items: center;
  place-content: center;
  gap: 2rem;

  background: #e0e0e0;

  font-family: "Raleway", sans-serif;
}
h1 {
  font-size: xx-large;
  font-weight: 100;

  z-index: -10;
}
button {
  width: 100px;
  aspect-ratio: 1;

  font-size: x-large;
  color: grey;
  font-weight: 100;

  border: none;
  border-radius: 50%;

  background: rgba(224, 224, 224, 1);
  box-shadow: 11px 11px 21px #cecece, -11px -11px 21px #f2f2f2;

  transition: transform 0.2s ease;

  z-index: 10;
}

button:hover,
button:focus {
  cursor: pointer;
  color: dark-grey;
}

.pause {
  box-shadow: inset 11px 11px 21px #cecece, inset -11px -11px 21px #f2f2f2;
}

.material-symbols-outlined {
  font-size: 4rem;
}

.dot {
  width: 20px;
  aspect-ratio: 1;
  background: grey;
  border-radius: 100%;
  animation: dance 1.5s linear infinite;
}

@keyframes dance {
  0% {
    transform: translateX(-55vw) translateY(calc(10vh * sin(0deg)));
  }
  10% {
    transform: translateX(-40vw) translateY(calc(10vh * sin(45deg)));
  }
  20% {
    transform: translateX(-30vw) translateY(calc(10vh * sin(90deg)));
  }
  30% {
    transform: translateX(-20vw) translateY(calc(10vh * sin(180deg)));
  }
  40% {
    transform: translateX(-10vw) translateY(calc(10vh * sin(90deg)));
  }
  50% {
    transform: translateX(0) translateY(calc(10vh * sin(45deg)));
  }
  60% {
    transform: translateX(10vw) translateY(calc(10vh * sin(0deg)));
  }
  70% {
    transform: translateX(20vw) translateY(calc(10vh * sin(45deg)));
  }
  80% {
    transform: translateX(30vw) translateY(calc(10vh * sin(90deg)));
  }
  85% {
    transform: translateX(-20vw) translateY(calc(10vh * sin(180deg)));
  }
  90% {
    transform: translateX(40vw) translateY(calc(10vh * sin(180deg)));
  }
  95% {
    transform: translateX(-20vw) translateY(calc(10vh * sin(60deg)));
  }
  100% {
    transform: translateX(55vw) translateY(calc(10vh * sin(90deg)));
  }
}

/* End of CSS. */