:root {
  color-scheme: light dark;
  --background-color-for-light: oklch(97.015% 0.00011 271.152);
  --background-color-for-dark: oklch(26.881% 0.02234 281.044);
  --text-color-for-light: oklch(32.109% 0.00004 271.152);
  --text-color-for-dark: oklch(85.071% 0.0033 15.608);
  --link-color-for-light: oklch(44.759% 0.09456 247.646);
  --link-color-for-dark: oklch(79.018% 0.07891 272.453);
  --input-text-color-for-light: oklch(100% 0.00011 271.152);
  --input-text-color-for-dark: oklch(54.187% 0.02021 282.177);
}

body {
  background-color: light-dark(var(--background-color-for-light), var(--background-color-for-dark));
  color: light-dark(var(--text-color-for-light), var(--text-color-for-dark));
  font: normal 10vw Cambria, Georgia, serif;
}

a {
  color: light-dark(var(--link-color-for-light), var(--link-color-for-dark));
}

input {
  background-color: light-dark(var(--input-color-for-light), var(--input-color-for-dark));
  color: light-dark(var(--input-text-color-for-light), var(--input-text-color-for-dark));
  font-size: 0.8em;
  margin-top: .3em;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding-bottom:1rem;
}

ol > li {
  padding: initial;
  margin: 1rem;
}

.weekday li {
  display: grid;
  grid-template-columns: 5vh 1fr;
  align-items: start;
  gap: 0.5rem;
}

.weekday input[type="checkbox"] {
  justify-self: center;
  transform: scale(2.5);
  margin-top: 1rem;
}

section img {
  height: auto;
  width: 100%;
}

.video-container {
  display: flex;
  justify-content: center;
}

.video-player {
  width: 600px;
  height: auto;
  border-radius: 20px;
}

.centered {
  text-align: center;
}

section h1 {
  background-image: url('images/glyph.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding-top: 50px;
}

section b {
  display: block;
}

@media screen and (min-width: 400px) {
  body {
    font-size: 3vw;
  }
}

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

@media (orientation: landscape) {
  .crank {
    display: flex;
    align-items: center;
    gap: 1rem;
    img {
      width: 50%;
      height: 90vh;
    }
  }
}

/* Turn cross-document view-transitions on */
/* Note that this at-rule is all that is needed to create the default cross-fade animation  */

@view-transition {
    navigation: auto;
}


/* Customize the default animation behavior */

::view-transition-group(root) {
    animation-duration: 0.5s;
}

/* Create a custom animation */

@keyframes move-out {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes move-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;

}

::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
}