#accueil, #accueil * {
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

[data-theme="clair"] {
    --background: #eff0f7;

    #accueil {
        --color: #858dbd;
        --nav-color: #252525;
        --nav-background: #fcfcfc;
        --hr: #e6e6e6;
        --a-color: #252525;
        --a-hover: #e5e5e5;
    }
}

[data-theme="sombre"] {
    --background: #010101;

    #accueil {
        --color: #a3a9ce;
        --nav-color: #fafafa;
        --nav-background: #191b25;
        --hr: #35373f;
        --a-color: #fafafa;
        --a-hover: #3c3c46;
    }
}

html {
    background-color: var(--background);
    transition: background-color 0.3s ease;

    #accueil {
        color: var(--color);

        nav {
            color: var(--nav-color);
            background-color: var(--nav-background);
        }

        hr {
            border: none;
            border-top: 1px solid var(--hr);
        }

        a {
            color: var(--a-color);
        }

        a:hover {
            color: var(--color);
            background-color: var(--a-hover);
        }
    }
}