:root {
    color-scheme: light dark;
    --background-color: hsl(0, 0%, 100%);
    --text-color: hsl(210, 5%, 7%);
    --hover-color: hsla(210, 1%, 53%, 0.5);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: hsl(100, 2%, 9%);
        --text-color: hsl(120, 100%, 99.8%);
        --hover-color: hsla(210, 2%, 81%, 0.5);
    }
}

body {
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: calc(10px + 0.33vw);
    padding: 5vh 10vw;
    background-color: var(--background-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -ms-overflow-style: none;
    text-align: justify;
    word-break: break-word;
}

::-webkit-scrollbar {
    display: none;
}

h1 {
    font-size: 4.5em;
    font-weight: 500;
    margin-bottom: 0;
}

p {
    font-size: 1.6em;
    font-weight: 300;
    line-height: 1.4;
    max-width: 27em;
}

a, span {
    position: relative;
    text-decoration: none;
    color: var(--text-color);
}

a:after, span:after {
    content: "";
    position: absolute;
    top: 60%;
    left: -0.1em;
    right: -0.1em;
    bottom: 0;
    transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
    background-color: var(--hover-color);
    z-index: -1;
}

a:hover:after, span:hover:after {
    top: 0%;
}