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

/* Colors variables organized */
:root {
  --hue: 194;
  --bg--color: hsl(var(--hue), 5%, 7%);
  --text--color: hsl(var(--hue), 40%, 98%);
  --primary--color: hsl(var(--hue), 100%, 63%);
  --second--color: hsl(0, 78%, 51%);
  --controls-bg--color: hsl(var(--hue), 0%, 14%);
  --button--secondary: hsl(var(--hue), 40%, 98%);
  --highlight-color: hsla(0, 0%, 100%, 0.2);

  font-family: "Inter", sans-serif;
  font-size: clamp(
    40%,
    1% + 2vw,
    62.5%
  ); /* Flexibiliza e define um range para o dimensionameto do elemento. Vai sempre fazer o cálculo do meio, tendo como mín 40% e máx 62.5%.*/
}

html.light {
  --bg--color: hsl(var(--hue), 40%, 98%);
  --text--color: hsl(var(--hue), 5%, 7%);
}

html.light .ph-sun,
html:not(.light) .ph-moon {
  display: none;
}

#toggle-mode {
  position: absolute;
  right: 3.2rem;
  top: 3.2rem;

  font-size: 3.2rem;
  line-height: 0; /* Como não texto, garante q não irá atrapalhar*/
  color: var(--text--color);
}

/* Classe utilitária p/acessibilidade p/screen reader*/
.sr-only {
  width: 1px;
  height: 1px;

  position: absolute;
  overflow: hidden;

  margin: -1px;
  padding: 0px;
  border: 0;
  appearance: none;
}

body {
  background-color: var(--bg--color);
  color: var(--text--color);

  display: grid;
  place-content: center;
  height: 100vh;
}

h1 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 100;
  line-height: 8rem;
}

#app {
  display: grid;
  justify-items: center;
}

/* Classe utilitária: tem um único propósito*/
.flex {
  display: flex;
}

#timer {
  font-size: 9.6rem;
  font-weight: bold;
  font-family: sans-serif;

  justify-content: center;
}

#controls {
  margin-top: 1.6rem;
  padding: 2.2rem 4rem;
  gap: 1.6rem;

  background-color: var(--controls-bg--color);
  border-radius: 999rem;
}

button {
  background-color: transparent;
  border: 0;
  border-radius: 50%;

  color: var(--second--color);
  font-size: 6.4rem;

  cursor: pointer;
}

#controls button:hover {
  background: var(--highlight-color);
  padding: 0.2rem;
}

.secondary {
  color: var(--button--secondary);
}

/* CONTROLS */
.running .ph-play-circle,
.running .ph-timer,
.music-on .ph-speaker-none,
/* pseudo class (html:not = o html não possui... */
html:not(.running) .ph-pause-circle,
html:not(.running) .ph-stop-circle,
html:not(.music-on) .ph-speaker-high {
  display: none;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;

  text-align: center;
  line-height: 8rem;
}

footer a {
  text-decoration: none;
  transition: 0.2s;

  color: #fff;
  font-size: 1.2rem;
}

footer a strong {
  color: var(--second--color);
}

footer a strong:hover {
  color: #f66b6b;
}

footer img {
  width: 1.2rem;
  height: auto;
  margin-right: 0.6rem;
}