:root {
  --primary-color: #1c7bb7;
  --on-primary-color: #ffffff;

  --background-color: #90c0de;
}

html, body {
  height: 100%;
  background-color: var(--background-color);
  overflow: hidden;
  font-family: Arial, sans-serif;
}

@media screen and (orientation: portrait) {
  html {
    font-size: 2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

time {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: -110px 0 0 0;
  height: 220px;
  text-align: center;
  color: var(--primary-color);
  font-size: 260px;
  line-height: 227px;
  font-weight: bold;
}

.corner {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

/* Panel button */
#toggle-panel-button {
  position: absolute;
  bottom: 0;
  right: 0;

  font-size: 1rem;
  height: 5em;
  aspect-ratio: 1;
  background-color: var(--primary-color);
  fill: var(--on-primary-color);
  cursor: pointer;
  border: 0.75em solid var(--primary-color);
  border-radius: 50%;

  transition: background-color 0.25s;
  
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover,
  &:focus-visible {
    background-color: var(--on-primary-color);
    fill: var(--primary-color);
    outline: none;
  }

  &:active,
  &:has(+[open]) {
    cursor: default;
    background-color: var(--primary-color) !important;
    fill: var(--on-primary-color) !important;
  }
}

/* Panel */
dialog {
  height: fit-content;
  border: none;
  outline: none;
  border-radius: 3rem;
}

.calendar-panel {
  position: relative;

  color: var(--on-primary-color);
  background-color: var(--primary-color);

  padding: 2em 2.5em;
  font-size: 2em;
}

.calendar-panel h3 {
  color: hsl(0, 0%, 100%);
  font-size: 1.5em;
  font-weight: bold;
  margin-block: 0.1em 0.5em;
}

.calendars a {
  color: var(--on-primary-color);
  display: block;
  line-height: 1.75em;
  outline: none;
  text-decoration: none;
  text-align: center;

  &:hover,
  &:focus-visible {
    color: var(--background-color);
    text-decoration: underline;
  }
}