style.css

@media (prefers-color-scheme: dark) {
    body {
        --color-primary: rgb(54, 54, 95);
        --color-secondary: rgb(255, 255, 251);
        --color-tertiary: rgb(47, 47, 68);
        --color-quaternary: rgb(111, 111, 177);
    }
}

@media (prefers-color-scheme: light) {
    body {
        --color-primary: rgb(255, 255, 251);
        --color-secondary: rgb(54, 54, 95);
        --color-tertiary: rgb(111, 111, 177);
        --color-quaternary: rgb(47, 47, 68);
    }
}

* {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 4em;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 3.5em;
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 3em;
    margin: 0;
    padding: 0;
}

h4 {
    font-size: 2.5em;
    margin: 0;
    padding: 0;
}

h5 {
    font-size: 2em;
    margin: 0;
    padding: 0;
}

h6 {
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}

strong {
    font-weight: bold;
}

.content {
    display: flex;
    justify-content: center;
    margin-top: 10em;
}

.child {
    text-align: center;
}

.btn {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: 5px;
    color: var(--color-primary);
    font-size: 1.5em;
    margin: 1em;
    padding: 1em;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--color-tertiary);
    border: 1px solid var(--color-primary);
    color: var(--color-secondary);
}

.btn:active {
    background-color: var(--color-quaternary);
    border: 1px solid var(--color-primary);
    color: var(--color-secondary);
}

footer {
    font-family: 'Consolas', monospace;
    bottom: 0;
    position: fixed;
    width: 100%;
    text-align: center;
}