:root{
    --pink:#FF3E7F;
    --tangerine:#FF9F1C;
    --yellow:#FFD23F;
    --sky:#3EC9F1;
    --plum:#2B1B3D;
    --white:#FFFFFF;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--plum);
    color:var(--white);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
}

/* Background Blobs */
body::before,
body::after{
    content:"";
    position:absolute;
    border-radius:50%;
    opacity:.25;
    filter:blur(5px);
}

body::before{
    width:260px;
    height:260px;
    background:var(--pink);
    top:-80px;
    left:-80px;
}

body::after{
    width:220px;
    height:220px;
    background:var(--sky);
    bottom:-70px;
    right:-60px;
}

.container{
    width:90%;
    max-width:700px;
    background:rgba(255,255,255,.06);
    border:5px solid var(--yellow);
    border-radius:28px;
    padding:40px;
    backdrop-filter:blur(8px);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    text-align:center;
    position:relative;
    z-index:2;
}

.container h1{
    font-size:2.2rem;
    color:var(--yellow);
    margin-bottom:30px;
}

.info{
    display:grid;
    gap:18px;
    margin-bottom:30px;
}

.info div{
    background:rgba(255,255,255,.08);
    border-radius:18px;
    padding:18px;
    border:2px solid rgba(255,255,255,.08);
    transition:.25s;
}

.info div:hover{
    transform:translateY(-4px);
    border-color:var(--pink);
}

.info h3{
    color:var(--sky);
    margin-bottom:8px;
    font-size:1rem;
}

.info p{
    color:white;
    font-size:1.05rem;
    word-break:break-word;
}

.btn{
    display:inline-block;
    padding:14px 34px;
    background:var(--yellow);
    color:var(--plum);
    border-radius:999px;
    font-weight:700;
    text-decoration:none;
    transition:.2s;
}

.btn:hover{
    background:var(--pink);
    color:white;
    transform:translateY(-3px) scale(1.05);
}

footer{
    margin-top:30px;
    opacity:.6;
    font-size:.9rem;
}

/* Floating animation */
.container{
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

@media(max-width:600px){

.container{
    padding:28px 20px;
}

.container h1{
    font-size:1.7rem;
}

.info p{
    font-size:.95rem;
}

}