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

html {
  font-size: 62.5%;
  font-family: 'Arial Rounded MT Bold', sans-serif;
}

body {
  box-sizing: border-box;
  font-size: 1.6rem;
  background: #1b1d21;
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.pomodoro {
  border: 0.5px solid #555a61a9;
  background: #25282e;
  display: flex;
  flex-direction: column;
  border-radius: 1.7rem;
  width: 41rem;
  height: 59rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

header {
  display: flex;
  margin-left: 1rem;
  margin-top: 4.5rem;
}

header img {
  margin-bottom: 2rem;
  margin-right: 1.3rem;
}

.header h1 {
  margin-top: 0.8rem;
  margin-right: 3.5rem;
  color: #a4a6aa;
  font-size: 3.7rem;
}

.info-display {
  margin-top: 2.7rem;
  font-size: 1.6rem;
  padding-left: 3rem;
  padding-right: 3rem;
  height: 2rem;
  color: #a4a6aa;
  text-align: center;
}

.clock-face {
  margin-top: 1.8rem;
  color: tomato;
  font-size: 12rem;
}

.time-bar-container {
  display: flex;
  width: 83%;
}

.time-bar {
  align-self: flex-start;
  border-radius: 1rem;
  height: 0.5rem;
  width: 100%;
  background-color: rgb(157, 207, 83);
}

button:not(.settings, .close-menu, .apply-settings) {
  margin-top: 4.3rem;
  color: #25282e;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  font-size: 2rem;
  min-height: 8rem;
  min-width: 8rem;
  height: 8rem;
  width: 8rem;
  border-radius: 50%;
  border: none;
  background: rgb(157, 207, 83);
  cursor: default;
}

button:active:not(.settings, .close-menu, .apply-settings) {
  min-height: initial;
  min-width: initial;
  width: 7.9rem;
  height: 7.9rem;
  font-size: 1.95rem;
  margin-bottom: 0.1rem;
}

button:disabled:not(.settings, .close-menu, .apply-settings) {
  pointer-events: none;
}

.line {
  position: absolute;
  background-color: rgb(120, 189, 189);
  width: 40.8rem;
  z-index: 1;
  height: 1.5rem;
  margin-top: 0.3px;
  border-radius: 100rem 100rem 0px 0px;
  background: linear-gradient(to right, #f87571, #9198e5);
}

@media screen and (max-width:420px) {
  .line {
    position: absolute;
    background-color: rgb(120, 189, 189);
    width: 99%;
    height: 1.5rem;
    margin-top: 0.3px;
    border-radius: 100rem 100rem 0px 0px;
    background: linear-gradient(to right, #e66465, #9198e5);
  }
}

#sparkles {
  height: 2rem;
  position: absolute;
  margin-left: 0.5rem;
}

#try-again {
  display: none;
  font-size: 1.89rem;
  background: #a4a6aa;
}

#close {
  display: none;
  font-size: 3.7rem;
  padding-bottom: 0.5rem;
  background: #a4a6aa;
}

.game-score {
  margin-top: 4.5rem;
  color: #a4a6aa;
  margin-left: 4rem;
  display: flex;
  align-self: flex-start;
}

.score-tomato {
  width: 1.6rem;
  margin-right: 0.6rem;
}

.array-tomato {
  width: 2rem;
  height: 2rem;
  margin: 0.1rem;
}

.total-score {
  align-items: center;
  justify-content: center;
  display: flex;
  width: 9rem;
  font-size: 1.5rem;
  margin-bottom: 1.9rem;
}

.pomodoro-array {
  margin-left: 1.2rem;
  width: 12rem;
  font-size: 2rem;
}

.settings {
  background-color: transparent;
  background: none;
  border: none;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  font-size: 1.6rem;
  color: #a4a6aa;
  height: 2rem;
  margin-top: 6.3rem;
  margin-left: 4.7rem;
}

.settings-menu {
  padding: 0.3rem;
  position: absolute;
  margin-top: 7.7rem;
  width: 40rem;
  height: 47rem;
  z-index: 100;
  border: #555a61a9 solid 0.5px;
  background-color: #2a2d34;
  border-radius: 1.7rem;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.close-menu {
  margin-top: 0.9rem;
  border: 0.1rem solid #a4a6aa;
  border-radius: 50%;
  background: none;
  font-size: 1.6rem;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  color: #a4a6aa;
  right: 3%;
  width: 2.3rem;
  height: 2.3rem;
  position: absolute;
  line-height: 0;
  padding-bottom: 0.19rem;
}

.apply-settings {
  margin-top: 2.5rem;
  margin-bottom: 1.4rem;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  color: #25282e;
  font-size: 1.6rem;
  border-radius: 0.6rem;
  width: 6rem;
  border: none;
  background: #a4a6aa;
  height: 3.3rem;
  padding-bottom: 0.3rem;
}

.timers, .number-input-form {
  font-family: 'Arial Rounded MT Bold', sans-serif;
  color: #a4a6aa;
  display: flex;
  flex-direction: row;
  margin-top: 2.6rem;
  align-items: center;
  justify-content: center;
}

.timer-label, .number-input-label {
  font-size: 1.4rem;
  align-self: center;
}

.timer-input {
  display: flex;
}

.timer-input p {
  font-size: 2.4rem;
  margin-top: 0.7rem;
  color: #a4a6aa;
}

.time-input, .number-input {
  margin-top: 0.5rem;
  padding-left: 0.6rem;
  width: 4.5rem;
  height: 3.6rem;
  font-size: 3rem;
  background: none;
  border: none;
  color: rgb(157, 207, 83);
  outline: none;
}

.time-input::placeholder, .number-input::placeholder {
  color: rgb(157, 207, 83);
  font-size: 3rem;
}

.input-time {
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

.number-input-form {
  margin-top: 1.5rem;
}

.number-input {
  width: 5rem;
  text-align: center;
  padding-right: 1rem;
}

.number-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.number-input-container:nth-child(1) {
  margin-right: 3rem;
}

.number-input-container:nth-child(2) {
  margin-left: 3rem;
}

.alarm-volume, .final-alarm-volume, .effects-volume {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.volume-range-label {
  margin-bottom: 1.1rem;
  font-size: 1.4rem;
  color: #a4a6aa;
}

.volume-range {
appearance: none;
 width: 200%;
 background: #a4a6aa;
 height: 0.3rem;
 border-radius: 1rem;
 border: none;
 outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 1rem;
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 1rem;
  background: rgb(157, 207, 83);
  border: none;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-border-radius: 1rem;
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 1rem;
  background: rgb(157, 207, 83);
  border: none;
}

.alarm-menus {
  display: flex;
  margin-top: 2.3rem;
}

.alarm-menu, .final-alarm-menu, .button-click-menu {
  display: flex;
  flex-direction: column;
}

.alarm-label, .button-label {
  margin-bottom: 0.7rem;
  text-align: center;
  font-size: 1.4rem;
  color: #a4a6aa;
}

.alarm-menu label {
  margin-right: 0.4rem;
}

.final-alarm-menu label {
   margin-left: 3rem;
}

.button-click-menu label {
  margin-left: 3rem;
}

#alarm-menu {
  width: 9rem;
}

#final-alarm-menu {
  margin-left: 3rem;
  width: 9rem;
}

#button-click-menu {
  margin-left: 3rem;
  width: 9rem;
}

#alarm-menu, #final-alarm-menu, #button-click-menu {
  background: none;
  border: none;
  outline: none;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  color: rgb(157, 207, 83);
  text-align: center;
}

.link {
  text-decoration: none;
  color: #a4a6aa;
  position: absolute;
  bottom: 7.3%;
  right: 25%;
}

@media screen and (max-width:420px) {
  .pomodoro {
    width: 99.5%;
    height: 99.5%;
  }

  .game-score {
    margin-left: 9%;
  }

  .settings {
    position: absolute;
    right: 7%;
    bottom: 3%;
  }

  .settings-menu {
    margin-top: 20vh;
    width: 95%;
    height: 46.6rem;
  }

  .close-menu {
    margin-top: 0.4rem;
    right: 0.8rem;
  }

  .apply-settings {
    margin-top: 2.4rem !important; 
  }

  button:not(.settings, .close-menu) {
    margin-top: 17%;
  }

  .game-score {
    margin-top: 21%;
  }

  .total-score {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    align-items:initial;
    justify-content: initial;
  }

  .score-tomato {
    margin-bottom: auto;
  }

  .pomodoro-array {
    margin-left: -0.5rem;
  }
}

@media screen and (max-width: 420px) and (max-height: 920px){
  .header {
    margin-top: 23%;
  }

  .info-display {
    margin-top: 16%;
    font-size: 2rem;
  }

  .header h1 {
    font-size: 4rem;
  }

  .clock-face {
    font-size: 13rem;
    margin-top: 16%;
  }

  .time-bar-container {
    width: 85%;
  }

  button:not(.settings, .close-menu, .apply-settings) {
    margin-top: 17%;
  }
}

@media screen and (max-width: 390px) and (max-height: 850px){
  .header {
    margin-top: 20%;
  }

  .clock-face {
    font-size: 12.5rem;
    margin-top: 16%;
  }
}

@media screen and (max-width: 420px) and (max-height: 900px){
  .header {
    margin-top: 18%;
  }

  .clock-face {
    font-size: 14rem;
    margin-top: 16%;
  }

  .info-display {
    margin-top: 18%;
  }

  .header h1 {
    font-size: 4rem;
  }

  .clock-face {
    font-size: 13rem;
    margin-top: 17%;
  }

  .game-score {
    margin-top: 24%;
  }
}

@media screen and (max-width: 420px) and (max-height: 900px){
  .header {
    margin-top: 18%;
  }

  .clock-face {
    font-size: 14rem;
    margin-top: 16%;
  }

  .info-display {
    margin-top: 18%;
  }

  .header h1 {
    font-size: 4rem;
  }

  .clock-face {
    font-size: 13rem;
    margin-top: 17%;
  }

  .game-score {
    margin-top: 24%;
  }
}

@media screen and (max-width: 420px) and (max-height: 740px){
  .header {
    margin-top: 14%;
  }

  .info-display {
    margin-top: 10%;
    font-size: 1.7rem;
  }

  .clock-face {
    font-size: 13.2rem;
    margin-top: 9%;
  }

  button {
    margin-top: 19%;
  }

  .game-score {
    margin-top: 18%;
  }
}

@media screen and (max-width: 370px) and (max-height: 750px){
  .header {
    margin-top: 18%;
  }

  .info-display {
    margin-top: 13%;
    font-size: 1.7rem;
  }

  .clock-face {
    font-size: 12rem;
    margin-top: 10%;
  }

  button {
    margin-top: 22%;
  }

  .game-score {
    margin-top: 20%;
  }
}

@media screen and (max-width: 375px) and (max-height: 670px){
  .header {
    margin-top: 12%;
  }

  .info-display {
    margin-top: 10%;
    font-size: 1.7rem;
  }

  .clock-face {
    font-size: 11.9rem;
    margin-top: 9%;
  }

  button {
    margin-top: 17%;
  }

  .game-score {
    margin-top: 14%;
  }
}

@media screen and (max-width: 320px) and (max-height: 660px){
  .header {
    margin-top: 15%;
    margin-left: 1rem;
  }

  .header h1 {
    font-size: 3.5rem;
  }

  .info-display {
    margin-top: 15%;
    font-size: 1.7rem;
  }

  .clock-face {
    font-size: 11rem;
    margin-top: 12%;
  }

  button {
    margin-top: 23%;
  }

  .game-score {
    margin-top: 17%;
  }

  .time-input {
    width: 4rem;
    font-size: 2.7rem;
  }

  .input-time {
    margin: 0.5rem;
  }

  .timers {
    margin-top: 3rem;
  }

  #alarm-menu {
    width: 8rem;
  }
  
  #final-alarm-menu {
    margin-left: 1rem;
    width: 8rem;
  }
  
  #button-click-menu {
    margin-left: 1rem;
    width: 8.5rem;
  }

  .alarm-menu label {
    margin-right: 0.4rem;
  }
  
  .final-alarm-menu label {
     margin-left: 1rem;
  }
  
  .button-click-menu label {
    margin-left: 1rem;
  }
}