:root {
    --dark1: #2E3440;
    --dark2: #3B4252;
    --dark3: #434C5E;
    --dark4: #4C566A;

    --light1: #D8DEE9;
    --light2: #E5E9F0;
    --light3: #ECEFF4;

    --layer1: var(--dark1);
    --layer2: var(--dark2);
    --layer3: var(--dark3);
    --layer4: var(--dark4);

    --text1: var(--light3);
    --text2: var(--light2);
    --text3: var(--light1);
}

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

    font-family: 
        'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen-Sans, Ubuntu, 
        Cantarell, "Helvetica Neue", sans-serif;
        user-select: none;
}

html {
    background-color: var(--layer1);
    scroll-behavior: smooth;
}

html::-webkit-scrollbar { width: 30px; }
html::-webkit-scrollbar-track { background-color: var(--layer1); }
html::-webkit-scrollbar-thumb { background-color: var(--layer4); border: 10px solid var(--layer1); border-radius: 100px; transition: background-color 250ms; }
html::-webkit-scrollbar-thumb:hover { background-color: var(--light1); }

a {
    color: inherit;
    text-decoration: none;
}

p {
    color: var(--text1);
}

.wrapper {
    width: min(calc(1024px), 90%);
    padding-inline: 16px;
    margin-inline: auto;
}