:root {
    font-family: 'Departure Mono', monospace;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light dark;
    --white: #cfcfcf;
    --black: #1a1a1a;
}
/* Fonts */
@font-face {
    font-family: "Departure Mono";
    src: url("../assets/fonts/DepartureMono-1.500/DepartureMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Departure Mono', monospace; }
h1 { font-size: clamp(1.8rem, 4vw, 4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 3rem); }
h3 { font-size: clamp(1.1rem, 2vw, 2rem); }
h4 { font-size: clamp(1rem, 1.8vw, 1.6rem); }
h5 { font-size: clamp(0.95rem, 1.5vw, 1.4rem); }
h6 { font-size: clamp(0.9rem, 1.2vw, 1.2rem); }
p  { font-size: clamp(1rem, 1.5vw, 1.25rem); }
li { font-size: clamp(1rem, 1.5vw, 1.25rem); }
a  { font-size: inherit; }
label    { font-size: clamp(0.85rem, 1.1vw, 1rem); }
input,
textarea,
select   { font-size: clamp(0.9rem, 1.1vw, 1rem); }
blockquote { font-size: clamp(1rem, 1.5vw, 1.3rem); }
caption    { font-size: clamp(0.8rem, 1vw, 0.95rem); }
figcaption { font-size: clamp(0.8rem, 1vw, 0.9rem); }
code,
pre        { font-size: clamp(0.8rem, 1vw, 0.95rem); }
small      { font-size: clamp(0.75rem, 0.9vw, 0.85rem); }
strong     { font-size: inherit; }
em         { font-size: inherit; }
span       { font-size: inherit; }
th { font-size: clamp(0.9rem, 1.1vw, 1rem); }
td { font-size: clamp(0.85rem, 1.1vw, 1rem); }
button { font-size: clamp(0.9rem, 1.1vw, 1rem); }

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);

    background-color: black;
}

a {
    color: crimson;
    text-decoration: none;
}

a:hover {
    color: coral;
}

a:active {
    color: coral;
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50%       { border-color: currentColor; }
}

@keyframes typing {
    0%   { width: 0; }
    80%  { width: 13ch; }
    100% { width: 13ch; }
}

h2.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    width: 0;
    display: inline-block;
    animation:
        typing 4.5s steps(14, end) infinite,
        blink  0.75s step-end infinite;
}

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.links a {
    padding: 0.5rem;
}

a.disabled {
    pointer-events: none;
    color: #666;
}