*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:

#050510;

font-family:

Arial;

color:white;

overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

background:

radial-gradient(
circle,
rgba(139,46,255,.25),
transparent
);

right:-200px;

top:-150px;

filter:blur(80px);

z-index:-1;

}

nav{

display:flex;

justify-content:space-between;

padding:30px 8%;

}

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:120px 8%;

min-height:90vh;

}

.left{

max-width:600px;

}

.hero h1{

font-size:90px;

}

.hero p{

margin-top:30px;

font-size:24px;

opacity:.8;

line-height:1.5;

}

.buttons{

display:flex;

gap:20px;

margin-top:40px;

}

button{

padding:15px 30px;

background:#8B2EFF;

border:none;

border-radius:12px;

color:white;

cursor:pointer;

}

.secondary{

background:transparent;

border:1px solid white;

}

.stream-card{

width:500px;

height:300px;

background:

linear-gradient(
145deg,
#121221,
#070710
);

border-radius:25px;

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

box-shadow:

0 0 60px rgba(
139,
46,
255,
.4
);

}

.stats{

display:grid;

grid-template-columns:

repeat(3,1fr);

padding:100px 8%;

text-align:center;

}

.clips{

padding:120px 8%;

}

.clip-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:50px;

}

.clip{

height:220px;

border-radius:20px;

background:

rgba(
255,
255,
255,
.04
);

display:flex;

justify-content:center;

align-items:center;

}

.schedule{

padding:120px 8%;

text-align:center;

}

.schedule-box{

margin:auto;

width:500px;

padding:50px;

border-radius:25px;

background:

rgba(
255,
255,
255,
.04
);

}

footer{

padding:80px;

text-align:center;

}