body {
    display: flex;
    margin: 0;
    height: 100vh;
}

a {
    padding: 0 0.2em;
}

main {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

nav a {
    margin: 0.5em;
    font-size: 1.5em;
}

input[type="checkbox"], label {
    vertical-align: middle;
}

input[type="checkbox"] {
    appearance: none;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border: 2px solid var(--light-foreground);
    padding: 2px;
    outline-offset: 0;
}

input[type="checkbox"]:checked {
    border-color: var(--light-base03);
    background-color: var(--light-base03);
    background-clip: content-box;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:focus:checked + label {
    text-decoration: line-through;
    color: var(--light-base03);
}

input[type="checkbox"]:focus {
    outline-color: var(--light-base07);
    outline-style: solid;
    outline-width: 4px;
    border-color: var(--light-base07);
}

input[type="checkbox"]:focus + label {
    color: var(--light-base07);
}

label {
    font-size: 1.5em;
    padding-left: 0.5em;
}

div div {
    margin: 0.5em;
}

@media (prefers-color-scheme: dark) {
    input[type="checkbox"] {
        border-color: var(--dark-foreground);
    }

    input[type="checkbox"]:checked {
        border-color: var(--dark-base03);
        background-color: var(--dark-base03);
    }

    input[type="checkbox"]:checked + label,
    input[type="checkbox"]:focus:checked + label {
        color: var(--dark-base03);
    }

    input[type="checkbox"]:focus {
        outline-color: var(--dark-base07);
        border-color: var(--dark-base07);
    }

    input[type="checkbox"]:focus + label {
        color: var(--dark-base07);
    }
}