/* vars */
:root {
    --dark-bg-color: rgb(32 32, 32);
    --light-bg-color: rgb(160, 160, 160);
    --dark-font-color: grey;
    --light-font-color: black;
    --max-width: 450px;
}

/* font */
@font-face {
    font-family: Typewriter;
    src: url("../font/TT2020Base-Regular.woff2");
}

/* style */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

main {
    max-width: var(--max-width);
    text-align: center;
    font-family: Typewriter;
    font-size: 1.2em;
}


.avatar {
    background: url(../img/avatar.png);
    display: block;
    margin: 0 auto;
    background-size: 200%;
    padding-bottom: 100%;
}

.avatar:hover {
    background-position: 100% 0;
}

a,
a:visited {
    color: inherit;
}

/* color scheme */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg-color)
    }

    h1,
    p,
    a,
    .description {
        color: var(--dark-font-color);
    }

}

@media (prefers-color-scheme: light) {

    body {
        background-color: var(--light-bg-color)
    }

    h1,
    p,
    a,
    .description {
        color: var(--light-font-color);
    }

}