@import 'base.css';

:root {
    --bg-gradient: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    --text-color: #fff;
    --card-bg: rgba(255, 255, 255, 0.08);
    --card-hover-bg: rgba(255, 255, 255, 0.12);
}

body {
    background-image: var(--bg-gradient);
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-color);
}

.nav-link, .header, .quote, .hitokoto {
    background: var(--card-bg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link:hover {
    background: var(--card-hover-bg);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}