@import url('https://fonts.googleapis.com/css2?family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

.libertinus-serif-regular {
  font-family: "Libertinus Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.libertinus-serif-semibold {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
  font-style: normal;
}

.libertinus-serif-bold {
  font-family: "Libertinus Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.libertinus-serif-regular-italic {
  font-family: "Libertinus Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.libertinus-serif-semibold-italic {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
  font-style: italic;
}

.libertinus-serif-bold-italic {
  font-family: "Libertinus Serif", serif;
  font-weight: 700;
  font-style: italic;
}

:root {
    --measure: 64ch;

    --s-2: clamp(0.4297rem, 0.4102rem + 0.0868vw, 0.4775rem);
    --s-1: clamp(0.6953rem, 0.6637rem + 0.1405vw, 0.7726rem);
    --s0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --s1: clamp(1.8203rem, 1.7375rem + 0.3677vw, 2.0225rem);
    --s2: clamp(2.9452rem, 2.8113rem + 0.595vw, 3.2724rem);
    --s3: clamp(4.7653rem, 4.5487rem + 0.9627vw, 5.2948rem);
    --s4: clamp(7.7102rem, 7.3598rem + 1.5576vw, 8.5669rem);
    --s5: clamp(12.4751rem, 11.9081rem + 2.5202vw, 13.8613rem);

    font-family: "Libertinus Serif", serif;
}

/*
 * Perform a basic CSS reset.
 */
* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    font-size: var(--s0);
}

ol, ul {
    list-style: none;
}

/*
 * Layout for the body. This is an aesthetic choice, and admittedly a bit of an
 * unusual one. In particular, I fix the height of the body to the viewport,
 * allowing the content to overflow if there is not enough space. From the
 * user's point of view, this looks like the website has an absolutely positioned
 * footer.
 */
body {
    display: flex;
    flex-direction: column;
    block-size: 100dvh;
}

/*
 * This ensures that all of the free space in the body flexbox is taken up by
 * the content, with the header and footer only being as large as required.
 */
main {
    flex-grow: 999;
}

/*
 * Reusable layout primitives.
 */

/*
 * A stack contains multiple children in a column with whitespace between them.
 */
.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack > * + * {
    margin-block-start: var(--s1);
}

/*
 * A box is simply uniformly padded on all sides.
 */
.box {
    padding: var(--s1);
}

/*
 * A center has a maximum width, and uses horizontal margins to center content.
 */
.center {
    box-sizing: content-box;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline-start: var(--s1);
    padding-inline-end: var(--s1);
}

/*
 * A cluster contains children with a minimum gap between them, wrapping if the
 * viewport is too narrow to maintain the minimum gap.
 */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

/*
 * A sidebar has two children with a gutter between them. When the viewport is
 * sufficiently wide, the first child has some prescribed constant width, and
 * the width of the second child varies. As the viewport narrows, the second
 * child narrows until a threshold, at which point the layout switches to a
 * stacking layout.
 */
.sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.sidebar > :first-child {
    flex-basis: content;
    flex-grow: 1;
}

.sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.justify-content\:space-between {
    justify-content: space-between;
}

.align-items\:center {
    align-items: center;
}

.flex-grow\:999 {
    flex-grow: 999;
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  height: 31px;
}

.marquee:hover > * {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .marquee > * {
	animation-play-state: paused;
    }
}

.marquee-content {
  display: flex;
  animation: scroll 30s linear infinite;
}

main {
    overflow: scroll;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}



body {
    background-color: #000000;
    color: #ffffff;
}

main a {
    color: #ffffff;
}

main a:hover {
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
}

main abbr {
    text-decoration: none;
}

footer {
    border-top-style: dotted;
}

header a {
    color: #ffffff;
    text-decoration: none;
}