html {
  height: 100%;
  width: 100%;
}

body {
  text-align: center;
  background-color: lightgray;
  transition: background-color 0.3s;
  color: black
}

form{
  text-align: centre;
}
/* Add the following styles to center the form and result div */
#weatherForm {
  text-align: center;
}

#result {
  text-align: center;
}


/* formats the button so it doesnt look like a button */

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

button:focus,
button:active {
  outline: none;
  box-shadow: none;
}

.cloud-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body:has(.switch input:checked) {
  background-color: rgb(54, 54, 54);
  color: rgb(255, 252, 252)
}

/* hide the real checkbox */
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* track */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 27px;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6c6c6c;
  border-radius: 34px;
  transition: background-color 0.3s;
}

/* knob + icon */
.slider::before {
  content: 'brightness_4';
  font-family: 'Material Icons';
  font-size: 20px;
  position: absolute;
  width: 21px;
  height: 21px;
  left: 3px;
  top: 3px;
  background-color: lightgray;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, content 0.3s;
}

/* checked state */
.switch input:checked + .slider {
  background-color: rgb(185, 185, 185);
}
.switch input:checked + .slider::before {
  transform: translateX(18px);
  content: 'brightness_5';
  color: black
}