@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
  font-family: "Inter", "Arial", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* html, * body, * div, * span, * applet, * object, * iframe,
* h1, * h2, * h3, * h4, * h5, * h6, * p, * blockquote, * pre,
* a, * abbr, * acronym, * address, * big, * cite, * code,
* del, * dfn, * em, * img, * ins, * kbd, * q, * s, * samp,
* small, * strike, * strong, * sub, * sup, * tt, * var,
* b, * u, * i, * center,
* dl, * dt, * dd, * ol, * ul, * li,
* fieldset, * form, * label, * legend,
* table, * caption, * tbody, * tfoot, * thead, * tr, * th, * td,
* article, * aside, * canvas, * details, * embed,
* figure, * figcaption, * footer, * header, * hgroup,
* menu, * nav, * output, * ruby, * section, * summary,
* time, * mark, * audio, * video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  background: radial-gradient(circle, rgba(215, 0, 82, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #450920;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#options-area {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 42px;
}

#close-icon {
  display: none;
}

#alarm-icon, #close-icon {
  margin-right: 87px;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #alarm-icon, #close-icon {
    margin-right: 58px;
    margin-bottom: 80px;
    width: 25px;
  }
}
@media screen and (max-height: 720px) {
  #alarm-icon, #close-icon {
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 480px) {
  #alarm-icon, #close-icon {
    margin-right: 43px;
    margin-bottom: 300px;
    width: 25px;
  }
}

#alarm-icon:hover, #close-icon:hover {
  cursor: pointer;
}

#timer {
  height: 736px;
  width: 736px;
  border-radius: 50%;
  border: 5px solid #FFF;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 29px 29px 29px;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #timer {
    width: 490px;
    height: 490px;
    margin: 29px;
  }
}
@media screen and (max-height: 720px) {
  #timer {
    margin-top: 0;
  }
}
@media screen and (max-width: 480px) {
  #timer {
    width: 368px;
    height: 368px;
  }
}
@media screen and (max-width: 390px) {
  #timer {
    width: 275px;
    height: 275px;
  }
}
#timer #content-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#timer #time {
  color: #FFF;
  font-size: 128px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 68px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #timer #time {
    font-size: 85px;
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 480px) {
  #timer #time {
    font-size: 64px;
    margin-bottom: 34px;
  }
}
@media screen and (max-width: 390px) {
  #timer #time {
    font-size: 42px;
    margin-bottom: 17px;
  }
}
#timer #manage-time {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 68px;
  width: 202px;
  height: 83px;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #timer #manage-time {
    width: 134px;
    height: 55px;
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 480px) {
  #timer #manage-time {
    width: 101px;
    margin-bottom: 34px;
  }
}
@media screen and (max-width: 390px) {
  #timer #manage-time {
    width: 82px;
    margin-bottom: 23px;
  }
}
#timer #manage-time #reduce-time {
  margin-right: 36px;
  transition: 0.15s;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #timer #manage-time #reduce-time {
    margin-right: 24px;
  }
}
@media screen and (max-width: 480px) {
  #timer #manage-time #reduce-time {
    margin-right: 18px;
  }
}
#timer #manage-time #reduce-time:hover, #timer #manage-time #increase-time:hover {
  cursor: pointer;
}
#timer #manage-time #reduce-time:active, #timer #manage-time #increase-time:active {
  transform: scale(0.98);
}
#timer #start-stop-button {
  width: 150px;
  height: 49px;
  border-radius: 22px;
  border: 2px solid #FFF;
  background: transparent;
  color: #FFF;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 17px;
  transition: 0.15s;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #timer #start-stop-button {
    width: 100px;
    height: 32px;
    font-size: 16px;
    margin-bottom: 12px;
    border: 2px solid #FFF;
  }
}
#timer #start-stop-button:hover {
  background-color: white;
  color: #450920;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
#timer #start-stop-button:active {
  transform: scale(0.98);
}
#timer #cancel-reset-button {
  display: inline-block;
  color: white;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 9px;
}
@media screen and (max-width: 820px), (max-height: 840px) {
  #timer #cancel-reset-button {
    font-size: 12px;
    margin-bottom: 5px;
  }
}
#timer #cancel-reset-button:hover {
  cursor: pointer;
  text-decoration: underline;
  transition: 0.15s;
}
#timer #cancel-reset-button:active {
  transform: scale(0.97);
}/*# sourceMappingURL=timer.css.map */