@font-face {
  font-family: "Monu";
  src: url("assets/rm.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg-sky: #22aeff;
  --text-navy: #1a2b48;
  --link-lime: #ffff00;
  --link-hover: #0000ee;
  --focus-ring: #fff8;
  --page-pad: 30px;
  --font-sans: "Monu", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --text-size: 54px;
  --line-height: 60px;
  --paragraph-gap: 20px;
  --link-gap: 4px;
  --actions-margin-bottom: 30px;
  --hero-cycle-duration: 4s;
  --hero-size: 300px;
}

@media (max-width: 768px) {
  :root {
    --page-pad: 15px;
    --text-size: 24px;
    --line-height: 30px;
    --paragraph-gap: 14px;
    --actions-margin-bottom: 18px;
    --hero-size: 180px;
    --site-title-size: 32px;
    --site-title-line-height: 34px;
  }
}

@keyframes hero-cut {
  0%,
  33.3% {
    opacity: 1;
  }

  33.31%,
  100% {
    opacity: 0;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

::selection,
::-moz-selection {
  background-color: var(--link-lime);
  color: var(--link-hover);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-size);
  line-height: var(--line-height);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-navy);
  background-color: var(--bg-sky);
}

.page {
  padding: var(--page-pad);
}

.hero-slideshow {
  position: relative;
  width: var(--hero-size);
  height: var(--hero-size);
  margin: 0 4px var(--paragraph-gap);
}

.hero-slideshow .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-cut var(--hero-cycle-duration) infinite linear;
}

.hero-slideshow .hero-photo:nth-child(2) {
  animation-delay: calc(var(--hero-cycle-duration) / 3);
}

.hero-slideshow .hero-photo:nth-child(3) {
  animation-delay: calc(var(--hero-cycle-duration) * 2 / 3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .hero-photo {
    animation: none;
  }

  .hero-slideshow .hero-photo:first-child {
    opacity: 1;
  }
}

.site-title {
  margin: 0 3px var(--paragraph-gap);
  font: inherit;
}

.site-title span {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.05em 0.1em 0;
  background-color: var(--link-lime);
  color: var(--text-navy);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.site-title span:not(:last-child) {
  margin-bottom: 5px;
}

.actions {
  margin: 0 0 var(--actions-margin-bottom);
}

.actions p {
  margin: 0;
}

.actions-label {
  margin-top: 10px;
  margin-bottom: var(--link-gap);
  color: var(--link-lime);
}

.actions a {
  display: block;
  margin-right: 0;
  margin-bottom: var(--link-gap);
  color: var(--link-lime);
  text-decoration: none;
}

.actions .link-text {
  text-decoration: underline;
}

.actions a:last-child {
  margin-right: 0;
}

.actions a:hover,
.actions a:focus-visible {
  color: var(--link-hover);
}

.actions a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.prose p {
  margin: 0 0 var(--paragraph-gap);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose a {
  color: var(--link-lime);
  text-decoration: underline;
}

.prose a:hover,
.prose a:focus-visible {
  color: var(--link-hover);
}


.prose ul {
  margin-top: calc(var(--paragraph-gap) * 0.4);
  margin-bottom: var(--paragraph-gap);
}

.prose li {
  margin-bottom: calc(var(--paragraph-gap) * 0.5);
}

.prose li:last-child {
  margin-bottom: 0;
}

.highlight {
  color: var(--link-lime);
}

@media (min-width: 769px) {
  :root {
    --text-size: 38px;
    --line-height: 42px;
    --paragraph-gap: 14px;
    --actions-margin-bottom: 21px;
  }

  .page {
    max-width: 1100px;
  }
}

@media (max-width: 768px) {
  .site-title {
    font-size: var(--site-title-size);
    line-height: var(--site-title-line-height);
  }

  .site-title span:not(:last-child) {
    margin-bottom: 6px;
  }
}