*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family: 'Inter', sans-serif;

height:100vh;
overflow:hidden;

color:white;

display:flex;
align-items:center;
justify-content:center;

background: linear-gradient(130deg, #0a0f2c, #111a3a, #0a0f2c);
background-size: 400% 400%;

animation: gradientMove 40s ease infinite;

}


@keyframes gradientMove{

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

}


/* noise texture */

.noise{

position:absolute;
width:100%;
height:100%;

background-image:url("https://grainy-gradients.vercel.app/noise.svg");

opacity:.05;
pointer-events:none;

}


/* blobs */

.blob{

position:absolute;
border-radius:50%;
filter: blur(120px);
opacity:.2;

animation: float 30s infinite alternate ease-in-out;

}

.blob1{

width:400px;
height:400px;
background:#1c2fff;

top:10%;
left:20%;

}

.blob2{

width:300px;
height:300px;
background:#334dff;

bottom:10%;
right:15%;

animation-delay:10s;

}

.blob3{

width:250px;
height:250px;
background:#5c7bff;

top:60%;
left:60%;

animation-delay:20s;

}

@keyframes float{

from{ transform: translateY(0px);}
to{ transform: translateY(-80px);}

}


/* center container */

.container{

animation: fadeUp 1.4s ease forwards;

opacity:0;

}

@keyframes fadeUp{

to{

opacity:1;
transform:translateY(0);

}

from{

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

}

}



/* glass panel */

.glass{

padding:60px 80px;

background: rgba(255,255,255,0.05);

border-radius:24px;

border:1px solid rgba(255,255,255,0.1);

backdrop-filter: blur(20px);

box-shadow:
0 0 40px rgba(100,150,255,0.15);

text-align:center;

}



/* heading */

h1{

font-size:48px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}


/* animated text */

#animated-text{

font-size:20px;

font-weight:300;

opacity:.85;

margin-bottom:30px;

transition:

opacity .8s ease,
transform .8s ease,
filter .8s ease;

}



/* email */

.email{

font-size:16px;
color: white;
opacity:.6;

text-decoration:none;

transition: all .3s ease;

}

.email:hover{

opacity:1;

transform:scale(1.03);

text-shadow:
0 0 10px rgba(150,180,255,.8);

}



/* responsive */

@media(max-width:768px){

.glass{

padding:40px;

}

h1{

font-size:32px;

}

#animated-text{

font-size:16px;

}

}