* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}


body {

height:100vh;
overflow:hidden;

background:#000;
color:white;

}


/* STAR BACKGROUND */

#stars {

position:fixed;
inset:0;

z-index:0;

overflow:hidden;

}


.star {

position:absolute;

background:white;

border-radius:50%;

will-change:transform,opacity;

animation:
floatStars linear infinite,
twinkle ease-in-out infinite;

}


@keyframes floatStars {

0% {

transform:translate3d(0,110vh,0);

}

100% {

transform:translate3d(var(--drift),-120vh,0);

}

}



@keyframes twinkle {

0%,100% {

opacity:.2;

transform:scale(1);

}

50% {

opacity:1;

transform:scale(1.8);

}

}



/* SHOOTING STARS */


#shooting-stars {

position:fixed;

inset:0;

z-index:1;

pointer-events:none;

}



.shooting-star {

position:absolute;

height:2px;

width:180px;

background:linear-gradient(
90deg,
transparent,
white
);

transform:rotate(-35deg);

animation:shoot 1.4s linear forwards;

}



@keyframes shoot {

from {

opacity:1;

transform:
translate(0,0)
rotate(-35deg);

}

to {

opacity:0;

transform:
translate(-600px,600px)
rotate(-35deg);

}

}



/* MAIN */


.container {

position:relative;

z-index:3;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;


animation:intro 2s cubic-bezier(.2,.8,.2,1);

}



@keyframes intro {


0% {

opacity:0;

transform:
scale(.85)
translateY(40px);

filter:blur(25px);

}


60% {

opacity:1;

filter:blur(0);

}


100% {

transform:
scale(1)
translateY(0);

}

}



h1 {

font-size:clamp(60px,8vw,100px);

font-weight:900;

letter-spacing:-5px;

animation:titleFocus 2s ease;

}



@keyframes titleFocus {

from {

filter:blur(20px);

letter-spacing:20px;

opacity:0;

}

to {

filter:blur(0);

letter-spacing:-5px;

opacity:1;

}

}



.subtitle {

color:#aaa;

font-size:20px;

letter-spacing:6px;

margin-top:10px;

opacity:0;

animation:fadeUp 1s forwards;

animation-delay:.8s;

}



@keyframes fadeUp {

to {

opacity:1;

transform:translateY(0);

}

from {

opacity:0;

transform:translateY(20px);

}

}



/* BUTTONS */


.buttons {

display:flex;

gap:40px;

margin-top:60px;

}



.card {

width:160px;

height:160px;

background:

rgba(255,255,255,.07);


border:

1px solid rgba(255,255,255,.18);


border-radius:25px;


display:flex;

justify-content:center;

align-items:center;

flex-direction:column;


text-decoration:none;

color:white;


backdrop-filter:blur(18px);


opacity:0;

animation:
cardIn .8s forwards;


transition:.35s;

}



.card:nth-child(1){

animation-delay:1s;

}


.card:nth-child(2){

animation-delay:1.2s;

}


.card:nth-child(3){

animation-delay:1.4s;

}



@keyframes cardIn {

from {

opacity:0;

transform:
translateY(60px)
scale(.8);

filter:blur(10px);

}

to {

opacity:1;

transform:
translateY(0)
scale(1);

filter:blur(0);

}

}



.card:hover {

transform:

translateY(-12px)
scale(1.08);


background:

rgba(255,255,255,.15);


box-shadow:

0 0 50px rgba(255,255,255,.35);

}



/* ICONS */


.icon {

width:75px;

height:75px;

border-radius:50%;


display:flex;

justify-content:center;

align-items:center;


margin-bottom:15px;


position:relative;

overflow:hidden;


}



.icon svg {

width:42px;

height:42px;

fill:black;

z-index:3;

}




/* YOUTUBE */


.youtube {

background:white;

}




/* DISCORD */


.discord {

background:#5865F2;

}


.discord svg {

fill:white;

}



/* TIKTOK */


.tiktok {

background:black;

overflow:visible;

}


.tiktok svg {

fill:white;

position:relative;

z-index:3;

}



.tiktok-layer {

position:absolute;

width:42px;

height:42px;

background:white;

mask:url(#);

}



.tiktok .red {

transform:

translate(3px,2px);

filter:

drop-shadow(3px 0 red);

}


.tiktok .cyan {

transform:

translate(-3px,-2px);

filter:

drop-shadow(-3px 0 cyan);

}



small {

font-size:14px;

color:#ddd;

}



/* MOBILE */


@media(max-width:700px){

.buttons {

flex-direction:column;

gap:20px;

}

}