@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Orbitron:wght@600;700&display=swap');

:root {
    --fh: 'Montserrat', sans-serif;
    --fc: 'Orbitron', sans-serif;
    --fb: 'Montserrat', sans-serif;

    --bg: #09142f;
    --surface: rgba(36, 47, 112, 0.52);
    --surface-strong: rgba(34, 48, 118, 0.74);
    --raised: rgba(255, 255, 255, 0.1);
    --border: rgba(180, 214, 255, 0.28);
    --border-strong: rgba(185, 224, 255, 0.45);

    --icel: #ffffff;
    --icel-dim: rgba(255, 255, 255, 0.16);
    --fish: #ffe18b;
    --fish-dim: rgba(255, 225, 139, 0.18);
    --green: #8fffd1;
    --green-dim: rgba(143, 255, 209, 0.18);
    --red: #ffd2db;
    --red-dim: rgba(255, 160, 180, 0.18);

    --text: #f5fbff;
    --muted: rgba(232, 243, 255, 0.78);

    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 3rem;

    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --duration: 220ms;

    --shadow: 0 18px 40px rgba(4, 11, 41, 0.34);
    --shadow-lg: 0 26px 60px rgba(4, 11, 41, 0.48);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--fb);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 22%, rgba(91, 255, 240, 0.6), rgba(91, 255, 240, 0.08) 24%, transparent 42%),
        linear-gradient(180deg, rgba(12, 23, 70, 0.4), rgba(3, 11, 33, 0.92)),
        url('/images/pinguin.png') center/cover no-repeat fixed;
}

a {
    color: inherit;
    text-decoration: none;
    transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

img {
    max-width: 100%;
    display: block;
}