@font-face {
  font-family: 'pxgrotesk';
  src: url('./font/pxgrotesk-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'pxgrotesk';
  src: url('./font/pxgrotesk-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

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

body {
  font-family: 'pxgrotesk', sans-serif;
  padding: 50px;

  @media (min-width: 1025px) {
    padding: 0px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: scale(0.8) translate(-50%, -50%);
    transform-origin: top left;
  }
}

.main-title {
  font-size: 1.6em;
}

.play-button {
  margin-top: -20%;
  transition: 0.3s;
}

.play .play-button {
  opacity: 0.6;
}

.stop .play-button {
  opacity: 0;
}

.progress-wrapper {
  position: relative;
}

.progress {
  background: white;
  width: 0%;
  height: 100%;
  transition: 0.25s;
}

.progress-hitbox {
  position: absolute;
  top: -25px;
  bottom: -12px;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 10;
  background: transparent;
}

.time {
  font-size: 0.8em;
}