body{
    margin:0;
    overflow:hidden;
    font-family:Arial, sans-serif;
    background:linear-gradient(
        135deg,
        #001f3f,
        #004080,
        #001f3f
    );
}

#mensaje{
    text-align:center;
    color:white;
    font-size:25px;
}

.galeria{
    position:relative;
    width:100%;
    height:70vh;
}

.galeria img{
    position:absolute;
    width:220px;
    height:220px;
    object-fit:cover;
    border-radius:20px;
    border:4px solid white;
    box-shadow:0 0 25px cyan;
    animation:flotar 10s infinite ease-in-out;
}

.galeria img:nth-child(1){
    left:5%;
    top:20%;
}

.galeria img:nth-child(2){
    left:25%;
    top:50%;
}

.galeria img:nth-child(3){
    left:45%;
    top:20%;
}

.galeria img:nth-child(4){
    left:65%;
    top:50%;
}

.galeria img:nth-child(5){
    left:85%;
    top:20%;
}

@keyframes flotar{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-30px);
    }

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

.heart{
    position:absolute;
    top:-50px;
    animation:caer linear forwards;
    pointer-events:none;
}

@keyframes caer{
    from{
        transform:translateY(-50px);
    }

    to{
        transform:translateY(110vh);
    }
}

.balloon{
    position:absolute;
    bottom:-150px;
    border-radius:50%;
    animation:subir linear forwards,
              parpadear 1s infinite alternate;
    pointer-events:none;
}

.balloon{
    position:absolute;
    bottom:-150px;
    animation:
        subir linear forwards,
        parpadear 1s infinite alternate;
    pointer-events:none;
}

@keyframes subir{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-120vh);
    }
}

@keyframes parpadear{
    from{
        filter:brightness(1);
    }
    to{
        filter:brightness(1.8);
    }
}

#playBtn{
    position:fixed;
    bottom:30px;
    right:30px;

    width:90px;
    height:90px;

    border:none;
    border-radius:50%;

    background:linear-gradient(
        45deg,
        #00ffff,
        #ff00ff
    );

    color:white;
    font-size:35px;
    cursor:pointer;

    box-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #ff00ff;

    animation:pulsar 1.5s infinite;
}

#playBtn{
    position:fixed;

    bottom:500px;
    right:20px;

    width:70px;
    height:70px;

    border:none;
    border-radius:50%;

    background:linear-gradient(
        45deg,
        #00ffff,
        #ff00ff
    );

    color:white;
    font-size:30px;
    cursor:pointer;

    z-index:10000;
}

@keyframes pulsar{

    0%{
        box-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff;
    }

    50%{
        box-shadow:
        0 0 30px #ff00ff,
        0 0 60px #ff00ff;
    }

    100%{
        box-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff;
    }
}

#titulo{
    text-align:center;
    margin-top:30px;

    font-size:70px;
    font-weight:bold;

    color:#ffffff;

    text-transform:uppercase;
    letter-spacing:5px;

    animation:brillar 2s infinite alternate;

    text-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 80px #00ffff,
        0 0 120px #00ffff;
}

@keyframes brillar{

    0%{
        text-shadow:
            0 0 10px #00ffff,
            0 0 20px #00ffff,
            0 0 40px #00ffff;
    }

    100%{
        text-shadow:
            0 0 20px #ff00ff,
            0 0 40px #ff00ff,
            0 0 80px #ff00ff,
            0 0 120px #ff00ff;
    }
}

#ledMessage{
    position:fixed;
    bottom:20px;
    width:100%;
}

.marquee{
    display:inline-block;
    padding-left:100%;
    white-space:nowrap;
    animation:scrollText 20s linear infinite;
}

@keyframes scrollText{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-200%);
    }
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px){

    #titulo{
        font-size:50px;
    }

    #mensaje{
        font-size:22px;
        width:90%;
    }

    .galeria img{
        width:160px;
        height:160px;
    }

    #playBtn{
        width:70px;
        height:100px;
        font-size:28px;
    }

}

/* =========================
   CELULAR
========================= */
@media (max-width: 768px){

    #titulo{
        font-size:35px;
        margin-top:20px;
        letter-spacing:2px;
    }

    #mensaje{
        font-size:18px;
        width:95%;
        line-height:1.5;
        margin:15px auto 0;
    }

    .galeria{
        position:static;
        width:100%;
        height:auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        gap:12px;
        padding:20px 10px;
        box-sizing:border-box;
    }

    .galeria img{
        position:relative;
        left:auto;
        top:auto;
        width:42vw;
        height:42vw;
        max-width:160px;
        max-height:160px;
        animation:none;
    }

    #playBtn{
        width:60px;
        height:60px;
        font-size:24px;
        bottom:15px;
        right:15px;
    }

    .balloon{
        transform:scale(0.8);
    }

}

/* =========================
   CELULARES PEQUEÑOS
========================= */
@media (max-width: 480px){

    #titulo{
        font-size:26px;
        letter-spacing:1px;
    }

    #mensaje{
        font-size:15px;
    }

    .galeria{
        gap:10px;
        padding:15px 8px;
    }

    .galeria img{
        width:40vw;
        height:40vw;
        max-width:130px;
        max-height:130px;
        border-width:3px;
    }

    #playBtn{
        width:50px;
        height:50px;
        font-size:20px;
        bottom:12px;
        right:12px;
    }

}