*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{

height:100vh;

overflow:hidden;

background:linear-gradient(135deg,#0f4c81,#74b9ff,#ffffff);

background-size:400% 400%;

animation:bg 15s infinite alternate;

display:flex;
justify-content:center;
align-items:center;
}

@keyframes bg{

0%{
background-position:left;
}

100%{
background-position:right;
}

}

.container{

position:relative;

z-index:2;

width:650px;

padding:60px;

text-align:center;

background:rgba(255,255,255,.15);

border:1px solid rgba(255,255,255,.4);

backdrop-filter:blur(15px);

border-radius:25px;

box-shadow:0 20px 60px rgba(0,0,0,.25);

animation:popup 1.2s ease;

}

@keyframes popup{

from{

opacity:0;
transform:scale(.7);

}

to{

opacity:1;
transform:scale(1);

}

}

.logo{

font-size:90px;

animation:float 3s infinite ease-in-out;

}

@keyframes float{

50%{
transform:translateY(-15px);
}

}

.brand{

color:#fff;

letter-spacing:8px;

margin-top:10px;

font-size:20px;

font-weight:700;

text-shadow:2px 2px 10px #000;

}

h1{

font-size:42px;

color:#fff;

margin-top:15px;

font-weight:800;

text-shadow:2px 2px 20px rgba(0,0,0,.4);

}

p{

margin-top:20px;

font-size:20px;

color:#fff;

letter-spacing:1px;

animation:fade 2s infinite alternate;

}

@keyframes fade{

100%{

opacity:.5;

}

}

.btn{

display:inline-block;

margin-top:40px;

padding:18px 45px;

background:#fff;

color:#1565c0;

font-size:20px;

font-weight:700;

border-radius:50px;

text-decoration:none;

transition:.4s;

}

.btn:hover{

transform:translateY(-5px);

background:#1565c0;

color:#fff;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}

#particles{

position:absolute;

width:100%;
height:100%;

overflow:hidden;

}

.circle{

position:absolute;

border-radius:50%;

background:rgba(255,255,255,.5);

animation:move linear infinite;

}

@keyframes move{

from{

transform:translateY(120vh) scale(.2);

}

to{

transform:translateY(-120vh) scale(1.2);

}

}

@media(max-width:700px){

.container{

width:90%;
padding:40px 25px;

}

h1{

font-size:30px;

}

.brand{

font-size:18px;

}

p{

font-size:16px;

}

}