body {
    background: #000;
    color: black;
    margin: 0;
      }
      
    /*navbar */
    
    .navbar {
        display: flex; /* Flexbox para alinear horizontalmente */
        justify-content: center; /* Centra los botones horizontalmente */
        background-color: transparent; /* Fondo transparente */
        padding: 10px 0; /* Espaciado vertical */
        position: fixed; /* Añadido para hacerla fija */
        top: 0; /* Asegura que esté en la parte superior */
        width: 100%; /* Para que ocupe todo el ancho */
        z-index: 1000; /* Asegura que esté sobre otros elementos */
    }
    
    /* Estilos para la lista */
    .nav-list {
        list-style-type: none; /* Elimina los puntos de la lista */
        display: grid; /* Usa CSS Grid para organizar los botones */
        grid-template-columns: repeat(3, auto); /* Tres columnas para los botones */
        gap: 10px; /* Espaciado entre botones */
        background: rgba(255, 0, 0, 0.842); /* Color de fondo para el área de botones */
        padding: 10px; /* Espaciado interno */
        border-radius: 25px; /* Bordes redondeados */
    }
    
    /* Estilos para los botones */
    .nav-list button {
        font-size: 1.5em;
        background:transparent; /* Color de fondo de los botones */
        color: white; /* Color del texto de los botones */
        border: none; /* Elimina el borde predeterminado */
        padding: 10px 20px; /* Espaciado interno de los botones */
        cursor: pointer; /* Cambia el cursor al pasar sobre los botones */
        border-radius: 15px; /* Bordes redondeados */
        transition: background-color 0.3s ease; /* Transición suave al hacer hover */
    }
    
    /* Efecto hover para los botones */
    .nav-list button:hover {
        background:rgba(92, 8, 8, 0.5); /* Color de fondo al hacer hover */
        color: white;
    }
    
    /* Media Query para pantallas pequeñas */
    @media (max-width: 768px) {
        .nav-list {
            grid-template-columns: repeat(3, auto); /* Los botones se apilan verticalmente en pantallas pequeñas */
            text-align: center; /* Centra los botones */
        }
    
        .nav-list button {
            font-size: 1.3em;
            width: 100%; /* Los botones ocupan todo el ancho disponible */
        }
    }
    @media (max-width: 500px) {
        .nav-list {
            grid-template-columns: repeat(3, auto); /* Los botones se apilan verticalmente en pantallas pequeñas */
            text-align: center; /* Centra los botones */
        }
    
        .nav-list button {
            font-size: 0.7em;
            width: 100%; /* Los botones ocupan todo el ancho disponible */
        }
    }
    
    
    
    
      /*esto es el mamba animado con el video */
    
      #logoYvideo {
        position: relative;
        top: 100px;
      }
      
      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
      @font-face {
        font-family: 'mistral';
        src: url(/fuentes/OPTIMistral-Graff.otf);
        font-style: normal;
        font-weight: normal;
      }
    
     .h1-chango {
        font-family: 'mistral';
        font-style: normal;
        background: black;
        text-align: center;
        font-weight: 400;
        mix-blend-mode: unset;
        -webkit-text-stroke-width: 5px;
        -webkit-text-stroke-color: rgb(252, 249, 249);
        font-size: clamp(20rem, 8vw, 12rem);
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        margin-top: 0;
    }
    
    
    /* Media Query para pantallas medianas (hasta 768px de ancho) */
    @media (max-width: 1000px) {
        .h1-chango {
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: rgb(252, 249, 249);
            font-weight: 400; /* Cambiar el peso de la fuente para pantallas medianas */
            font-size: clamp(14rem, 6vw, 8rem); /* Ajustar tamaño del texto */
        }
    
    
    }
    
    /* Media Query para pantallas pequeñas (hasta 480px de ancho) */
    @media (max-width: 480px) {
        .h1-chango {
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: rgb(252, 249, 249);
            font-size: clamp(10rem, 6vw, 8rem); /* Ajustar tamaño del texto para pantallas pequeñas */
            text-align: center; /* Cambiar alineación del texto a la izquierda */
            padding: 10px; /* Agregar un poco de padding para espacio */
        }
    
       
    }
    @media (max-width: 360px) {
        .h1-chango {
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: rgb(252, 249, 249);
            font-size: clamp(8rem, 6vw, 8rem); /* Ajustar tamaño del texto para pantallas pequeñas */
            text-align: center; /* Cambiar alineación del texto a la izquierda */
            padding: 10px; /* Agregar un poco de padding para espacio */
        }
    
       
    }
      
    
      /*eventos*/
      #EVENTOS , #GALERIA{
        max-width: 600px;
        margin: 0 auto;
        font-family: system-ui;
        margin-top: 150px;
        margin-bottom: 100px;
      }
    
      
      #titulo-evento-h1 , #titulo-evento-h2 ,#galeria-h1 ,#playlist-h1 ,#nosotros-h1{
        font-family: "Zen Dots", sans-serif;
       
      }
      #titulo-evento-h1{
        padding-top: 275px;
        font-size: 5em;
        text-align: center;
        color: rgba(255, 0, 0, 0.925);
        text-shadow: 2px 2px 2px white;
      }
    
     #galeria-h1 ,#playlist-h1 ,#nosotros-h1 ,#contacto-h1{
        padding-top: 25px;
        font-size: 4em;
        text-align: center;
        color: rgba(255, 0, 0, 0.925);
        text-shadow: 2px 2px 2px white;
      }
      
      #titulo-evento-h2{
          opacity: .8;
          font-weight: 400;
          margin-bottom: 22px;
          padding-bottom : 30px;
          font-size: 1.8em;
          text-align: center;
          color:white;
          text-shadow: 2px 2px 2px #e60a0a;
          
        }
        
        .img-eventos{
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: rgba(255, 0, 0, 0.459) 0px 0px 45px 0px;
        }
    
        /*galeria*/
        .vdieos-galeria{
            position: relative;
            display: flex;
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: rgba(255, 0, 0, 0.459) 0px 0px 45px 0px;
            
        }
    
        .grid-galeria{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 75px;
            
        }
    
        /*playlist*/      
        #spoty {
            margin: 30px;
            text-align: center;
        }
    
        #playlist {
            width: 100%;
            max-width: 600px; /* Puedes ajustar el máximo ancho según necesites */
            box-shadow: 0px 0px 45px 0px rgba(255, 0, 0, 0.459);
            border-radius: 12px;
        }
    
    
    /* Media Query para pantallas de hasta 750px de ancho */
    @media (max-width: 750px) {
        #titulo-evento-h1,#galeria-h1 , #playlist-h1 ,#nosotros-h1{
            font-size: 3em; /* Cambia el tamaño según tu necesidad */
                text-shadow: 1px 1px 1px white;  
                padding-bottom: 30px;         
            }
        #titulo-evento-h2{
            font-size: 1.4em;
            padding-top: 30px;
            }
        .img-eventos{
            width: 80%;
            height: auto;
            border-radius: 20px;
            }
        .vdieos-galeria {
            position: relative;
            display: block; /* Cambiar de flex a block */
            margin: 0 auto; /* Centra horizontalmente el video */
            width: 70%;
            height: auto;
            border-radius: 20px;
            box-shadow:  rgba(255, 0, 0, 0.459) 0px 0px 45px 0px;
        }
        
        .grid-galeria {
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center; /* Alinea los items del grid horizontalmente */
            align-items: center;   /* Alinea los items del grid verticalmente */
            gap: 75px;
        }
        
    }
    
    /* Media Query para pantallas de hasta 480px de ancho */
    @media (max-width: 480px) {
        #titulo-evento-h1,#galeria-h1 ,#playlist-h1 ,#nosotros-h1{
            font-size: 2.3em; /* Cambia el tamaño según tu necesidad */
                        text-shadow: 1px 1px 1px white;
                        padding-bottom: 30px;
            }
        #titulo-evento-h2{
            font-size: 1.4em;
            padding-top: 30px;
            }
        .img-eventos{
            width: 50%;
            height: auto;
            border-radius: 20px;
            }
        .vdieos-galeria {
            position: relative;
            display: block; /* Cambiar de flex a block */
            margin: 0 auto; /* Centra horizontalmente el video */
            width: 70%;
            height: auto;
            border-radius: 20px;
            box-shadow:  rgba(255, 0, 0, 0.459) 0px 0px 45px 0px;
        }
        
        .grid-galeria {
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center; /* Alinea los items del grid horizontalmente */
            align-items: center;   /* Alinea los items del grid verticalmente */
            gap: 75px;
        }
        
    }
        
        @keyframes show {
        from {
            opacity: 0;
            scale: 25%;
        }
    
        to {
            opacity: 1;
            scale: 100%;
        }
    }
    
    .img-eventos , #titulo-evento-h1 ,#titulo-evento-h2,#galeria-h1 ,.vdieos-galeria ,#spoty ,#playlist-h1 ,#nosotros-h1, #que-es-chango, #contacto-h1,.contact-form ,.contact-container{
        view-timeline-name: --image;
        view-timeline-axis: block;
    
        animation-timeline: --image;
        animation-name: show;
    
        animation-range: entry 25% cover 30%;
        animation-fill-mode: both;
    }
      
    .centrarP{
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center; /* Alinea los items del grid horizontalmente */
        align-items: center;   /* Alinea los items del grid verticalmente */
      
    }  
    
      
    #que-es-chango{
        text-align: center;
        font-family: "Zen Dots", sans-serif;  
        font-size: 1.3em;
        color: white;
        width: 50%;
    }
    


    
    
    /* Footer */
    #foot {
        display: flex; /* Flexbox para alinear los elementos */
        justify-content: center; /* Centrar horizontalmente */
        align-items: center; /* Centrar verticalmente */
        gap: 110px; /* Espacio entre los iconos */
        padding-top: 110px; /* Espaciado superior */
    }
    
    .img-foot {
        width: 100px; /* Ajuste del tamaño de los iconos */
    }
    @media (max-width:1000px ){
        #foot {
            
            gap: 30px; /* Espacio entre los iconos */
        }
        .img-foot {
            width: 75px; /* Ajuste del tamaño de los iconos */
        }
    }
    
    /*contacto*/
    .contact-container {
        max-width: 600px;
        margin-right: 600px;
        margin: 40px auto;
        padding: 20px;
        background-color:#000;
        border-radius: 20px;
        box-shadow:  rgba(255, 0, 0, 0.459) 0px 0px 45px 0px;
    }
    
    .contact-form {
        margin-bottom: 20px;
    }
    
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"],
    .contact-form textarea {
        width: 98%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    
    .contact-form button[type="submit"] {
        background-color: rgb(255, 0, 0);
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .contact-form button[type="submit"]:hover {
        background-color:rgba(255, 0, 0, 0.459);
    }
    
    .map-container {
        margin-top: 20px;
    }
    
    #mapa {
        width: 100%;
        height: 400px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    #honeypot {
        display: none;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        left: -9999px;
    }