@media screen and (max-width: 768px) {
    .item-galeria {
        flex: 0 0 calc(100% - 2%);
    }
}/* Estilos generales */
* {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Clase para elementos de audio */
.audio {
    position: fixed;
    top: 10%;
    left: 90%;
    z-index: 1;
}
.audio.playing {
    animation: bounce 0.5s infinite alternate; /* Agrega la animación de salto */
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Altura máxima del salto */
    }
}
.botonAudio {
    width: 80%;
    height: 80%;
    cursor: pointer;
}

.hidden {
    display: none;
}

/* Estilo para la sección de la portada */
.portada {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    background-image: url('/img/more15.jpg');
    background-size: auto 100%;
    background-position: center center;
    border: 0.2rem solid #FF00FF;
    padding: 2% 5%; 
    margin: 2%;
    
}

.logo-portada {
    padding: 2%;
}

.logo-title {
    font-size: 5em;
    margin-bottom: 1rem;
    font-weight: bold;
    -webkit-text-stroke: 0.2rem #ff00ff; /* Borde de color fucsia con un grosor de 2 píxeles (para navegadores WebKit) */
     
    
}

.logo-subtitle {
    font-size: 3.5em;
    color: #fff; /* Color del texto interior */
  -webkit-text-stroke: 0.2rem #ff00ff;
}

/* Estilo para la sección de la cuenta regresiva */
.cuenta-regresiva {
    background-color: #FF00FF;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 2rem;
    border: 2px solid green;
    padding: 2%; 
    margin: 2;
}

.cuenta-regresiva p:first-child {
    font-size: 3rem;
    margin-bottom: 10px;
}

.cuenta-regresiva p:last-child {
    font-size: 3rem;
    margin-top: 10px;
}

/* Estilo para la sección de Ceremonia y Fiesta */
.ceremonia-fiesta {
    background-color: white;
    text-align: center;
    padding: 20px;
    border: 2px solid #FF00FF; 
    padding: 20px; 
    margin: 20px;
   
  }

.ceremonia-fiesta img {
    width: 6em;
    height: auto;
    animation: fadeInOut 2s infinite;
}

.ceremonia-fiesta h4 {
    font-size: 3rem;
    color: black;
    margin: 10px 0;
}

.ceremonia-fiesta p {
    color: black;
    font-size: 1.5rem;
}

.ceremonia-fiesta .btn {
    background-color: green;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    font-size: 2rem;
}

/* Animación de desvanecimiento */
@keyframes fadeInOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Estilo para la sección de la galería */
.galeria {
    background-color: #FF00FF;
    padding: 2%;
    border: 0.2rem solid green;
    padding: 2%; 
    margin: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

.item-galeria {
    display: inline-block;
    text-align: center;
    padding: 1%;
    border:1% solid #ccc;
    margin: 2%;
    width: calc(22% - 2%);
    box-sizing: border-box;
    border: 0.2rem solid green;
    padding: 2%; 
    margin: 2%;
}

.item-galeria img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    max-width: 100%;
    max-height: 100%;
}

.item-galeria:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Estilo para la sección Confirmar Asistencia */
.confirmar-asistencia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    border:0.2rem solid #FF00FF;
    padding: 2%; 
    margin: 2%;
}

.confirmar-asistencia h4 {
    font-size: 3rem;
    font-weight: bold;
}

.confirmar-asistencia p {
    font-size: 2rem;
}

.confirmar-asistencia .btn {
    background-color: green;
    color: white;
    border: none;
    border-radius: 1rem;
    padding: 1% 2%;
    font-size: 2rem;
    text-decoration: none;
}

.confirmar-asistencia .btn:hover {
    background-color: darkgreen;
}

/* Estilo para la sección Dress Code */
.dresscode {
    background-color: #FF00FF;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    border: 0.2rem solid green;
    padding: 2%; 
    margin: 2%;
}

.dresscode img {
    width: 12rem;
    animation: bounce 2s infinite;
}

.dresscode h4 {
    font-size: 1.5rem;
    font-weight: bold;
}

.dresscode p {
    font-size: 1.5rem;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Estilo para la sección Instagram */
.parallax-instagram {
    position: relative;
    height: 100vh;
    color: white;
    text-align: center;
    border: 0.2rem solid #FF00FF;
    padding: 2%; 
    margin: 2%;
}

.parallax-instagram::before {
    content: "";
    background: linear-gradient(to top, rgba(46, 56, 61, 0.8), rgb(37, 43, 46)), url(/img/air-dance-dj-dutch-wallpaper-preview.webp);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: -1;
}

.parallax-instagram img {
    width: 12rem;
    animation: bounce-in 1s ease infinite;
}

.parallax-instagram h4 {
    font-size: 1.5rem;
    font-weight: bold;
}

.parallax-instagram p, .parallax-instagram .hashtag {
    font-size: 1.5rem;
    margin-top: 1%;
}

.parallax-instagram .btn {
    background-color: green;
    color: white;
    border: none;
    border-radius: 1rem;
    padding: 1% 2%;
    font-size: 1.5rem;
    text-decoration: none;
    margin-top: 2%;
}

@keyframes bounce-in {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Estilo para la sección Canciones */
.canciones {
    background-color: #FF00FF;
    color: white;
    text-align: center;
    padding: 2%;
    border: 0.2rem solid green;
    padding: 2%; 
    margin: 2%;
}

.canciones img {
    width: 12rem;
    animation: bounce-in 1s ease infinite;
}

.canciones h4 {
    font-size: 2rem;
    font-weight: bold;
}

.canciones p {
    font-size: 2rem;
    margin-top: 1%;
}

.canciones .btn {
    background-color: green;
    color: white;
    border: none;
    border-radius: 1rem;
    padding: 1% 2%;
    font-size: 2rem;
    text-decoration: none;
    margin-top: 2%;
}

/* Estilo para la sección CBU */
.cbu {
    background-color: green;
    color: white;
    text-align: center;
    padding: 2%;
    border: 0.2rem solid #FF00FF;
    padding: 2%; 
    margin: 2%;
}

.cbu img {
    width: 12rem;
    animation: bounce-in 1s ease infinite;
}

.cbu p {
    font-size: 2rem;
    margin-top: 1%;
}

/* Estilo para la sección Gracias */
.gracias {
    background-color: #FF00FF;
    color: white;
    text-align: center;
    padding: 2%;
    border: 0.2rem solid green;
    padding: 2%; 
    margin: 2%;
}

.gracias p {
    font-size: 2rem;
}

/* Estilo para la sección Contacto */
.contacto {
    text-align: left;
    padding-left: 20px;
    border: 0.2rem solid #FF00FF;
    padding: 2%; 
    margin: 2%;
}

.contacto p, .contacto ul {
    font-size: 1rem;
}

.contacto ul li:last-child a {
    color: green;
}