@font-face {  
    font-family: 'Grecian Fuemen';  
    src: url('./fonts/GrechenFuemen-Regular.ttf') format('truetype'); /* Asegúrate de que la ruta sea correcta */  
    font-weight: normal;  
    font-style: normal;  
}  

body {  
    font-family: 'Grecian Fuemen', serif; /* Aplicar la fuente a todo el body */  
    
}
body {  
    font-family: 'Grecian Fuemen', serif;  
    font-size: 50px; /* Cambia el tamaño de la fuente a 18px (ajusta según necesites) */  
}
.lyrics {  
    font-family: 'Grecian Fuemen', serif; /* Usa la fuente que configuraste */  
    font-size: 24px; /* Ajusta el tamaño de la fuente a tu gusto */  
    margin-bottom: 10px; /* Espacio entre estrofas */  
}
/* Fondo de la página */  
body {  
    margin: 0;  
    height: 100vh;  
    background: linear-gradient(to top, #000000, #330000, #660000, #da3d3d);  
    overflow: hidden;  
    font-family: 'Grechen Fuemen', sans-serif;  
}  

/* Letras */  
.lyrics {  
    font-size: 2rem;  
    text-align: center;  
    color: rgb(14, 13, 13);  
    position: absolute;  
    opacity: 0;  
    transition: opacity 1s ease-in-out;  
}  

/* Animación de las flores */  
.flower {  
    position: absolute;  
    bottom: 0;  
    width: 250px;  
    height: 600px;  
    opacity: 1;  
    animation: grow 4s ease-in-out forwards, sway 3s infinite ease-in-out alternate 4s;  
}  

/* Animación de los pétalos */  
.petal {  
    position: absolute;  
    width: 25px;  
    height: 25px;  
    background-color: red;  
    clip-path: polygon(50% 0%, 61% 15%, 78% 15%, 88% 25%, 88% 42%, 50% 100%, 12% 42%, 12% 25%, 22% 15%, 39% 15%);  
    animation: float 6s infinite ease-in-out;  
    opacity: 0.8;  
    z-index: 15;  
}  

/* Animaciones */  
@keyframes grow {  
    0% {  
        transform: scaleY(0) translateY(100px);  
        opacity: 0;  
    }  
    100% {  
        transform: scaleY(1) translateY(0);  
        opacity: 1;  
    }  
}  
@keyframes sway {  
    0% {  
        transform: translateX(-5px) rotate(-3deg);  
    }  
    100% {  
        transform: translateX(5px) rotate(3deg);  
    }  
}  
@keyframes float {  
    0% {  
        transform: translate(0, 0);  
    }  
    100% {  
        transform: translate(-50px, 200px) rotate(180deg);  
        opacity: 0;  
    }  
}  

/* Música */  
audio {  
    position: absolute;  
    bottom: 10px;  
    left: 10px;  
}
/* Estilo de las líneas de la canción */  
.lyrics {  
    font-size: 2rem;  
    text-align: center;  
    color: white;  
    position: absolute;  
    width: 100%;  
    top: 20%;  
    opacity: 0;  
    transition: opacity 1s ease-in-out;  
}  

/* Mensaje interactivo al centro */  
#audio-message {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    color: white;  
    background-color: rgba(0, 0, 0, 0.6);  
    padding: 10px 20px;  
    border-radius: 5px;  
    font-family: 'Arial', sans-serif;  
    font-size: 1.5rem;  
    text-align: center;  
    z-index: 100;  
}