:root {
    --background-color: #f5f5f5;
    --surface-color: white;

    --text-color: #222;
    --muted-text-color: #666;

    --nav-background: #222;
    --nav-text: #ccc;
    --nav-text-active: white;

    --card-background: white;

    --shadow-color: rgba(0,0,0,0.2);
}

.dark-theme {

    --background-color: #111827;
    --surface-color: #0f172a;
    
    --text-color: #f3f4f6;
    --muted-text-color: #9ca3af;
    
    --nav-background: #030712;
    --nav-text: #d1d5db;
    --nav-text-active: white;
    
    --card-background: #111827;
    
    --shadow-color: rgba(0,0,0,0.2);
}

body {
    margin: 0;
    font-family: system-ui, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

.page {
    min-height: 100vh;

    background-color: var(--background-color);

    transition: background-color 0.2s ease;
}

main {
    padding: 24px;
}

.container {
    max-width: 900px;
    margin: auto;

    padding: 20px;

    background: var(--background-color);
    color: var(--text-color);

    border-radius: 10px;

    box-shadow: 0 2px 8px var(--shadow-color);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

@media (max-width: 768px){
    .container{
        padding: 16px;
    }
}