@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;background:#15101f;font-synthesis:none}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100svh}a{color:inherit;text-decoration:none}.landscape,.shade,#fireflies{position:fixed;inset:0;pointer-events:none}.landscape{background:url('../img/dusk.jpg') center center/cover no-repeat;z-index:-3}.shade{background:linear-gradient(90deg,rgba(12,9,26,.31),rgba(14,9,28,.22)),linear-gradient(0deg,rgba(7,5,17,.37),transparent 52%);z-index:-2}#fireflies{width:100%;height:100%;z-index:-1}.page{min-height:100svh;display:grid;place-items:center;padding:32px 18px}.profile{width:min(100%,450px);padding:27px 30px 21px;border:1px solid rgba(255,255,255,.26);border-radius:28px;text-align:center;background:rgba(20,17,38,.66);-webkit-backdrop-filter:blur(23px) saturate(125%);backdrop-filter:blur(23px) saturate(125%);box-shadow:0 28px 80px rgba(10,4,22,.46),inset 0 1px rgba(255,255,255,.13)}.hello{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:99px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);font-size:11px;letter-spacing:.02em;color:#e0ddec}.hello-dot{height:7px;width:7px;border-radius:50%;background:#75c9ff;box-shadow:0 0 0 4px rgba(117,201,255,.13),0 0 12px #75c9ff}.avatar-wrap{position:relative;width:138px;height:138px;margin:23px auto 19px;border-radius:50%;padding:4px;background:linear-gradient(135deg,#69caff,#ae8dff,#ff8ec6);box-shadow:0 0 25px rgba(242,134,212,.27);transition:transform .35s,box-shadow .35s}.avatar-wrap:hover{transform:scale(1.045) rotate(2deg);box-shadow:0 0 36px rgba(242,134,212,.48)}.avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 38%;border:3px solid #282039}h1{font:700 clamp(25px,5vw,31px)/1.18 'Space Grotesk',sans-serif;letter-spacing:-.045em;margin:0;background:linear-gradient(100deg,#fff 25%,#d9eaff 63%,#ffd1e9);color:transparent;background-clip:text}.intro{color:#d1c9db;font-size:12.5px;line-height:1.65;margin:11px 0 22px}.social-box{position:relative;border-radius:17px;padding:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.corner{position:absolute;width:17px;height:17px;pointer-events:none;transition:width .3s,height .3s}.social-box:hover .corner{width:25px;height:25px}.tl{top:-1px;left:-1px;border-top:2px solid #7ad6ff;border-left:2px solid #7ad6ff;border-radius:17px 0 0 0}.tr{top:-1px;right:-1px;border-top:2px solid #ff9cce;border-right:2px solid #ff9cce;border-radius:0 17px 0 0}.bl{bottom:-1px;left:-1px;border-bottom:2px solid #ff9cce;border-left:2px solid #ff9cce;border-radius:0 0 0 17px}.br{bottom:-1px;right:-1px;border-bottom:2px solid #7ad6ff;border-right:2px solid #7ad6ff;border-radius:0 0 17px 0}.social-heading{display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin-bottom:11px}.social-heading h2{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#c2b9d2;margin:0;font-weight:700}.little-dots{display:flex;gap:5px}.little-dots i{width:6px;height:6px;border-radius:50%;background:#7bd4ff}.little-dots i+ i{background:#ffa1d4}.social-list{display:grid;gap:9px}.social{display:flex;align-items:center;gap:12px;min-height:62px;padding:9px 12px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(12,14,30,.5);text-align:left;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}.social:hover{transform:translateY(-3px);background:rgba(30,28,53,.86);border-color:var(--accent);box-shadow:0 9px 25px -14px var(--accent)}.social:focus-visible,.contact:focus-visible{outline:3px solid #a8ddff;outline-offset:3px}.facebook{--accent:#65a9ff}.instagram{--accent:#ff83bd}.discord{--accent:#a5a9ff}.youtube{--accent:#ff8c93}.brand-icon{display:grid;place-items:center;flex:none;width:41px;height:41px;border-radius:10px;background:rgba(255,255,255,.065);color:var(--accent);transition:transform .3s,background .3s}.brand-icon svg{width:21px;height:21px;fill:currentColor}.social:hover .brand-icon{transform:rotate(-5deg) scale(1.1);background:rgba(255,255,255,.13)}.social-label{display:grid;gap:3px}.social-label strong{font-size:13px;font-weight:700}.social-label small{font-size:11px;color:#c2bbd0}.out-arrow{margin-left:auto;color:#c4bed3;opacity:.65;transition:transform .25s,opacity .25s}.out-arrow svg{width:16px;height:16px}.social:hover .out-arrow{transform:translate(3px,-3px);opacity:1}.contact{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;min-height:49px;border:1px solid rgba(255,255,255,.27);border-radius:13px;background:linear-gradient(110deg,rgba(80,173,242,.32),rgba(212,98,178,.33));font-size:13px;font-weight:700;transition:transform .25s,box-shadow .25s,background .25s}.contact svg{width:17px;height:17px;color:#a9e5ff}.contact span{font-size:19px;color:#ffbce1;transition:transform .25s}.contact:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(160,112,213,.25);background:linear-gradient(110deg,rgba(80,173,242,.49),rgba(212,98,178,.48))}.contact:hover span{transform:translateX(4px)}footer{font-size:10.5px;letter-spacing:.025em;color:#c1b8cb;margin-top:20px}@media(max-width:480px){.page{padding:20px 12px}.profile{padding:23px 18px 18px;border-radius:23px}.avatar-wrap{width:119px;height:119px;margin:19px auto 17px}.social-box{padding:12px}.social{min-height:58px}.intro{margin-bottom:19px}}@media(max-height:730px) and (min-width:600px){.page{padding:15px}.profile{padding-top:17px;padding-bottom:15px}.avatar-wrap{width:100px;height:100px;margin:13px auto}.social{min-height:54px}.social-list{gap:6px}.intro{margin:7px 0 14px}.contact{margin-top:12px}footer{margin-top:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
