:root {
  font-size: 6.25%;
  --bg-unactivated-card: hsl(240, 9%, 89%);
  --bg-unactivated-dark-card: hsl(0deg 0% 54%);
  --bg-activated-card: hsl(194, 97%, 31%);
  --primary-color: hsl(240, 6%, 21%);
  --primary-dark-color: hsl(240, 9%, 89%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.content {
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  width: 100vw;
  height: 100vh;
}

.content.dark {
  background-color: var(--primary-color);
}

.theme {
  position: fixed;
  right: 30rem;
  top: 30rem;
  cursor: pointer;
}

.moon {
  fill: var(--primary-color);
}

.sun {
  fill: var(--bg-unactivated-card);
}

.timer-wrapper {
  display: flex;
  flex-direction: column;
}

.timer {
  margin-bottom: 17rem;

  font-size: 126rem;
  color: var(--primary-color);
}

.timer.dark {
  color: var(--primary-dark-color);
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.hide {
  display: none;
}

.actions-btn-wrapper {
  display: flex;
  justify-content: space-evenly;
}

.action-btn.dark path {
  fill: var(--primary-dark-color);
}

.sounds-wrapper {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 32rem;
}

.card {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 138rem;
  height: 152rem;

  background-color: var(--bg-unactivated-card);
  border-radius: 24rem;
}

input[type='range'] {
  position: absolute;

  -webkit-appearance: none;
  background-color: hsla(240, 6%, 21%, 1);
  height: 4rem;
  border-radius: 5rem;
  margin-top: 20rem;
  width: 80%;
  bottom: 20rem;
  /* accent-color: rebeccapurple; */
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: hsla(240, 6%, 21%, 1);
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
}

.volume {
  font-family: 'Roboto', sans-serif;
  font-size: 13rem;
  content: attr(data-value);
  background-color: white;
  border-radius: 8rem;
  padding: 0.6rem 4rem;
  position: absolute;
  top: 105rem;
  margin: 0 auto;
}

.volumeNature:hover ~ span,
.volumeRain:hover ~ span,
.volumeStore:hover ~ span,
.volumeFirepit:hover ~ span {
  display: initial;
}

.activated button {
  background-color: var(--bg-activated-card);
}

.activated svg > path {
  fill: white;
}

.activated input {
  background-color: white;
}

.activated input::-webkit-slider-thumb {
  background-color: white;
}

@media (max-width: 730px) {
  .content {
    flex-direction: column;
  }

  .timer-wrapper {
    padding: clamp(20rem, 20rem + 20%, 40rem);
  }
}