/* dark mode styles */
:root {
    --off-white: #DFDDF4;
    --dark-purple: #252135;
    --light-salmon: #EB9A97;
    --light-purple: #C4A7E6;
}

#sun-svg {
    display: none;
    fill: var(--off-white);
}

.dark-mode {
    background: var(--dark-purple);
}

.dark-mode h1 {
    color: var(--dark-purple);
}

.dark-mode #moi {
    border-color: var(--light-salmon);
}

.dark-mode .header-speech-bubble {
    background-color: var(--light-salmon);
}

.dark-mode .arrow-down {
    border-top-color: var(--light-salmon);
}

.dark-mode .btn {
    color: var(--dark-purple);
    background-color: var(--light-purple);
    border-color: var(--off-white);
}

.dark-mode .btn:hover {
    background-color: var(--off-white);
}

.dark-mode .btn:focus-visible {
    /* paint a 2px white pseudo-outline using box-shadow */
    box-shadow: 0 0 0 2px #000000;
    /* then paint a 2px dark pink outline and offset it to reveal one or two pixels of the pseudo-outline */
    outline: solid 2px rgb(232, 220, 113);
}

/* .dark-mode a {
    color: #FAF4EC;
}

.dark-mode a:link {
    text-decoration: underline;
}

.dark-mode a:visited,
.dark-mode a:active {
    text-decoration: underline;
    color: #94958B;
}

.dark-mode a:hover {
    text-decoration: underline;
    color: #F07933;
} */