@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap");

* {
  padding: 0;
  margin: 0;
}

:root {
  --font: "Inter", sans-serif;

  /* theme colors */
  --swatch-size: 50px;
  --swatch-border-radius: 15px;

  --color1: #da2b2b;
  --color2: #3a7098;
  --color3: #262627;
  --color4: #f2f2f2;
  --color5: #230042;
  --color6: #00e846;
}

.container {
  font-family: var(--font);
  background-color: var(--base-color);
}

.material-icons {
  user-select: none;
  cursor: pointer;
  color: var(--text);
}

.material-icons:hover {
  color: var(--text-hover);
}

.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
}

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

  gap: 100px;
  padding: 10px;
}

.title {
  font-size: 40px;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  user-select: none;

  transition: ease-in-out 100ms;
}

.title:hover {
  color: var(--text-hover);
}

.material-icons.nav-button {
  font-size: 40px;
  transition: ease-in-out 100ms;
}

.app {
  background-color: var(--secondary-color);
  padding: 30px 35px;
  border-radius: 30px;
}

.timer {
  --timer-size: 400px;
  --stroke: 7px;

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

  gap: 15px;
}

.select-botoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.select-botoes input {
  display: none;
}

.select-botoes label {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  border-radius: 30px;
  width: 180px;
  height: 65px;

  color: var(--text);
  font-weight: 400;
  font-size: 20px;
  transition: background ease-in-out 150ms;
}

.select-botoes label:hover {
  background-color: var(--tertiary-color);
}

.select-botoes input:checked + label {
  background-color: var(--select-color);
  font-weight: 600;
}

.base-timer {
  position: relative;
  height: var(--timer-size);
  width: var(--timer-size);
}

/* Timer Circle */
/* Removes SVG styling that would hide the time label */
.base-timer__circle {
  fill: none;
  stroke: none;
}

/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
  stroke-width: var(--stroke);
  stroke: var(--tertiary-color);
}

.base-timer__label {
  position: absolute;

  /* Size should match the parent container */
  width: var(--timer-size);
  height: var(--timer-size);

  /* Keep the label aligned to the top */
  top: 0;

  /* Create a flexible box that centers content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Sort of an arbitrary number; adjust to your liking */
  font-size: 80px;
  font-weight: 600;
  color: var(--text);
}

.base-timer__path-remaining {
  /* Just as thick as the original ring */
  stroke-width: var(--stroke);

  /* Rounds the line endings to create a seamless circle */
  stroke-linecap: round;

  /* Makes sure the animation starts at the top of the circle */
  /* transform: rotate(90deg);
  transform-origin: center; */

  /* One second aligns with the speed of the countdown timer */
  transition: linear 1s;

  /* Allows the ring to change color when the color value updates */
  stroke: var(--text);
}

.base-timer__svg {
  /* Flips the svg and makes the animation to move left-to-right */
  transform: scaleX(-1);
}

.timer-botoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
}

.timer-botoes span {
  cursor: pointer;
}

.start-pause {
  display: table-cell;
  --height-start: 70px;
  width: 280px;
  height: var(--height-start);
  line-height: var(--height-start);
  background-color: var(--text);
  color: var(--tertiary-color);
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  border-radius: 30px;

  transition: ease-in-out 100ms;
}

.start-pause:hover {
  background-color: var(--text-hover);
}

.material-icons.timer-icon {
  font-size: 60px;
  transition: ease-in-out 100ms;
}

.menu-title {
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  font-size: 33px;
}

.config {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

.config-botoes {
  display: flex;
  gap: 15px;
  padding: 30px 0;
}

.config-botoes span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.config-botoes label {
  display: flex;
  align-items: center;
  justify-content: center;

  /* background-color: var(--select-color); */
  border-radius: 30px;

  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  font-size: 20px;
}

.config-botoes input {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  background-color: var(--tertiary-color);
  border-radius: 30px;
  border: none;
  width: 180px;
  height: 65px;

  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  font-size: 20px;
  text-align: center;

  transition: ease-in-out 200ms;
}

.config-botoes input:focus,
.config-botoes input:hover {
  background-color: var(--select-color);
}

.save {
  display: table-cell;
  --height: 70px;
  width: 280px;
  height: var(--height);
  line-height: var(--height);
  background-color: var(--text);
  color: var(--tertiary-color);
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-family: var(--font);

  transition: ease-in-out 100ms;
}

.save:hover {
  background-color: var(--text-hover);
}

.theme {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

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

.colors input {
  display: none;
}

.color-row {
  margin: 0 5px;
  display: flex;
  gap: 10px;
}

.swatch {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  border: rgba(0, 0, 0, 0.3) solid 2px;
  cursor: pointer;
  transition: ease-in-out 100ms;
}

.swatch:hover {
  border-color: rgba(0, 0, 0, 0.6);
}

.colors input:checked + label {
  border-color: var(--text);
}

#color1-swatch {
  background-color: var(--color1);
}

#color2-swatch {
  background-color: var(--color2);
}

#color3-swatch {
  background-color: var(--color3);
}

#color4-swatch {
  background-color: var(--color4);
}

#color5-swatch {
  background-color: var(--color5);
}

#color6-swatch {
  background-color: var(--color6);
}

.color1-theme {
  --base-color: #da2b2b;
  --secondary-color: #dd4040;
  --tertiary-color: #c12f2f;
  --select-color: #a01c1c;

  --text: rgba(255, 255, 255, 1);
  --text-hover: rgba(255, 255, 255, 0.6);
}

.color2-theme {
  --base-color: #3a7098;
  --secondary-color: #417eaa;
  --tertiary-color: #3c6480;
  --select-color: #264a64;

  --text: rgba(255, 255, 255, 1);
  --text-hover: rgba(255, 255, 255, 0.6);
}

.color3-theme {
  --base-color: #262627;
  --secondary-color: #323234;
  --tertiary-color: #1e1e1a;
  --select-color: #030303;

  --text: rgba(255, 255, 255, 1);
  --text-hover: rgba(255, 255, 255, 0.6);
}

.color4-theme {
  --base-color: #f2f2f2;
  --secondary-color: #ffffff;
  --tertiary-color: #e6eaea;
  --select-color: #cfcfcf;

  --text: rgba(0, 0, 0, 1);
  --text-hover: rgba(0, 0, 0, 0.8);
}

/* ebonatto.dev */
.color5-theme {
  --base-color: #160029;
  --secondary-color: #420679;
  --tertiary-color: #230042;
  --select-color: #28004c;

  --text: #f5ebff;
  --text-hover: #ba71fe;
}

/* nova geração */
.color6-theme {
  --base-color: rgba(0, 0, 0, 1);
  --secondary-color: #00e846;
  --tertiary-color: #09c842;
  --select-color: #008528;

  --text: rgba(0, 0, 0, 1);
  --text-hover: rgba(0, 0, 0, 0.8);
}

.color6-theme nav,
.color6-theme footer {
  --text: #00e846;
  --text-hover: #008528;
}

.nova-geracao {
  margin: 15px 0;
  width: 250px;
}

.footer {
  margin: 15px 0;

  font-family: var(--font);
  color: var(--text);
  font-weight: 400;
  font-size: 16px;
}

.footer a {
  color: var(--text);
  font-weight: 600;
  font-size: 20px;
}

.footer a:hover {
  color: var(--text-hover);
}

/* Remove arrows from numeric input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox
input[type="number"] {
  -moz-appearance: textfield;
} */

@media (max-width: 730px) {
  .nav {
    gap: 40px;
  }

  .menu-title {
    font-size: 26px;
  }

  .config-botoes {
    flex-direction: column;
    padding: 5px 0;
    gap: 10px;
  }

  .config-botoes span {
    gap: 5px;
  }

  .save {
    width: 220px;
  }

  .select-botoes {
    flex-direction: column;
    width: 100%;
    gap: 5px;
  }

  .select-botoes label {
    width: 100%;
    height: 50px;
  }

  .timer {
    --timer-size: 300px;
    --stroke: 4px;
  }

  .timer-botoes {
    gap: 10px;
  }

  .base-timer__label {
    font-size: 65px;
  }

  .start-pause {
    width: 220px;
  }

  .swatch {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 530px) {
  .title {
    font-size: 30px;
  }

  .nav {
    gap: 20px;
  }

  .material-icons.nav-button {
    font-size: 30px;
  }

  .menu-title {
    font-size: 26px;
  }

  .select-botoes label {
    width: 100%;
    height: 40px;
    font-size: 16px;
  }

  .timer {
    --timer-size: 250px;
  }

  .timer-botoes {
    gap: 5px;
  }

  .base-timer__label {
    font-size: 55px;
  }

  .start-pause {
    --height-start: 55px;
    width: 150px;
    font-size: 30px;
  }

  .material-icons.timer-icon {
    font-size: 40px;
  }

  .colors {
    flex-direction: column;
    gap: 10px;
  }

  .nova-geracao {
    width: 150px;
  }
}

.hidden {
  display: none;
}