*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",sans-serif;
}

html,body{
width:100%;
height:100%;
overflow:hidden;
}

body{
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(circle at 20% 20%,rgba(112,0,255,.35),transparent 40%),
radial-gradient(circle at 80% 30%,rgba(0,180,255,.30),transparent 35%),
radial-gradient(circle at 50% 80%,rgba(255,0,200,.18),transparent 40%),
linear-gradient(180deg,#02020a 0%,#050514 35%,#070720 70%,#000 100%);
color:#fff;
position:relative;
}

/* STARS */

body::before{

content:"";

position:absolute;

inset:0;

background-image:

radial-gradient(2px 2px at 10% 20%,#fff,transparent),

radial-gradient(2px 2px at 30% 80%,#fff,transparent),

radial-gradient(1px 1px at 60% 15%,#fff,transparent),

radial-gradient(2px 2px at 80% 35%,#fff,transparent),

radial-gradient(1px 1px at 95% 75%,#fff,transparent),

radial-gradient(2px 2px at 45% 50%,#fff,transparent),

radial-gradient(1px 1px at 70% 65%,#fff,transparent),

radial-gradient(2px 2px at 15% 70%,#fff,transparent),

radial-gradient(1px 1px at 88% 10%,#fff,transparent),

radial-gradient(2px 2px at 55% 92%,#fff,transparent);

animation:stars 8s linear infinite;

opacity:.85;

}

/* NEBULA */

.background{

position:fixed;

inset:-20%;

background:

radial-gradient(circle,#6a00ff55 0%,transparent 45%),

radial-gradient(circle,#00d9ff40 0%,transparent 35%),

radial-gradient(circle,#ff00c840 0%,transparent 40%);

background-size:35% 35%,40% 40%,45% 45%;

background-position:20% 30%,80% 20%,50% 75%;

filter:blur(80px);

animation:nebulaMove 18s ease-in-out infinite alternate;

z-index:0;

}

.container{

position:relative;

z-index:5;

text-align:center;

padding:40px;

max-width:900px;

}


.logo{

margin-bottom:35px;

animation:floatLogo 5s ease-in-out infinite;

}

.logo img{

width:180px;

max-width:65vw;

display:block;

margin:auto;

filter:
drop-shadow(0 0 15px rgba(0,255,255,.45))
drop-shadow(0 0 35px rgba(150,0,255,.35));

}

h1{

font-size:68px;

font-weight:700;

line-height:1.25;

letter-spacing:2px;

margin-bottom:55px;

background:linear-gradient(90deg,#ffffff,#9ce7ff,#d8b6ff,#ffffff);

background-size:300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:textGlow 8s linear infinite;

text-shadow:

0 0 15px rgba(255,255,255,.15),

0 0 35px rgba(0,200,255,.25);

}

button{

padding:20px 85px;

font-size:22px;

font-weight:700;

letter-spacing:3px;

color:#ffffff;

border:1px solid rgba(255,255,255,.25);

border-radius:60px;

cursor:pointer;

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

box-shadow:
0 0 20px rgba(0,225,255,.20),
0 0 40px rgba(140,80,255,.20);

transition:.35s ease;

}

button:hover{

transform:translateY(-4px) scale(1.05);

background:rgba(255,255,255,.14);

box-shadow:
0 0 30px rgba(0,225,255,.45),
0 0 60px rgba(140,80,255,.40);

}

button:active{

transform:scale(.98);

}

@keyframes stars{

0%{
transform:translateY(0);
}

100%{
transform:translateY(-40px);
}

}

@keyframes nebulaMove{

0%{
transform:rotate(0deg) scale(1);
}

100%{
transform:rotate(8deg) scale(1.25);
}

}

@keyframes floatLogo{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

@keyframes textGlow{

0%{
background-position:0%;
}

100%{
background-position:300%;
}

}

@keyframes buttonFlow{

0%{
background-position:0%;
}

100%{
background-position:250%;
}

}

@media(max-width:768px){

.logo img{

width:130px;

}

h1{

font-size:34px;

padding:0 15px;

}

button{

width:90%;

padding:17px;

font-size:18px;

}

}