/* Light Mode */
body {
    background-color: hsl(60, 9%, 87%);
    color: #262625;
}

header {
    background-color: hsl(60, 9%, 84%);
    color: #262625;
    border-bottom: 1px solid #b38f6b;
}

header h1 {
    color: #262625;
    border-bottom: 3px solid #e69f67;
}

main {
    background-color: hsl(60, 9%, 84%);
    border: 1px solid #b38f6b;
}

main h2 {
    color: #6e6b5e;
    border-bottom: 2px solid #b38f6b;
}

footer {
    background-color: hsl(60, 9%, 84%);
    color: #737480;
    border-top: 1px solid #b38f6b;
}

a {
    color: #2b79a2;
}

a:hover {
    color: #e69f67;
}

#dark-mode-toggle {
    background-color: hsl(60, 9%, 84%);
    color: #262625;
    border: 1px solid #b38f6b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover effect previews dark mode */
#dark-mode-toggle:hover {
    background-color: #1f1c02; /* Match dark mode */
    color: #fff; /* Match dark mode */
    border: 1px solid #1f1c02; /* Match dark mode */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Slightly darker shadow for hover */
}