body {  
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(255, 127, 39);
  color: white;
}

main {
  margin-right: 5%;
}

h1 {
  margin-bottom: 25px;
}

h2 {
  margin: 45px 0;
}

input {
  width: 60px;
  text-align: center;
}

button {  
  border-radius: 4px;
  border: none;
  color: white;
  text-align: center;
  font-size: 23px;
  padding: 12px;
  width: 100%;
  cursor: pointer;
  font-weight: 700;
}

#set_new_total {
  padding: 5px;
  max-width: 80px;
  font-size: 17px;
  background: rgb(0, 98, 255);
  margin-left: 4px;
}

#set_new_total:hover {
  background: rgb(60, 135, 255);
}

#chronology_button {
  margin: 15px 0;
  background: darkblue;
}

#chronology_button:hover {
  background: blue;
}

#reset {
  margin: 15px 0 5px 0;
  background: darkgreen;
}

#reset:hover {
  background: green;
}

#close {
  margin: 15px 0;
  background: darkred;
  margin-top: 5%;
}

#close:hover {
  background: red;
}

.inactive {
  opacity: 0.7;
}

/* Notification switch */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 17px;
  top: 6px;
  margin-left: 4px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  border-radius: 17px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: rgb(0, 98, 255);
}

input:focus + .slider {
  box-shadow: 0 0 1px rgb(0, 98, 255);
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

#reset_message {
  max-width: 350px;
  margin: 0;
  font-size: medium;
  font-weight: 600;
}

#sound_setter {
  display: flex;
}

#sound_volume_container {
  margin-left: 20px;
  visibility: hidden;
}

#sound_volume_slider {
  /* -webkit-appearance: none; */
  /* margin-left: 8px; */
  width: 100px;
  height: 5px;
  cursor: pointer;
  background: rgb(0, 98, 255);
  /* background: gray;
  outline: none;
  border-radius: 4px;
  opacity: 0.7; */
}

#sound_volume_slider:hover {
  background: rgb(60, 135, 255);
}

#sound_volume_slider::-webkit-slider-thumb {
  /* -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 5px;
  background: lightgray;
  border: 1px solid gray; */
}

#sound_volume_label {
  font-size: medium;
}