* { box-sizing: border-box; }

:root {
    color-scheme: dark;
    min-height: 100%;
    background: #2d4055;
    --background: #2d4055;
    --text: #c7839b;
    --heading: #e0efff;
    --math: #f3c4d5;
    --link: #9fcaff;
    --muted: #e3aec2;
}

body {
    max-width: 670px;
    margin: 70px auto;
    padding: 0 20px;
    background: #2d4055;
    color: var(--text);
    font-family: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1 {
    margin: 0 0 2rem;
    color: var(--heading);
    font-size: 1.35rem;
    line-height: 1.3;
}

h2 {
    margin: 0 0 1.2rem;
    color: #f3c4d5;
    font-size: 0.95rem;
}

p { margin: 0 0 1.2rem; }

.equation {
    margin: 1.5rem 0;
    color: var(--math);
    font-size: 1.1rem;
}

.equation math { font-size: 1.15em; }
.evaluation { display: grid; gap: 0.6rem; }
.evaluation code { overflow-wrap: anywhere; font-size: 0.9rem; }
code { font-family: inherit; color: var(--math); }
.contact { overflow-wrap: anywhere; }
.aside { color: var(--muted); }

a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--heading); text-decoration: underline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; }

@media (max-width: 480px) {
    body { margin: 40px auto; }
    .equation { font-size: 1rem; }
}

.name-light { color: #fff0ad; }
.name-dark { color: #d4ad45; }
section > p:nth-of-type(even) { color: #f3c4d5; }
nav a:first-child { color: #bdebc9; }
nav a:nth-child(2) { color: #75ab87; }