@media (max-aspect-ratio: 16/9) {
  .time {
    font-size: 22vh
  }
}

html,
body {
  height: 100%;
  margin: 0;
  background: #000 url('./lightning.png') no-repeat center center fixed;
  background-size: cover;
  font-family: system-ui, Roboto, Arial, sans-serif;
  overflow: hidden;
  color: #ddd
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2vh 2vw;
  box-sizing: border-box;
  transition: transform 1s ease
}

.date {
  font-size: 6vw;
  color: #A8C7FF;
  opacity: .95;
  margin-bottom: .4em;
  text-shadow: 0 0 20px rgba(0, 0, 0, .9);
  white-space: nowrap
}

.time-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center
}

.time {
  font-weight: 700;
  line-height: .9;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 0 40px rgba(0, 0, 0, .8);
  font-size: 28vw;
  text-align: center
}

.right-stack {
  position: relative;
  margin-left: .4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%
}

.ampm,
.seconds {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1
}

.ampm {
  top: 2%
}

.seconds {
  bottom: -5%
}

.weather {
  margin-top: .45em;
  font-size: 5vw;
  color: #FFD580;
  text-shadow: 0 0 25px rgba(0, 0, 0, .8);
  white-space: nowrap
}

.forecast {
  margin-top: .3em;
  font-size: 3.5vw;
  color: #B0FFB0;
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
  text-shadow: 0 0 15px rgba(0, 0, 0, .8)
}

.wi {
  margin-right: .2em
}