@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

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

body{

    margin:0;
    width:100%;
    min-height:100dvh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#050505;

    overflow:hidden;

    position:relative;

    color:#fff;

background-image:
radial-gradient(circle at top,#ff2d7a22,transparent 40%);
}

/* Pink Glow Background */

body::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:#ff2d7a;
    filter:blur(180px);
    top:-180px;
    right:-120px;
    opacity:.35;
    z-index:0;
}

body::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#ff5fa2;
    filter:blur(180px);
    bottom:-180px;
    left:-120px;
    opacity:.25;
    z-index:0;
}

/* Stars */

.stars{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 10px #fff;
    animation:fall linear infinite;
}

@keyframes fall{

0%{
transform:translateY(-100vh);
opacity:0;
}

20%{
opacity:1;
}

100%{
transform:translateY(110vh);
opacity:0;
}

}

/* Card */

.container{
    width:min(92%,760px);
    margin:auto;
    padding:40px 20px;
    position:relative;
    z-index:10;
    overflow:hidden;

    text-align:center;

    border-radius:28px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(18px);

    box-shadow:0 0 60px rgba(255,20,147,.3);
}

/* Heading */

h1{

    font-size:60px;

    color:#ff6aa9;

    text-shadow:
    0 0 15px #ff2d7a,
    0 0 35px #ff2d7a;

    margin-bottom:15px;

}

p{

    color:#ffd6e8;

    margin-bottom:40px;

    font-size:18px;

}

/* Countdown */

.countdown{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

flex-wrap:nowrap;

width:100%;

overflow:hidden;

}

.box{

flex:1;

max-width:120px;

min-width:68px;

height:100px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

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

border-radius:18px;

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

transition:.35s;
}

.box:hover{

transform:translateY(-10px);

box-shadow:
0 0 35px #ff2d7a;

}

.box span{

font-size:46px;
font-weight:bold;
color:white;

text-shadow:0 0 15px #ff2d7a;

}

.box small{

margin-top:8px;
color:#ffc2dc;
letter-spacing:1px;

}

/* Button */

button{

margin-top:35px;

width:fit-content;

max-width:100%;

padding:16px 38px;

border:none;

border-radius:50px;

background:linear-gradient(45deg,#ff2d7a,#ff7eb3);

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.4s;

-webkit-tap-highlight-color:transparent;

outline:none;

box-shadow:
0 0 20px #ff2d7a,
0 0 40px rgba(255,45,122,.5);

}

@media (hover:hover){

button:hover{

transform:scale(1.08);

box-shadow:
0 0 25px #ff2d7a,
0 0 60px #ff2d7a,
0 0 90px #ff2d7a;

}

}

button:focus{

outline:none;

box-shadow:none;

}

button:focus-visible{

outline:none;

}

button:active{

transform:scale(0.97);

}


/* ================= Mobile ================= */

@media (max-width:768px){

.container{

width:95%;

padding:25px 12px;

}

h1{

font-size:32px;

}

p{

font-size:14px;

margin-bottom:25px;

}

.countdown{

gap:6px;

}

.box{

flex:1;

max-width:75px;

min-width:65px;

height:78px;

}

.box span{

font-size:24px;

}

.box small{

font-size:10px;

}

button{

width:100%;
max-width:280px;
margin-top:30px;

}

}

button:focus{
    outline:none;
    box-shadow:none;
}

button:focus-visible{
    outline:none;
}

button:active{
    transform:scale(0.97);
}

#memoryBtn{

    position:fixed;

    top:20px;

    right:20px;

    z-index:999;

    padding:12px 22px;

    border:none;

    border-radius:50px;

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

    border:2px solid #ff5fa2;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    backdrop-filter:blur(12px);

    box-shadow:0 0 20px rgba(255,45,122,.5);

    transition:.3s;

}

#memoryBtn:hover{

    transform:scale(1.08);

    background:#ff2d7a;

    box-shadow:0 0 30px #ff2d7a;

}

@media (max-width:768px){

#memoryBtn{

    top:15px;

    right:15px;

    padding:10px 30px;

    font-size:13px;
    
}

}

#openSection{

    display:none;

    margin-top:35px;

    animation:fadeIn 1s ease;

}

#openSection h2{

    color:#ff6aa9;

    margin-bottom:15px;

    text-shadow:0 0 20px #ff2d7a;

}

#openSection p{

    color:#ffd6e8;

    margin-bottom:25px;

    font-size:18px;

}

#openHeartBtn{

    background:linear-gradient(45deg,#ff2d7a,#ff7eb3);

}