:root{--black:#050505;--white:#efefe9}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;overflow:hidden;background:var(--black);color:var(--white)}
body{font-family:Arial,Helvetica,sans-serif}
main{position:relative;width:100%;height:100vh;height:100svh;min-height:420px;overflow:hidden;background:radial-gradient(ellipse at 71% 75%,#242424 0,#0d0d0d 42%,#050505 75%)}
main:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,#050505 0 12%,transparent 52%),linear-gradient(0deg,#050505aa 0,transparent 42%);pointer-events:none}
header{position:absolute;z-index:6;top:max(22px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));font:900 clamp(13px,1.1vw,16px) Arial Black,Arial,sans-serif;letter-spacing:-.02em}
.vehicles{position:absolute;z-index:1;inset:0}
.vehicles img{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none}
.car{right:-4%;bottom:-2%;width:53%;transform:rotate(-1deg)}
.bike{right:30%;bottom:-4%;width:40%;transform:rotate(-3deg)}
.profile-card{position:absolute;z-index:5;left:50%;top:50%;width:min(390px,calc(100vw - 40px));padding:34px 30px 26px;transform:translate(-50%,-50%);border:1px solid #ffffff38;background:#05050578;box-shadow:0 24px 80px #000a;text-align:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.profile-card:before,.profile-card:after{content:"";position:absolute;width:18px;height:18px;border-color:#fff6}
.profile-card:before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}
.profile-card:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}
.avatar{display:grid;place-items:center;width:112px;aspect-ratio:1;margin:0 auto 25px;border:1px solid #fff8;border-radius:50%;background:linear-gradient(145deg,#2b2b2b,#080808);font:900 42px Arial Black,Arial,sans-serif;box-shadow:inset 0 0 0 7px #0008}
.profile-card blockquote{max-width:290px;margin:0 auto 27px;font:italic 16px/1.55 Georgia,serif;color:#ddd}
.socials{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid var(--white);background:var(--white)}
.socials span{display:grid;place-items:center;min-width:0;height:54px;color:var(--black)}
.socials span+span{border-left:1px solid #0505052d}
.socials svg{display:block;overflow:visible}
.socials svg>*{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.socials svg .fill{fill:currentColor;stroke:none}
.socials span:nth-child(1) svg{width:22px;height:22px}
.socials span:nth-child(2) svg{width:25px;height:25px;transform:translate(-1px,1px)}
.socials span:nth-child(3) svg{width:28px;height:28px}
.socials span:nth-child(4) svg{width:23px;height:23px}
@supports not (backdrop-filter:blur(1px)){.profile-card{background:#090909ed}}
@media(hover:hover){.socials span{transition:background .18s,color .18s}.socials span:hover{background:#d8d8d2;color:#000}}
@media(max-width:1100px){.car{right:-17%;bottom:1%;width:70%}.bike{right:14%;bottom:-2%;width:57%}}
@media(max-width:760px) and (orientation:portrait){main{background:radial-gradient(ellipse at 56% 77%,#292929 0,#0b0b0b 48%,#050505 77%)}main:after{background:linear-gradient(180deg,#050505 0 14%,transparent 52%),linear-gradient(90deg,#050505a8 0,transparent 80%)}.car{right:-50%;bottom:15%;width:132%;opacity:.65}.bike{right:-13%;bottom:-2%;width:108%;opacity:.78}.profile-card{top:48%;width:min(360px,calc(100vw - 32px));padding:28px 22px 22px;background:#05050582}.avatar{width:96px;margin-bottom:21px}.profile-card blockquote{margin-bottom:23px;font-size:15px}.socials span{height:50px}.socials span:nth-child(1) svg{width:21px;height:21px}.socials span:nth-child(2) svg{width:24px;height:24px}.socials span:nth-child(3) svg{width:27px;height:27px}.socials span:nth-child(4) svg{width:22px;height:22px}}
@media(max-width:480px) and (orientation:portrait){.car{right:-61%;bottom:18%;width:155%}.bike{right:-20%;bottom:0;width:124%}.profile-card{width:calc(100vw - 28px);padding-inline:18px}}
@media(max-height:560px) and (orientation:landscape){main{min-height:100svh}.car{right:-5%;bottom:-12%;width:51%}.bike{right:28%;bottom:-15%;width:39%}.profile-card{top:52%;width:340px;padding:18px 22px 15px}.avatar{width:66px;margin-bottom:12px;font-size:27px}.profile-card blockquote{margin-bottom:12px;font-size:13px}.socials span{height:42px}}
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){.car{right:-32%;bottom:13%;width:94%}.bike{right:2%;bottom:0;width:76%}}
