@font-face {
    font-family: "Asap";
    src: url("/fonts/Asap/asap.woff2") format("woff2");
    font-display: swap;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 100 900;
}o

@view-transition {
    navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}



:root {
    color-scheme: light dark;

    --c-base: #DFE0DC;
    --c-mono: #D6D9DC;
    --c-terracotta: #DC8E57;
    --c-taupe: #C7C2AB;
    --c-slate: #B0B6BC;

    --page-bg: light-dark(var(--c-base), #1A1C1A);
    --surface-card: light-dark(#FFFFFF, #242724);
    --surface-alt: light-dark(var(--c-mono), #2D312D);
    
    --text-primary: light-dark(#2B2D2B, var(--c-base));
    --text-secondary: light-dark(#595E59, var(--c-slate));

    --accent-color: light-dark(var(--c-terracotta), #E89A65);
    --border-color: light-dark(var(--c-taupe), #383C38);

    --border-radius: 10px;
}

body {
    font-family: "Asap", sans-serif;
    background-color: var(--page-bg);
    color: var(--text-primary);
    line-height: 1.2;
 }


a,
.multipart-link span {
    color: inherit;
    text-decoration: underline;
}
a:hover,
.multipart-link span:hover {
    color: var(--text-secondary);
    text-decoration-style: wavy;
}
a:active,
.multipart-link span:active {
    color: var(--accent-color);
    text-decoration-style: solid;
}
a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 0.2em;
}

hr {
    border: 1px solid var(--border-color);
}

time {
    color: var(--text-secondary);
}

nav ul,
.horizontal {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    gap: 1.5em;
}

.mainpage {
    max-width: 36em;
    margin: 0 auto;
    padding: 0 1em;
}

.mainpage h1,
.mainpage h2 {
    text-align: center;
}

.multipart-link {
    text-decoration: none;
}
.multipart-link:hover {
    text-decoration: none;
}
.multipart-link:active {
    text-decoration: none;
}