/* styles.css */

/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;

}
.imagfr1 {
 margin-left: 20px;
margin-top: 20px;
}

/* Fondo y colores */
body {
    background-color: #f0f0f0;
    color: #f5f5f5;
}

/* Cabecera */
header {
    background-image: url(fondomh.jpg);
            background-position: center; /* Centra la imagen */
            background-attachment: vertical-align; /* Fija el fondo mientras se hace scroll */
            margin: 4;
            height: 70vh;
    padding: 20px 0;
    text-align: center;
    .imgf-1{
        width: 250px;
        height: 310px;
        position: relative;
     top: -50px;  /* Mueve la imagen hacia abajo */
     left: -10px; /* Mueve la imagen hacia la derecha */

       }
       .imgl-1{
        width: 210px;
        height: 300px;
        position: relative;
    top: -50px;  /* Mueve la imagen hacia abajo */
    left:630px; /* Mueve la imagen hacia la derecha */
       }
       .imgw-1{
          width: 170px;
         height: 300px;
         position: relative;
         top: -50px;  /* Mueve la imagen hacia abajo */
         left: 30px; /* Mueve la imagen hacia la derecha */
       }
       .imgc-1{
        width: 195px;
        height: 300px;
        position: relative;
    top: -50px;  /* Mueve la imagen hacia abajo */
    left: 510px; /* Mueve la imagen hacia la derecha */
       }

    .imgd-1{
            width: 175px;
            height: 300px;
            position: relative;
           top: -50px;  /* Mueve la imagen hacia abajo */
         left: -470px; /* Mueve la imagen hacia la derecha */     
    }
    .imgg-1 {
        width: 290px;
        height: 310px;
        position: relative;
       top: -50px;  /* Mueve la imagen hacia abajo */
     left: 305px; /* Mueve la imagen hacia la derecha */
     
    }
    .imgMH-1 {
        width: 260px;
        height: 310px;
        position: relative;
       top: -50px;  /* Mueve la imagen hacia abajo */
     left: -500px; /* Mueve la imagen hacia la derecha */
    }
}

header h1 {
    font-size: 2em;
    font-family: 'url(DevilCandle_PERSONAL_USE_ONLY.otf)';
    text-transform: uppercase;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    text-transform: uppercase;
}

/* Hero Section */
.hero {
    background-image: url(fondomh2.jpg);
    color: white;
    padding: 120px 0 ;
    text-align: center;
    background-size: cover;
}

.hero h2 {
    font-size: 2.5em;
    font-family: 'Comic Sans MS', sans-serif;
}

.hero p {
    font-size: 1.2em;
}