body{

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

background:#ece7f2;

text-align:center;

padding-top:60px;

}


.logo{

font-size:48px;

font-weight:600;

background:linear-gradient(
90deg,
#7c3aed,
#ff2e63,
#ff7a18
);

-webkit-background-clip:text;

color:transparent;

margin-bottom:5px;

}


.subtitle{

color:#555;

margin-bottom:30px;

}


.timer-card{

width:420px;

margin:auto;

padding:40px;

border-radius:25px;

background:linear-gradient(
45deg,
#a855f7,
#ff2e63
);

color:white;

box-shadow:0 10px 25px rgba(0,0,0,0.15);

}


#timer{

font-size:72px;

font-weight:600;

}


.progress-bar{

width:420px;

height:10px;

background:#d8d8d8;

margin:20px auto;

border-radius:20px;

overflow:hidden;

}


#progress{

height:100%;

width:0%;

background:linear-gradient(
90deg,
#7c3aed,
#ff7a18
);

transition:0.5s;

}


/* COUNTER */

.stats-card{

width:250px;

margin:20px auto;

padding:20px;

background:white;

border-radius:20px;

box-shadow:0 8px 20px rgba(0,0,0,0.08);

}


.stats-card p{

margin:0;

font-size:14px;

color:#666;

}


.stats-card h2{

margin-top:10px;

font-size:40px;

color:#7c3aed;

}


/* BUTTON */

button{

margin-top:20px;

padding:14px 40px;

border:none;

border-radius:14px;

font-size:18px;

font-weight:600;

cursor:pointer;

color:white;

background:linear-gradient(
45deg,
#7c3aed,
#ff2e63
);

transition:0.3s;

}


button:hover{

transform:scale(1.03);

}


/* DESC */

#desc{

margin-top:20px;

color:#6b21a8;

font-weight:500;

}


/* POPUP */

.popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.5);

display:none;

justify-content:center;

align-items:center;

z-index:999;

}


.popup-content{

background:white;

padding:40px;

border-radius:25px;

width:320px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,0.2);

}