@font-face {
    font-family: Funkydori;
    src: url("/Funkydori.otf");
}
@font-face {
    font-family: Roboto Slab;
    src: url("/RobotoSlab-Regular.ttf");
}

:root {
    color-scheme: light dark;
    --bg: light-dark(white, #101010);
    --font: light-dark(#101010, #dedede);
    --accent: light-dark(#0273b9, #7196c4);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;

    background-color: var(--bg);
    color: var(--font);
    font-family: Roboto Slab;
}

.content {
    max-width: 40rem;
    width: 100%;
}

header > img {
    height: 6rem;
    width: auto;
    border-radius: 50%;
}

#name {
    font-family: Funkydori;
    font-size: 1.25em;
    font-weight: 400;
    color: var(--accent);
}

#links {
    display: flex;
    flex-direction: column;
}

#links > a {
    margin-top: 0.25rem;
}

a {
    color: var(--accent);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

h1,
p {
    margin: 0.15em 0;
}