/* ==========================================================================
Abstract
========================================================================== */
:root {
  --clr-white: hsl(0, 0%, 100%);
  --clr-black: hsl(0, 0%, 0%);
  --clr-blue-light: hsl(214, 100%, 71%);
  --clr-blue: rgb(5, 94, 209);
  --clr-grey-light: hsl(0, 0%, 96%);
  --clr-grey: hsl(0, 0%, 85%);
  --clr-navy: hsl(213, 45%, 24%);
  --ff-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --ff-poppins: "Poppins", var(--ff-system);
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fs-extra-small: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --fs-small: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --fs-regular: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --fs-semi-medium: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --fs-medium: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --fs-extra-medium: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --fs-semi-large: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --fs-large: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
  --fs-extra-large: clamp(4.8373rem, 3.9283rem + 4.5448vw, 7.4506rem);
  --clr-accent: var(--clr-black);
  --body-ff: var(--ff-poppins);
  --body-fw: var(--fw-regular);
  --body-fs: var(--fs-regular);
  --body-lh: 1.4;
  --body-bg: var(--clr-white);
  --body-clr: var(--clr-navy);
  --timetable-column-heading-fs: clamp(0.875rem, 0.5272rem + 1.7391vw, 1.875rem);
  --link-clr: var(--clr-black);
  --link-clr-hover: var(--clr-accent);
  --shadow-color: 214deg 100% 23%;
  --shadow-elevation-low:
      0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.34),
      0.6px 0.6px 1px -1.2px hsl(var(--shadow-color) / 0.34),
      1.5px 1.4px 2.3px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
      0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.36),
      1.2px 1.1px 1.8px -0.8px hsl(var(--shadow-color) / 0.36),
      3.1px 2.9px 4.8px -1.7px hsl(var(--shadow-color) / 0.36),
      7.6px 6.9px 11.5px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
      0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.34),
      2.2px 2px 3.3px -0.4px hsl(var(--shadow-color) / 0.34),
      4.1px 3.8px 6.3px -0.7px hsl(var(--shadow-color) / 0.34),
      6.8px 6.2px 10.4px -1.1px hsl(var(--shadow-color) / 0.34),
      10.8px 9.9px 16.5px -1.4px hsl(var(--shadow-color) / 0.34),
      17px 15.5px 25.9px -1.8px hsl(var(--shadow-color) / 0.34),
      25.8px 23.6px 39.3px -2.1px hsl(var(--shadow-color) / 0.34),
      38px 34.7px 57.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

/* ==========================================================================
Base
========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-ff);
  font-weight: var(--body-fw);
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  color: var(--body-clr);
  background-color: var(--body-bg);
  text-rendering: optimizeSpeed;
  min-height: 100vh;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

input {
  accent-color: var(--clr-accent);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: var(--link-clr);
}

a:hover {
  color: var(--link-clr-hover);
}

:target {
  scroll-padding-block-start: 2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
Components
========================================================================== */
.header {
  display: grid;
  place-content: center;
  height: 20rem;
}
.header__title {
  text-align: center;
  font-size: var(--fs-extra-large);
  font-weight: var(--fw-semi-bold);
}

.sea {
  position: relative;
  width: 100%;
  height: 15vh;
  min-height: 100px;
}
.sea__wave {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.sea__wave:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.sea__wave:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.sea__wave:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.sea__wave:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

.form__title {
  font-size: var(--fs-large);
  font-weight: var(--fw-medium);
}
.form__group {
  display: grid;
}
.form__input {
  border-radius: 6px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: var(--clr-white);
  box-shadow: var(--shadow-elevation-medium);
}
.form__input--textarea {
  display: block;
  resize: none;
  width: 100%;
  aspect-ratio: 100/50;
}
.form__input:empty:user-invalid {
  outline: 2px solid red;
}

.help__title {
  font-size: var(--fs-large);
  font-weight: var(--fw-medium);
}
.help__list {
  list-style-position: inside;
}
.help__list-item {
  margin-top: 1rem;
}
.help__list-item::marker {
  font-weight: var(--fw-bold);
  color: var(--clr-blue);
}

.demonstration {
  display: grid;
  place-content: center;
  height: 400px;
  overflow: hidden;
}

.button {
  --_btn-clr-bg: var(--clr-grey-light);
  --_btn-clr-txt: var(--clr-navy);
  --_btn-fw: var(--fw-semi-bold);
  display: block;
  position: relative;
  border: none;
  background: transparent;
  padding: 0px;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.button--delete {
  --_btn-clr-txt: var(--clr-white);
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.button--toggle {
  --_btn-clr-bg: var(--clr-blue);
  --_btn-clr-txt: var(--clr-white);
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.button__front {
  display: block;
  position: relative;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  font-weight: var(--_btn-fw);
  color: var(--_btn-clr-txt);
  background: var(--_btn-clr-bg);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.button__shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  background: hsla(0, 0%, 0%, 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.button__edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  background: linear-gradient(to left, color-mix(in srgb, hsl(0, 0%, 20%) 70%, var(--_btn-clr-bg) 30%) 0%, color-mix(in srgb, hsl(0, 0%, 30%) 70%, var(--_btn-clr-bg) 30%) 8%, color-mix(in srgb, hsl(0, 0%, 30%) 70%, var(--_btn-clr-bg) 30%) 92%, color-mix(in srgb, hsl(0, 0%, 20%) 70%, var(--_btn-clr-bg) 30%) 100%);
}
.button:hover {
  filter: brightness(110%);
}
.button:hover .button__front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.button:active .button__front {
  transform: translateY(-2px);
  transition: transform 34ms;
}
.button:hover .button__shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.button:active .button__shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}
.button:focus:not(:focus-visible) {
  outline: none;
}

.accordion {
  margin-top: 4rem;
  box-shadow: var(--shadow-elevation-medium);
  background: var(--clr-white);
  border-radius: 6px;
}
.accordion__panel {
  padding-inline: 2rem;
}
.accordion__panel:not(:first-child) {
  border-top: 1px solid var(--clr-grey);
}
.accordion__trigger {
  padding-block: 1.5rem;
  border: none;
  background-color: unset;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-items: start;
  align-items: center;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-weight: var(--fw-medium);
}
.accordion__trigger:hover {
  color: var(--clr-blue);
}
.accordion__trigger[aria-expanded=false] .accordion__arrow {
  filter: brightness(0);
}
.accordion__trigger[aria-expanded=true] .accordion__arrow {
  transform: rotate(180deg);
}
.accordion__arrow {
  transition: all 300ms ease-in-out;
  justify-self: end;
}
.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 350ms;
  color: var(--clr-navy);
}
.accordion__content[aria-hidden=false] {
  grid-template-rows: 1fr;
  padding-bottom: 1rem;
}
.accordion__content > div {
  overflow: hidden;
}

.timetable {
  --_row-count: 31;
  --_row-height: 75px;
  width: min(100%, 1920px);
  margin-inline: auto;
}
.timetable__controls {
  --max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  padding-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .timetable__controls {
    grid-template-columns: 1fr;
  }
}
.timetable__button-container {
  justify-content: center;
}
.timetable__body {
  display: grid;
  grid-template-columns: 150px repeat(5, 1fr);
}
@media only screen and (max-width: 992px) {
  .timetable__body {
    grid-template-columns: repeat(6, 1fr);
  }
}
.timetable__column {
  position: relative;
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--_row-count), var(--_row-height));
  padding-inline: 5px;
  background: repeating-linear-gradient(to bottom, white 0, white var(--_row-height), var(--clr-grey-light) var(--_row-height), var(--clr-grey-light) calc(var(--_row-height) * 2));
}
.timetable__column:not(:last-child) {
  border-right: 1px solid var(--clr-grey);
}
.timetable__column-heading {
  position: absolute;
  width: 100%;
  line-height: var(--_row-height);
  margin-top: calc(1ex - 1cap);
  text-align: center;
  font-size: var(--timetable-column-heading-fs);
  font-weight: var(--fw-bold);
  color: var(--clr-slate-dark);
}
@media only screen and (max-width: 992px) {
  .timetable__column-heading {
    color: transparent;
  }
  .timetable__column-heading::before {
    content: attr(data-short);
    display: block;
    color: var(--clr-navy);
  }
}
.timetable__row-time {
  text-align: center;
  font-size: var(--fs-regular);
}
.timetable__activity-container {
  display: contents;
}

.activity {
  grid-row: var(--_row-start, 1)/span var(--_row-span, -1);
  margin: 2.5%;
}
.activity:empty {
  display: none;
}
.activity--dropzone {
  background-color: color-mix(in srgb, var(--_clr-dropzone, rebeccapurple), gray 50%);
  border-radius: 6px;
}
.activity.activity--dropzone {
  display: block;
}

.card {
  --_card-active-scale: 1.05;
  display: block;
  color: white;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  font-size: var(--fs-regular);
  border-radius: 6px;
  word-break: break-all;
  background-color: var(--_clr-card, rebeccapurple);
}
.card:hover {
  cursor: grab;
}
.card:active {
  cursor: grabbing;
  scale: var(--_card-active-scale);
}
.card__article {
  height: 100%;
  overflow: hidden;
}
.card[drag-in-progress=false] {
  padding: 5%;
  height: 100%;
}
.card[drag-in-progress=true] {
  position: fixed;
  z-index: 9999;
  opacity: 0.9;
  scale: var(--_card-active-scale);
  pointer-events: none;
  top: var(--_top);
  left: var(--_left);
  height: var(--_height);
  width: var(--_width);
  padding: var(--_padding);
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-top: calc(1ex - 1cap);
}

/* ==========================================================================
Pages
========================================================================== */
.section-transition {
  width: 100vw;
}

.blue-section {
  background-color: var(--clr-blue);
  color: var(--clr-white);
  padding-block: 8rem;
}

/* ==========================================================================
Layout
========================================================================== */
.content-column {
  width: min(var(--max-width, 1400px), 100% - var(--gutter, 2rem) * 2);
  margin-inline: auto;
}

.even-columns {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.grid-auto-fit {
  display: grid;
  grid-gap: var(--gap, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 15ch)), 1fr));
}

.grid-auto-fill {
  display: grid;
  grid-gap: var(--gap, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 15ch)), 1fr));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flexbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1rem);
}

.flexbox-grid > * {
  flex: 1 1 var(--min, auto);
}

.stack {
  display: grid;
  grid-template-areas: "stack";
}

.stack > * {
  grid-area: stack;
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

/* ==========================================================================
Utility
========================================================================== */
.fs-extra-small {
  font-size: var(--fs-extra-small);
}

.fs-small {
  font-size: var(--fs-small);
}

.fs-regular {
  font-size: var(--fs-regular);
}

.fs-semi-medium {
  font-size: var(--fs-semi-medium);
}

.fs-medium {
  font-size: var(--fs-medium);
}

.fs-extra-medium {
  font-size: var(--fs-extra-medium);
}

.fs-semi-large {
  font-size: var(--fs-semi-large);
}

.fs-large {
  font-size: var(--fs-large);
}

.fs-extra-large {
  font-size: var(--fs-extra-large);
}

.fw-thin {
  font-weight: var(--fw-thin);
}

.fw-extra-light {
  font-weight: var(--fw-extra-light);
}

.fw-light {
  font-weight: var(--fw-light);
}

.fw-regular {
  font-weight: var(--fw-regular);
}

.fw-medium {
  font-weight: var(--fw-medium);
}

.fw-semi-bold {
  font-weight: var(--fw-semi-bold);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.fw-extra-bold {
  font-weight: var(--fw-extra-bold);
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

.ff-system {
  font-family: var(--ff-system);
}

.uppercase {
  text-transform: uppercase;
}

.order-first {
  order: -1;
}

.order-last {
  order: 999;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.square {
  aspect-ratio: 1;
}

.my-auto {
  margin-inline: auto;
}

.mx-auto {
  margin-block: auto;
}

.min-auto {
  --min: auto;
}/*# sourceMappingURL=style.css.map */