@import "https://fonts.googleapis.com/css2?family=Anton&family=Outfit:wght@300;400;500;700&family=Syncopate:wght@400;700&display=swap";
:root{--background:#000;--foreground:#fff;--accent:red;--surface:#111;--surf-light:#222;--font-header:"Anton", sans-serif;--font-wide:"Syncopate", sans-serif;--font-sub:"Outfit", sans-serif;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--background);color:var(--foreground);font-family:var(--font-sub);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-header);text-transform:uppercase;letter-spacing:1px}.wide-text{font-family:var(--font-wide);text-transform:uppercase;letter-spacing:2px}.btn{background:var(--foreground);color:var(--background);font-family:var(--font-wide);cursor:pointer;text-transform:uppercase;transition:transform .16s var(--ease-out), filter .2s ease, opacity .2s ease, background-color .2s ease;border:none;padding:12px 24px;font-weight:700;text-decoration:none;display:inline-block}.btn:active{transform:scale(.97)}.btn.primary{background:var(--accent);color:#fff}@media (hover:hover) and (pointer:fine){.btn:hover{filter:brightness(1.1)}}.card{background:var(--surface);transition:transform .25s var(--ease-out);border-radius:8px;overflow:hidden}@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-4px)}}.fade-in{opacity:0;animation:fadeInEntry .3s var(--ease-out) forwards;transform:scale(.95)}@keyframes fadeInEntry{to{opacity:1;transform:scale(1)}}