@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    color-scheme: light dark;
    --font: "Inter", sans-serif;
    --col-accent: #E54B4B;
    --col-bg: light-dark(#F4F3EE, #333333);
    --col-mg: light-dark(#807d77, #BCB8B1);
    --col-fg: light-dark(#333333, #F4F3EE);
}

html {
    background-color: var(--col-bg);
    font-family: var(--font);
    color: var(--col-fg);
}

body {
    margin: 0;
}

h2, h3, h4, h5, h6 {
    color: var(--col-mg);
}

a {
    color: var(--col-fg);
    text-decoration: none;
    transition: .2s;
}

a:hover {
    color: var(--col-accent);
}

#link-home {
    font-weight: 700;
    transition: .3s;
}

#link-home:hover {
    font-weight: 800;
}

#link-home h1 {
    font-size: 36pt;
    font-weight: inherit;
    margin: 0;
}

.icon {
    vertical-align: -0.2em;
    width: 1.2em;
    height: 1.2em;
    fill: var(--col-mg);
    transition: inherit;
}

a:hover .icon {
    fill: var(--col-accent);
}

.link-styled-mg {
    color: var(--col-mg);
    font-weight: 600;
}

.link-styled-fg {
    color: var(--col-fg);
    font-weight: 600;
    text-decoration: underline dotted;
}

.link-styled-mg:hover, .link-styled-fg:hover {
    fill: var(--col-accent);
}