style.css

.timer {
  display: flex;
  justify-content: center;
  font-family: "RecursoSansRegular";
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
}

.timer-body {
  min-width: 210px;
  min-height: 210px;
  background:#05E3EE;
  padding: 20px 25px;
  border-radius: 50%;
}

#hourglass {
  max-width: auto;
  max-height: 35px;
  padding-top: 10px;
  padding-left: 5px;
}

#timer-header {
  display: flex;
  justify-content: center;
  margin: 0;
  margin-bottom: -3px;
}

.timer-current {
  display: flex;
  justify-content: center;
  margin: 0;
  margin-bottom: -4px;
}

#current-time {
  padding: 2px;
  background-color: azure;
  margin-left: 4px;
  border-radius: 4%;
  font-family: "UnifontMedium";
  font-weight: normal;
  font-style: normal;
}

.timer-setting h3 {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;

}

.timer-input {
  display: flex;
  justify-content: center;
  margin-bottom: -3px;

}

#number {
  width: 100px;
  font-family: inherit;
}

#start-button, #reset-button {
  margin-left: 2px;
  font-family: inherit;
}

.color-button {
  font-family: inherit;
  display: flex;
  justify-content: center;
  margin: auto;
  padding-left: 1px;
  padding-right: 1px;  
}

.show-time {
  display: flex;
  justify-content: center;
}

#time-elapsed {
  padding: 2px;
  background-color: azure;
  margin-left: 1px;
  border-radius: 4%;
  font-family: "UnifontMedium";
  font-weight: normal;
  font-style: normal;
}