html { box-sizing: border-box; margin: 0; }
*, *::before, *::after { box-sizing: inherit; margin: 0; }
:root {
  --yl-gradient: linear-gradient(to right, #6dd4e6, #c6e4b7);
}
html { scroll-behavior: smooth; }
.yl-gradient {
  background-image: var(--yl-gradient);
}
.spectral-regular { font-family: "Spectral", serif; font-weight: 400; font-style: normal;}
h1,
h2,
h3,
h4,
h5,
h6 { margin-block: 0.5rem; }
h1,
h2,
h3,
.bellota-regular { font-family: "Bellota", system-ui; font-weight: 400; font-style: normal; }
h1 { text-align: center; }
#timetable { overflow: auto; text-align: center; }
#timetable table { border-collapse: collapse; table-layout: fixed; width: 800px; margin-bottom: 0.5rem; }
@media (min-width: 1024px) {
   #timetable table { margin-left: auto; margin-right: auto; width: 1000px; }
}
#timetable th,
#timetable td { padding: 0.6rem 0.4rem; }
#timetable .hour { display: none; }
#timetable button { margin-top: 0.5rem; }
@media (hover: hover) {
  #timetable tbody tr:hover { background-color: gainsboro; }
  #timetable tbody td:not(.empty-hour):hover { background-image: var(--yl-gradient); }
}
@media (min-width: 1024px) {
  #timetable .hour { display: table-cell; }
}

p { margin-block: 1rem; }
li + li { margin-top: 0.5rem; }
.gap1 { gap: 1rem; }

[popover] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: auto; max-height: 400px; max-width: 80%; padding: 20px; width: 100%; }
@media (min-width: 60em) {
  [popover] {
    width: fit-content;
  }
}
[popover]::backdrop { background-color: #00000075; }

@media (min-width: 30em) {
  .sticky-ns { position: sticky; }
}