.header-wrapper {
    background-color: var(--header-bg);
    color: var(--header-text);
    border-bottom: var(--space-xs) solid var(--border-color);
    backdrop-filter: blur(24px);
}

.site-title a {
    font-size: var(--font-2xl);
}

.nav-item {
    list-style: none;
}


.page-header, .hero {
    background-color: var(--hero-bg);
    color: var(--hero-text);
    border: var(--space-xs) solid var(--border-color);
    box-shadow: var(--shadow-main);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    transition: all 0.1s ease;
    cursor: pointer;
}

.footer-button .toggle {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background-color: var(--accent);
    border: var(--space-xs) solid var(--border-color);
    box-shadow: var(--shadow-main);
    border-radius: var(--radius-md);
    transition: all 0.1s ease;
    cursor: pointer;
}

.footer-list li, .footer-list li a {
    font-size: var(--font-sm);
}

.form-control {
    background-color: var(--accent);
    padding: var(--space-sm);
    border: var(--space-xs) solid var(--border-color);
    box-shadow: var(--shadow-main);
    transition: all 0.1s ease;
    cursor: pointer;
}

.toggle:hover, .form-control:hover, .page-header:hover {
    box-shadow: 12px 12px 0px var(--border-color);
    transform: translate(-2px, -2px);
}

.toggle:active, .form-control:active, .page-header:active {
    box-shadow: 0px 0px 0px var(--border-color); /* Remove the shadow */
    transform: translate(8px, 8px); /* Move down/right by the shadow's width */
}

.footer-list {
    list-style: none;
}