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

:root {
    --background-color: white;
    --foreground-color: #484848;
    --accent-color: #121212;
    --divider-color: #c9c9c9;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 17px;
    line-height: 1.5;

    color: var(--foreground-color);
    background-color: var(--background-color);
}

@media (min-width: 400px) {
    body {
        display: flex;
        align-items: center;
        flex-direction: row;
        height: 100vh;
    }
}

a:link, a:active, a:hover, a:visited {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid var(--divider-color);
}

p {
    margin-bottom: 15px;
}

main {
    max-width: 380px;
    padding: 30px;
    margin: 0 auto;
}