@import url('https://fonts.googleapis.com/css2?family=Boldonse&display=swap');

.boldonse-regular {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
    0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
    33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
    66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
    100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}

html, body {
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
  font-family: Verdana;
  text-align: center;
}

.contents {
  padding: 20px;
}

#temperature {
  font-size: 72px;
}

#weather-icon {
  width: 100px;
  height: 100px;
}