/* Meslo LGS */
@font-face {
    font-family: "Meslo";
    src: url("fonts/MesloLGS-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Meslo";
    src: url("fonts/MesloLGS-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

/* Catppuccin Mocha */
:root {
    --pad: 3rem;
    --header-height: 1.75rem;
    --line-height: 1.7;

    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
}

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

html {
    background-color: var(--ctp-base);
    color: var(--ctp-subtext0);
    font-family: "Meslo", monospace;
    font-size: 1rem;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 4rem var(--pad) var(--pad);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2rem;
}

h1 {
    color: var(--ctp-text);
    font-size: var(--header-height);
    line-height: 1;
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

.bio p {
    line-height: var(--line-height);
    color: var(--ctp-subtext0);
}

.bio p + p {
    margin-top: 1rem;
}

nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

nav a img {
    display: block;
    height: var(--header-height);
    width: auto;
    /* tint to --ctp-lavender (#b4befe) */
    filter: invert(80%) sepia(20%) saturate(500%) hue-rotate(200deg) brightness(105%);
    transition: filter 0.15s;
}

nav a:hover img {
    /* tint to --ctp-blue (#89b4fa) */
    filter: invert(75%) sepia(40%) saturate(500%) hue-rotate(190deg) brightness(105%);
}

.copy {
    font-size: 1.1em;
}

footer {
    /* subtract half-leading of .bio p to visually balance top and bottom gaps */
    margin-top: calc(var(--pad) - (var(--line-height) - 1) / 2 * 1rem);
    color: var(--ctp-overlay0);
    font-size: 0.75rem;
}