:root {
    --color-bg: #393D3F;
    --color-fg: #ffffff;
    --color-primary: #546A7B;
    --color-secondary: #62929E;
    --color-accent: #DD7373;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-bg: #ffffff;
        --color-fg: #393D3F;
    }
}



body {
    font-family: 'Noto Sans', sans-serif;
    padding: 50px;
    margin: 0;
    height: 100%;
    background: var(--color-bg);
}

h1 {
    color: var(--color-primary);
    text-shadow: 1px 1px var(--color-secondary);
    font-size: 2rem;
}

button {
    border: 3px solid var(--color-primary);
    border-radius: 5px;
    text-align: center;
    color: var(--color-accent);
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    background-color: var(--color-primary);
}

a:link, a:visited {
    color: var(--color-secondary);
}

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-secondary);
}

    /* Chrome, Edge and Safari */
    *::-webkit-scrollbar {
        width: 10px;
    }

    *::-webkit-scrollbar-track {
        border-radius: 5px;
        background-color: var(--color-secondary);
    }

    *::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: var(--color-accent);
    }