html, body, .wrapper {
  height: 100%;
  margin: 0;
}

html {
  background-color: #3A3042;
  color:            #FBF5F3;
}

.wrapper {
  display:         flex;
  justify-content: center;
  align-items:     center;
}

.icon-button {
  cursor: pointer;
  transition: color .2s ease;
}

.icon-button.disabled {
  color:  rgba(251, 245, 243, 0.5);
  cursor: not-allowed;
}

.icon-button:hover:not(.disabled) {
  color: #C1D37F;
}

.play {
  font-size: 15rem;
}

.volume {
  background-color: #D8DBE2;
  height: 1px;
  width: 100%;
}

.controls {
  display: flex;
  justify-content: space-evenly;
  padding: 1rem;
}

.controls .icon-button {
  font-size: 2.5rem;
}