:root{--background: #0a0a1a;--primary-on-background: #e5e5f5;--secondary-on-background: #5e5e7f;--container: #131337;--primary-on-container: #e5e5f5;--secondary-on-container: #5e5e7f;--blue: #2468ff;--w-xxs: 1px;--w-xs: 2px;--w-s: 4px;--w-m: 8px;--w-l: 16px;--w-xl: 32px;--w-xxl: 64px;--f-xxs: .3rem;--f-xs: .5rem;--f-s: .8rem;--f-m: 1rem;--f-l: 1.7rem;--f-xl: 3rem;--f-xxl: 5rem;--content-width: 80ch;color-scheme:dark}body{background-color:var(--background);color:var(--primary-on-background);font-family:sans-serif;font-size:var(--f-m);margin:0}a,a:visited{color:var(--blue);text-decoration:none}:is(a,a:visited):hover{text-decoration:underline}main{width:var(--content-width);max-width:calc(100% - 2 * var(--w-m));margin:var(--w-xl) auto}main h1,main h2,main h3{margin-block:var(--w-l);font-weight:400}#soon{font-size:var(--f-xxl);margin:var(--w-xxl) auto;width:fit-content;padding:var(--w-m) var(--w-l);border-radius:var(--w-l);background:var(--container)}#socials{font-size:var(--f-l);margin-inline:auto;width:fit-content}.socials-container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--w-l);margin:var(--w-l) calc(0px - (var(--w-m) / 2))}.socials-card{position:relative;color:var(--primary-on-container);background-color:var(--container);aspect-ratio:7/3;border-radius:var(--w-l);transition:.2s}.socials-card .handle{position:absolute}.socials-card .platform-string{position:absolute;display:flex}.socials-card .platform-string .hover-icon{position:absolute;opacity:0}.socials-card.big{flex:0 1 calc(50% - var(--w-l))}.socials-card.big .handle{bottom:var(--w-l);right:var(--w-l);font-size:var(--f-xl)}.socials-card.big .platform-string{top:var(--w-l);left:var(--w-l);gap:var(--w-m);font-size:var(--f-l)}.socials-card.small{flex:0 1 calc(33.333% - var(--w-l))}.socials-card.small .handle{bottom:var(--w-l);right:var(--w-l);font-size:var(--f-l)}.socials-card.small .platform-string{top:var(--w-m);left:var(--w-m);gap:var(--w-m);font-size:var(--f-m)}.socials-card.hidden{opacity:.05}.socials-card.hidden:hover,.socials-card.hidden:focus{opacity:1}:is(.socials-card:hover,.socials-card:focus) .icon{opacity:0}:is(.socials-card:hover,.socials-card:focus) .hover-icon{opacity:1}@media(max-width:80ch){.socials-card.big{flex:0 1 calc(100% - var(--w-l))}.socials-card.small{flex:0 1 calc(50% - var(--w-l))}}