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

body{
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(
        135deg,
        #050505,
        #0d0d0d,
        #181818,
        #101010
    );

    background-size:400% 400%;
    animation:bgMove 18s ease infinite;
}

/* Background Animation */

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* Glow */

body::before{

content:"";
position:absolute;
width:650px;
height:650px;
background:radial-gradient(circle,
rgba(255,255,255,.06),
transparent 70%);
filter:blur(90px);
animation:pulse 10s ease-in-out infinite;

}

@keyframes pulse{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.25);
}

}

/* Floating Circles */

.circle{

position:absolute;
border-radius:50%;
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
animation:float 10s ease-in-out infinite;

}

.circle:nth-child(1){

width:180px;
height:180px;
top:10%;
left:10%;

}

.circle:nth-child(2){

width:90px;
height:90px;
top:20%;
right:15%;
animation-delay:2s;

}

.circle:nth-child(3){

width:140px;
height:140px;
bottom:10%;
left:20%;
animation-delay:4s;

}

.circle:nth-child(4){

width:70px;
height:70px;
bottom:18%;
right:20%;
animation-delay:1s;

}

@keyframes float{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-30px);
}

}

/* Container */

.container{

position:relative;
z-index:10;
text-align:center;
animation:fadeUp 1.2s ease;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* Title */

h1{

font-size:84px;
font-weight:700;
letter-spacing:10px;
text-transform:uppercase;

background:linear-gradient(
90deg,
#5f5f5f 0%,
#ffffff 40%,
#ffffff 50%,
#5f5f5f 100%
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:
shimmer 12s linear infinite,
floatingText 5s ease-in-out infinite;

filter:drop-shadow(0 0 12px rgba(255,255,255,.15));

}

/* Slow Shimmer */

@keyframes shimmer{

0%{
background-position:-250%;
}

100%{
background-position:250%;
}

}

/* Floating Text */

@keyframes floatingText{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

}

/* Stars */

.star{

position:absolute;
width:3px;
height:3px;
background:white;
border-radius:50%;
opacity:.4;
animation:twinkle 4s infinite;

}

.star:nth-child(6){

left:20%;
top:25%;

}

.star:nth-child(7){

right:20%;
top:18%;
animation-delay:1s;

}

.star:nth-child(8){

left:65%;
bottom:20%;
animation-delay:2s;

}

.star:nth-child(9){

left:35%;
bottom:30%;
animation-delay:3s;

}

.star:nth-child(10){

left:50%;
top:15%;
animation-delay:4s;

}

@keyframes twinkle{

0%,100%{

opacity:.2;
transform:scale(1);

}

50%{

opacity:1;
transform:scale(2);

}

}

@media(max-width:768px){

h1{

font-size:46px;
letter-spacing:5px;

}

}