@import 'base.css';

:root {
    --bg-color: #e0e5ec;
    --text-color: #2d3436;
    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;
    --card-bg: #e0e5ec;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

.nav-link, .header, .quote, .hitokoto {
    background: var(--card-bg);
    border: none;
    border-radius: 20px;
    box-shadow: 8px 8px 15px var(--shadow-dark),
                -8px -8px 15px var(--shadow-light);
    transition: all 0.3s ease;
    color: #2d3436;
}

.nav-link:hover {
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
    transform: scale(0.98);
}

.time {
    color: #2980b9;
}

.logo-text {
    background: linear-gradient(45deg, #2980b9, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-link small {
    color: #2980b9;
}