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

body {
  font-family: "Outfit", sans-serif;
}

main {
  background-color: #00171f;
  color: white;
  height: 100vh;
}

.wrap {
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.btn-wrap {
  display: flex;

  justify-content: center;
}

/* TIMER  */
#timer {
  margin-bottom: 3em;
}

#timer-label {
  font-size: 5rem;
}

#time-left {
  font-size: 5rem;
}

.rest-wrap {
    font-size: 5rem;
}

#special-cha {
  font-weight: 600;
  letter-spacing: 13px;
  color: #00a7e1;
}

/* BUTTONS  */
#start-btn {
  background: #003459;
  border: 2px solid white;
  color: white;

  font-size: 1.5rem;
  padding: 0.75em 1em;
  border-radius: 100px;

  margin-right: 2em;

  cursor: pointer;

  transition: 0.3s;
}

#pause-btn {
  background: transparent;
  border: 2px solid #00a7e1;
  color: white;

  font-size: 1.5rem;
  padding: 0.75em 1em;
  border-radius: 100px;

  cursor: pointer;

  transition: 0.3s;
}

#resume-btn {
  background: transparent;
  border: 2px solid #ff7f11;
  color: white;

  font-size: 1.5rem;
  padding: 0.75em 1em;
  border-radius: 100px;

  cursor: pointer;

  transition: 0.3s;
}

#start-btn:hover {
  border: 2px solid #ff7f11;
}

#pause-btn:hover {
  background: #003459;
}

#resume-btn:hover {
  color: #00a7e1;
}

/* SET  */
#set {
  font-size: 2.75rem;
}

/* INPUTS  */
#timer-form {
  margin-top: 3em;

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

#set-time-input {
  width: 12rem;
  height: 12rem;

  font-size: 3rem;

  text-align: center;

  border-radius: 50%;
  border: 2px solid #ff7f11;

  margin-right: 1em;
}

#rest-time-input {
  width: 12rem;
  height: 12rem;

  font-size: 3rem;

  text-align: center;

  border-radius: 50%;
  border: 2px solid #ff7f11;
}

#set-time-input::placeholder {
  font-family: "Outfit", sans-serif;
  font-size: 2.75rem;
  color: #00171fc8;
}

#rest-time-input::placeholder {
  font-family: "Outfit", sans-serif;
  font-size: 2.75rem;
  color: #00171fc8
}

.submit-wrap {
    margin: 3em 0;
}

#submit-btn {
    padding: .75em 1em;
    font-size: 1.75rem;

    font-family: 'Outfit', sans-serif;

    background: #003459;
    color: white;

    border: none;

    cursor: pointer;
}

#submit-btn:hover {
    background: #0034599d;
}

/* VOLUME */
.vol-mute-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

#mute-icon {
  margin-right: .5em;
  display: none;

  cursor: pointer;
}

#volume-icon {
  margin-right: .5em;

  cursor: pointer;
}


/* HIDDEN STUFF  */
#desktop-vol {
    display: none;
}

#headset-vol {
    display: none;
}

/* COLORS  */
.rest {
  color: red;
}

.set {
  color: lightgreen;
}

/* FONTS  */
.spread {
  font-weight: 600;
  letter-spacing: 13px;
  text-transform: uppercase;
}