:root {
    --bg: #FDFDF0;
    --text: #3b444b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #3b444b;
        --text: #FDFDF0;
    }
}

body {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
}

body:not(:has(:target)) #home {
    display: block;
}

nav {
    flex-direction: row;
}

nav a {
    margin-right: 1rem;
}

nav label {
    cursor: pointer;
}

a {
    color: inherit;
}

section div,
footer {
    flex-direction: column;
}

section:not(:target),
#color-mode {
    display: none;
}

#color-mode:checked~.color-scheme-wrapper {
    --bg: #3b444b;
    --text: #FDFDF0;
}

@media (prefers-color-scheme: dark) {
    #color-mode:checked~.color-scheme-wrapper {
        --bg: #FDFDF0;
        --text: #3b444b;
    }
}

.color-scheme-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: var(--bg);
    color: var(--text);
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}