*, *::before, *::after {
    box-sizing: border-box;
    margin: auto;
    padding: 0;
}

@font-face{
    font-family: 'Inter';
    font-weight: 200 900;
    font-style: normal;
    src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
         url('../fonts/InterVariable.woff2') format('woff2-variations');
}

@font-face{
    font-family: 'Inter';
    font-weight: 200 900;
    font-style: italic;
    src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
         url('../fonts/InterVariable.woff2') format('woff2-variations');
}

:root {
    --background: #fafafa;
    --default: #333333;
    --accent: #333333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #333333;
        --default: #fafafa;
        --accent: #fafafa;
    }
}

::selection {
    background-color: hsl(from var(--default) h s l / 15%);
    color: hsl(from var(--default) h s calc(l * 0.94));
}

::-moz-selection {
    background-color: hsl(from var(--default) h s l / 15%);
    color: hsl(from var(--default) h s calc(l * 0.94));
}

body {
    background-color: var(--background);
    color: var(--default);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-kerning: normal;
    font-weight: 420;
    line-height: 1.5;
    letter-spacing: -0.00625rem;
    text-wrap: pretty;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    hanging-punctuation: first allow-end last;
}

img, picture, video, canvas {
    display: block;
    max-inline-size: 100%;
}

.global-nav {
    padding-block: 8rem 0;
}

.nav-container {
    height: 2.5rem;
}

svg.logo:hover {
    color: var(--accent);
    transition: color 200ms ease-in-out;
}

.homepage-header,
.subpage-header,
footer {
    margin-block: 4rem;
}

.nav-container,
.page-block,
.links-page,
.separator,
.body-section,
.minimal-link-container,
h1, h2, h3, p, ul, ol, li, figcaption, footer {
    max-width: 640px;
}

h1, h2, h3 {
    font-size: 1.75rem;
    font-weight: 520;
    font-variation-settings: 'opsz' 12;
    letter-spacing: -0.025rem;
    line-height: 1.25;
    margin-block: 4rem 0.5rem;
}

h1.main-title {
    text-wrap: balance;
}

h3 {
    font-size: 1.375rem;
    margin-block: 3.5rem 1rem;
}

.homepage-header p, #index p {
    margin-block: 0.75rem;
}

p, figcaption, ul, ol, li {
    margin-block: 1lh;
}

.sub-heading,
.links-title {
    font-size: 1.5rem;
    font-variation-settings: 'opsz' 12;
    letter-spacing: -0.015625rem;
    line-height: 1.375;
}

.links-page p {
    margin-block: 1rem;
}

p.subhead,
.sub-heading,
p.compact {
    margin-block: 0.5rem;
}

strong {
    font-weight: 620;
}

img, picture {
    border-radius: 2px;
}

figcaption {
    font-size: 0.9375rem;
    color: hsl(from var(--default) h s l / 80%);
    text-align: center;
}

.unselectable {
    user-select: none;
}

div.block-item-container {
    margin-block: 2.5rem;
}
    
div.links-page {
    margin-block: 4.5rem;
}

div.block-item-container p {
    margin-block: 0.25rem;
}

div.links-page-section {
    margin-block: 1.75rem;
}

p.date,
.secondary {
    color: hsl(from var(--default) h s l / 70%);
}

a {
    display: inline;
    color: inherit;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: hsl(from var(--default) h s l / 20%);
    text-decoration-thickness: 0.0875rem;
    text-underline-offset: 0.1875rem;
    transition: all 120ms ease-in-out;
}

a:hover {
    color: var(--accent);
    text-decoration-color: hsl(from var(--accent) h s l / 60%);
}

.links-title a,
.minimal-link {
    color: inherit;
    text-decoration: none;
}

.links-title a {
    font-weight: 520;
}

li {
    padding-left: 0.25rem;
    margin: 1rem 0 1rem 1.75rem;
}

li::marker,
.subtle {
    color: hsl(from var(--default) h s l / 60%);
}

.links-title a:hover,
.minimal-link:hover {
    color: var(--accent);
}

.inline-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.inline-icon svg path {
    color: hsl(from var(--default) h s l / 30%);
    transition: color 120ms ease-in-out;
}

.blog-title:hover .inline-icon svg path {
    color: hsl(from var(--accent) h s l / 60%);
}

figure.media-img {
    max-width: 800px;
    margin-block: 4rem;
}

figure.media-img-small {
    max-width: 640px;
    margin-block: 3rem;
}

figure.media-img-tiny {
    max-width: 560px;
    margin-block: 3rem;
}

blockquote {
    padding: 0 1.5rem;
    margin-block: 1rem;
    border-left: 0.1rem solid hsl(from var(--default) h s l / 15%);
}

code {
    background-color: hsl(from var(--background) h s calc(l * 1.25));
    color: var(--default);
    border: 1px solid hsl(from var(--default) h s l / 20%);
    border-radius: 4px;
    padding: 2px 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.84375rem;
}

.minimal-link-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.25rem;
    margin-block: 1rem;
}

.minimal-link-container a {
    text-align: left;
    margin: 0;
}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding-block: 4rem 0;
}

svg.footer-logo {
    position: relative;
    display: block;
}

svg.footer-logo:hover {
    color: var(--accent);
    transform: translate(0, -4px);
    transition: transform 200ms ease-in-out, color 160ms ease-in-out;
}

svg.footer-logo:not(:hover) {
    transform: translate(0, 0);
    transition: transform 200ms ease-in-out, transition-delay 200ms;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.separator::before,
.separator-minimal::before {
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(from var(--default) h s l / 40%);
    user-select: none;
}

.separator::before {
    height: 4rem;   
    content: "✳✳✳";
    letter-spacing: 1rem;
}

.separator-minimal::before {
    height: 2rem;   
    content: "✳";
}

.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 0 1.5rem 0 0;
    margin: 3rem auto 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel {
    scroll-behavior: smooth;
  }
}

.carousel .media-img-small {
    display: flex;
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    align-items: baseline;
    padding: 0 0 0 1.5rem;
}

.carousel .media-img-small img {
    display: block;
    max-width: 560px;
    max-height: 100%;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

header, main, footer {
  animation: slideUp 480ms ease-out;
}

@media screen and (max-width: 640px) {
    .global-nav {
        padding-block: 4rem 0;
    }
    
    .nav-container,
    h1, h2, h3, p, ul, ol, figure, footer,
    .body-section,
    .minimal-link-container {
        padding: 0 1.5rem;
    }

    blockquote p {
        padding: 0;
    }

    figure.media-img,
    figure.media-img-small {
        margin-block: 2rem;
    }

    .carousel {
        margin: 2rem auto 0;
    }

    .carousel .media-img-small img {
        width: 300px;
    }

    .minimal-link-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}