@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

*{box-sizing:border-box}
body{
 margin:0;
 min-height:100vh;
 color:white;
 font-family:"Space Grotesk",sans-serif;
 background:#070a25;
 overflow-x:hidden;
}
.bg{
 position:fixed;
 inset:0;
 background:
 radial-gradient(circle at 70% 30%,#ff315655,transparent 30%),
 radial-gradient(circle at 20% 80%,#00ff8855,transparent 30%);
 z-index:-1;
}
header{
 display:flex;
 justify-content:space-between;
 padding:30px 6%;
 font-weight:700;
}
.brand{font-size:28px;color:#ff4050}
.mini{opacity:.7}
.hero{
 min-height:85vh;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 padding:4% 6%;
 align-items:center;
}
.content{
 background:#111632dd;
 border:1px solid #ffffff22;
 padding:45px;
 box-shadow:0 30px 80px #0008;
}
h1{
 font-size:clamp(55px,8vw,110px);
 line-height:.8;
 margin:0 0 25px;
}
h1 span{color:#ff4050}
p{font-size:20px;color:#d7d9ed}
.socials{
 display:flex;
 flex-wrap:wrap;
 gap:15px;
 margin:30px 0;
}
.socials a{
 display:flex;
 align-items:center;
 gap:12px;
 background:white;
 color:#111;
 padding:14px 22px;
 text-decoration:none;
 font-weight:700;
 transition:.3s;
}
.socials a:hover{
 transform:translateY(-8px) rotate(-2deg);
}
.socials img{
 width:32px;
 height:32px;
 object-fit:contain;
}
.contract{
 border:1px solid #ff4050;
 padding:20px;
}
.contract label{color:#ff4050}
#ca{
 margin:15px 0;
 word-break:break-all;
}
button{
 padding:12px 25px;
 cursor:pointer;
}
.character{
 position:relative;
 display:grid;
 place-items:center;
}
.character img{
 width:min(600px,100%);
 position:relative;
 animation:float 5s infinite;
}
.circle{
 position:absolute;
 width:70%;
 aspect-ratio:1;
 background:#ff405044;
 filter:blur(80px);
}
.about{
 margin:0 6% 50px;
 padding:40px;
 background:#111632dd;
}
@keyframes float{
50%{transform:translateY(-25px)}
}
@media(max-width:800px){
.hero{grid-template-columns:1fr}
}