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

body{

height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background:#0a4c2d;

}

.bg{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;

background:
linear-gradient(rgba(0,60,25,.70),rgba(0,60,25,.70)),
url("../images/banner.png") center center;

background-size:cover;
filter:blur(15px) brightness(.45);
transform:scale(1.15);

}

.glass{

position:relative;
z-index:5;

width:90%;
max-width:1200px;

padding:30px;

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

backdrop-filter:blur(20px);

border-radius:25px;

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,.45);

animation:up 1.2s;

}

.banner{

width:100%;
max-width:950px;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.35);

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

}

@keyframes float{

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

}

h1{

margin-top:25px;

font-size:60px;

color:#fff;

text-shadow:0 0 15px #FFD700;

animation:glow 2s infinite alternate;

}

@keyframes glow{

from{text-shadow:0 0 10px #fff;}

to{text-shadow:0 0 30px gold;}

}

p{

color:#fff;

font-size:22px;

margin:20px auto;

max-width:700px;

line-height:35px;

}

#countdown{

display:flex;

justify-content:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

}

#countdown div{

width:120px;

padding:18px;

background:#ffffff18;

border-radius:15px;

color:white;

backdrop-filter:blur(10px);

}

#countdown span{

font-size:40px;

font-weight:bold;

display:block;

color:#FFD700;

}

small{

font-size:18px;

}

@keyframes up{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

@media(max-width:768px){

h1{

font-size:36px;

}

.banner{

width:100%;

}

p{

font-size:18px;

line-height:28px;

}

#countdown div{

width:80px;

padding:12px;

}

#countdown span{

font-size:26px;

}

}