/* Blue-green color palette */
:root {
    --blue: #2563eb;
    --green: #22c55e;
    --light-blue: #dbeafe;
    --light-green: #d1fae5;
    --background: #f0fdfb;
    --text: #1e293b;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
    background: var(--background);
    color: var(--text);
}

header {
    background: linear-gradient(90deg, var(--blue) 60%, var(--green) 100%);
    color: white;
    padding: 1.2rem 2rem;
    box-shadow: 0 2px 8px rgba(34,197,94,0.08);
}

header h1 {
    margin: 0 0 0.4rem 0;
    font-size: 2.2rem;
    letter-spacing: 1px;
}

nav {
    margin-top: 0.2rem;
}

nav a {
    color: var(--light-blue);
    text-decoration: none;
    margin-right: 1.5rem;
    font-weight: 500;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--light-green);
}

main {
    max-width: 700px;
    background: white;
    margin: 2rem auto;
    padding: 2rem 2.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(37,99,235,0.06), 0 1.5px 8px rgba(34,197,94,0.06);
}

h2, h3 {
    color: var(--blue);
}

.archive-list {
    padding-left: 1.2rem;
    margin-top: 0.6rem;
}

.archive-list li {
    background: var(--light-green);
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--green);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.archive-list li:hover {
    background: var(--light-blue);
}

footer {
    text-align: center;
    color: var(--green);
    background: var(--light-blue);
    padding: 1rem 0;
    margin-top: 3rem;
    font-size: 1rem;
    border-top: 2px solid var(--blue);
}