/* Código fuente*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');


/* Propiedades de la imagen de fondo */

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evitar scroll horizontal */
}


section {
    height: 100vh; 
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; 
}



/* Bienvenida a la web */

h1 {
    position: fixed;
    top: 63%;
    right: 60px;
    font-family: 'Lora', serif;
    font-size: 2cm;
    font-style: italic;
    font-weight: bold;
    color: #000000ee;
    opacity: 50%;
}


/* Descripción debajo de la bienvenida */

#p1 {
    position: fixed;
    top: 79%; 
    right: 60px;
    font-family: 'Lora', serif;
    font-size: 0.5cm; 
    font-weight: normal; 
    color: #000000ee;
    opacity: 60%;
    text-align: right; 
    margin: 0; 
}


#p2 {
    position: fixed;
    top: 82%; 
    right: 60px;
    font-family: 'Lora', serif;
    font-size: 0.5cm; 
    font-weight: normal; 
    color: #000000ee;
    opacity: 60%;
    text-align: right; 
    margin: 0; 
}


#p3 {
    position: fixed;
    top: 85%; 
    right: 60px;
    font-family: 'Lora', serif;
    font-size: 0.5cm; 
    font-weight: normal; 
    color: #000000ee;
    opacity: 60%;
    text-align: right; 
    margin: 0; 
}


/* Imagen de fondo */

.image {
    background-image: url("lerone-pieters-ypwWpd8QhyM-unsplash.jpg")
}


/* Audio */

section.image audio {
    justify-content: center;
    position: absolute;
    bottom: 80px;     
    left: 50%;
    transform: translateX(-50%); /* Centra el audio*/
    width: 300px; 
    opacity: 40%;
    
}


/* Responsive Design: ajuste para pantallas más pequeñas de mayor a menor */

@media (max-height: 800px) {
    h1 {
        top: 45%;
        font-size: 1.5cm;
    }

    #p1 {
        top: 65%;
        font-size: 0.45cm;
    }

    #p2 {
        top: 68%;
        font-size: 0.45cm;
    }

    #p3 {
        top: 71%;
        font-size: 0.45cm;
    }
}



@media (max-height: 600px) {
    h1 {
        top: 40%;
        font-size: 1.2cm;
    }

    #p1 {
        top: 58%;
        font-size: 0.4cm;
    }

    #p2 {
        top: 61%;
        font-size: 0.4cm;
    }

    #p3 {
        top: 64%;
        font-size: 0.4cm;
    }
}



@media (max-height: 450px), (max-width: 450px) {
    h1 {
        top: 30%;
        font-size: 0.8cm;
    }

    #p1 {
        top: 45%;
        font-size: 0.3cm;
    }

    #p2 {
        top: 48%;
        font-size: 0.3cm;
    }

    #p3 {
        top: 51%;
        font-size: 0.3cm;
    }
}