html {
  background-color: black;
  font-family: 'Regular', sans-serif;
  font-size: 18px;
}
/*------ Settings ------*/
.container {
  --color: #ffffff;
  --size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  user-select: none;
  fill: var(--color);
}

.container .play {
  position: absolute;
  animation: keyframes-fill .5s;
}

.container .pause {
  position: absolute;
  display: none;
  animation: keyframes-fill .5s;
}

/* ------ On check event ------ */
.container input:checked ~ .play {
  display: none;
}

.container input:checked ~ .pause {
  display: block;
}

/* ------ Hide the default checkbox ------ */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* ------ Animation ------ */
@keyframes keyframes-fill {
  0% {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }

  50% {
    transform: rotate(-10deg) scale(1.2);
  }
}
@font-face {
  font-family: 'Medium';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff')
       format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Regular';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
       format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Light';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff')
       format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'ExtraLight';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff')
       format('woff');
  font-weight: 400;
  font-style: normal;
}