:root {
    --bg: #202020;
    --panel: #2b2b2b;
    --text: #ffffff;
    --primary: #1309ff;
    --secondary: #adfaff;
    --border: #333;
    --footer: #181818;
    --radius: 4px;
}

body.light {
    --bg: #f5f7fa;
    --panel: #ffffff;
    --text: #111111;
    --border: #dddddd;
    --footer: #ffffff;
}

* {
    box-sizing: border-box
}

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

a {
    text-decoration: none;
    color: inherit
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

section {
    animation: fadeUp 1s ease both;
}

/* FOOTER */
footer {
    background: var(--footer);
    border-top: 1px solid var(--border);
    padding: 32px 20px;
    text-align: center;
    font-size: .8rem;
}

/* ANIMATIONS */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: none
    }
}