@font-face { font-family: 'StretchPro'; src: url('/StretchPro.otf') format('opentype'); }

:root {
    --bg-color:#ffffff; --text-color:#111111;
    --primary-font:'Instrument Sans',sans-serif;
    --secondary-font:'Instrument Serif',serif;
    --heading-font:'StretchPro',sans-serif;
    --wca-yellow:#FFFC90; --wca-cyan:#9AF6E5; --wca-pink:#EAA4C6; --wca-blue:#38BBF8;
}

html,body{margin:0;padding:0;width:100%;min-height:100%;background:var(--bg-color);color:var(--text-color);font-family:var(--primary-font);overflow-x:hidden}
html{scrollbar-width:thin;scrollbar-color:#ccc #fff}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#aaa}

body{display:flex;flex-direction:column;min-height:100vh;padding:6rem 2rem 2rem;box-sizing:border-box}
main{width:100%;height:100vh;flex-grow:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;justify-content:space-between;gap:2rem;position:relative}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,0,0,0.1)}70%{box-shadow:0 0 0 10px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}