/* ==========================
   Google Font Styles
========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    overflow:hidden;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;

    background:linear-gradient(
        135deg,
        #8ec5fc 0%,
        #b8c6ff 30%,
        #d9a7ff 70%,
        #ffd1ff 100%
    );

    animation:bgMove 15s infinite alternate;
}

/* ==========================
   Animated Background
========================== */

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-10;
}

.background::before{
    content:"";
    position:absolute;
    width:160%;
    height:160%;
    background:
    radial-gradient(circle,#ffffff33 1px,transparent 1px);
    background-size:30px 30px;
    animation:stars 80s linear infinite;
}

/* ==========================
   Clouds
========================== */

.cloud{
    position:absolute;
    width:260px;
    height:90px;

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

    border-radius:100px;

    filter:blur(4px);
}

.cloud::before,
.cloud::after{

content:"";
position:absolute;
background:inherit;
border-radius:50%;

}

.cloud::before{

width:120px;
height:120px;

left:20px;
top:-45px;

}

.cloud::after{

width:140px;
height:140px;

right:20px;
top:-60px;

}

.cloud1{

top:15%;
left:-20%;

animation:cloudMove 45s linear infinite;

}

.cloud2{

top:45%;
left:-35%;

animation:cloudMove 70s linear infinite;

}

.cloud3{

top:70%;
left:-25%;

animation:cloudMove 60s linear infinite;

}

/* ==========================
Glass Card
========================== */

.glass{

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

padding:50px;

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

backdrop-filter:blur(18px);

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

border-radius:35px;

text-align:center;

box-shadow:

0 20px 60px rgba(0,0,0,.25),

0 0 40px rgba(255,255,255,.2);

animation:floatCard 4s ease-in-out infinite;

}

/* ==========================
Typography
========================== */

.heart-icon{

font-size:55px;

margin-bottom:20px;

animation:heartbeat 1.8s infinite;

}

h1{

font-family:"Great Vibes",cursive;

font-size:3rem;

margin-bottom:10px;

}

.subtitle{

font-size:1.1rem;

opacity:.9;

margin-bottom:45px;

}

/* ==========================
Countdown
========================== */

.countdown{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:45px;

}

.box{

width:120px;

height:120px;

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

border-radius:25px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

box-shadow:0 10px 25px rgba(255,255,255,.15);

transition:.4s;

}

.box:hover{

transform:translateY(-8px);

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

}

.box h2{

font-size:2.3rem;

}

.box span{

margin-top:5px;

font-size:.95rem;

opacity:.8;

}

/* ==========================
Date
========================== */

.unlock{

font-weight:300;

margin-bottom:8px;

}

.date{

font-size:2rem;

margin-bottom:25px;

color:#fff5ff;

}

/* ==========================
Lock
========================== */

.lock{

font-size:2rem;

animation:heartbeat 2s infinite;

}

.lock p{

font-size:1rem;

margin-top:10px;

}

/* ==========================
Footer
========================== */

footer{

margin-top:40px;

font-style:italic;

opacity:.85;

}

/* ==========================
Floating Hearts
========================== */

.floating-hearts span{

position:absolute;

bottom:-80px;

font-size:24px;

opacity:.6;

animation:rise 18s linear infinite;

}

.floating-hearts span:nth-child(1){

left:10%;

animation-delay:0s;

}

.floating-hearts span:nth-child(2){

left:28%;

animation-delay:4s;

}

.floating-hearts span:nth-child(3){

left:50%;

animation-delay:8s;

}

.floating-hearts span:nth-child(4){

left:70%;

animation-delay:2s;

}

.floating-hearts span:nth-child(5){

left:88%;

animation-delay:6s;

}

/* ==========================
Animations
========================== */

@keyframes rise{

0%{

transform:translateY(0) scale(.6);

opacity:0;

}

20%{

opacity:.7;

}

100%{

transform:translateY(-120vh) scale(1.4);

opacity:0;

}

}

@keyframes heartbeat{

50%{

transform:scale(1.15);

}

}

@keyframes cloudMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(160vw);

}

}

@keyframes floatCard{

50%{

transform:translateY(-8px);

}

}

@keyframes stars{

from{

transform:translateY(0);

}

to{

transform:translateY(-500px);

}

}

@keyframes bgMove{

0%{

background-position:left;

}

100%{

background-position:right;

}

}

/* ==========================
Responsive
========================== */

@media(max-width:768px){

.glass{

padding:35px;

}

.box{

width:90px;
height:90px;

}

.box h2{

font-size:1.7rem;

}

h1{

font-size:2.2rem;

}

.subtitle{

font-size:.95rem;

}

.date{

font-size:1.6rem;

}

}