<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Feliz Mes</title>
<style>
body {
    margin: 0;
    height: 100vh;
    background: #ffe6f0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
h1 {
    color: #ff4da6;
    font-size: 2em;
    margin-bottom: 20px;
}
p {
    color: #ff1a75;
    font-size: 1.2em;
    max-width: 90%;
}
.heart {
    position: absolute;
    color: #ff4da6;
    font-size: 24px;
    animation: fall 5s linear infinite;
}
@keyframes fall {
    0% { transform: translateY(-50px) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}
</style>
</head>
<body>

<h1>Feliz primer mes ❤️</h1>
<p>Hoy cumplimos un mes juntos y cada momento contigo me hace increíblemente feliz. Gracias por hacer mi vida más dulce y llena de amor.</p>

<audio autoplay loop>
<source src="data:audio/mp3;base64,//TU MÚSICA EN BASE64 AQUÍ" type="audio/mp3">
</audio>

<script>
function createHeart() {
const heart = document.createElement('div');
heart.className = 'heart';
heart.textContent = '❤️';
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.fontSize = (Math.random() * 30 + 20) + 'px';
heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
setInterval(createHeart, 300);
</script>

</body>
</html>