*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.cabecera{
    width: 100%;
    height: auto;
    background-image: linear-gradient(rgba(255, 192, 203, 0.5), rgba(0, 0, 255, 0.5)), url(Imagenes/cabecera.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
    border-bottom: solid 1px gray;
}
.bn1{
    background-color: #EACCF8;
    color: white;
    animation: coca 5s ease infinite;
    transition: all 0.3s;
    background: linear-gradient(45deg, #ffbf00, #61ad6a, #00ff59, #ff1500);
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes coca {
    0% {
        background-position: 0% 10%;
    }
    50% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.texto{
    text-align: center;
    display: flex;
    justify-content: center;
    
}
.texto img{
    width: 30%;
    height: 120px;
}
.aa{
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    justify-content: center;
    position: absolute;
}
.menu{
    width: 100%;
    height: 150px;
    text-align: center;
    margin: 0 auto;
    margin: 5px;
    justify-content: center;
    display: inline-block;

}
.menu a{
    width: 5px;
    height: 5px;
    justify-content: center;
    align-items: center;
    background-color: rgb(196, 86, 7);
    margin: 0 auto;
    margin-top: 30px;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 12px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #e1ff00, 0 0 10px #ff1100, 0 0 15px #00ffee;
    transition: all 0.3s;
}
@media screen and (max-width: 600px) {
    .menu  {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        font-size: 14px;
        margin: auto;
    }
}
@media screen and (max-width: 600px) {
    .aa {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        font-size: 14px;
    }
}
.btninicio{
    width: 80px;
    height: 50px;
    margin-bottom: 100px;
    background-color: blue;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 25px;
    text-decoration: none;
    margin: auto 0;
}
.letras{
    text-align: center;
}
.sl{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 0;
    justify-content: center;
}
.slider{
    width: 500px;
    height: 350px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin:auto;
    border-radius: 20px;
    padding-bottom: 25%;
    padding-left: 0;
    background-size: 100% 100%;
    overflow: hidden;
}
.slider2{
    width: 500px;
    height: 350px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin:auto;
    border-radius: 20px;
    padding-bottom: 25%;
    padding-left: 0;
    background-size: 100% 100%;
    overflow: hidden;
    display: none;
    list-style: none;
}
.contenedorin{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 0;
    text-align: justify;
}
.body2 { 
    background-color: #EACCF8;
    font-family: Arial, sans-serif; text-align: center; 
    color: white;
    font-size: 50px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #aa00ff, 0 0 10px #77ff00, 0 0 15px #00ffe1;
    animation: coca 5s ease infinite;
    transition: all 0.3s;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes coca {
    0% {
        background-position: 0% 10%;
    }
    50% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.T1{
    text-align: center;
    margin-bottom: 40px;
    font-size: 60px;
    text-shadow: 0 0 5px #eaff00, 0 0 10px #00eaff, 0 0 15px #d000ff;text-shadow: 0 0 5px #ff00ff, 0 0 10px #36849e, 0 0 15px #ff00ff;
}
.info{
    font-size: 25px;
    animation: changecolor 2s infinite;
}
@keyframes changecolor {
    0% { color: red; }
    50% { color: blue; }
    100% { color: black; }
  }

  .animacion-texto {
    animation: changecolor 2s infinite;
  }
.il1{
    width: 500px;
    height: 250px;
    display: flex;
    justify-content: right;
    animation: img1 2s infinite ease;
}
@keyframes img1 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transfo4rm: translateX(0%);
    }
  }
.il2{
    width: 500px;
    height: 250px;
    display: flex;
    justify-content: left;
    animation: img2 2s infinite ease-out;
}
@keyframes img2 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transfo4rm: translateX(0%);
    }
  }
.il3{
    width: 500px;
    height: 250px;
    display: flex;
    justify-content: right;
    animation: img3 2s infinite ease;
}
@keyframes img3 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transfo4rm: translateX(0%);
    }
  }
.il4{
    width: 500px;
    height: 250px;
    display: flex;
    justify-content: left;
    animation: img4 2s infinite ease-in;
}
@keyframes img4 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transfo4rm: translateX(0%);
    }
  }
.il5{
    width: 500px;
    height: 250px;
    display: flex;
    justify-content: right;
    animation: img5 2s infinite ease-in-out;
}
@keyframes img5 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transfo4rm: translateX(0%);
    }
  }
.il6{
    width: 500px;
    height: 250px;
    display: flex;
    justify-content: left;
    animation: img6 2s infinite ease-out;
}
@keyframes img6 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transfo4rm: translateX(0%);
    }
  }
.slider ul{
    display: flex;
    padding: 0;
    width: 4500%;
    animation: sl 100s infinite alternate linear;
}
.slider li{
    list-style: none;
    margin-right: 0;
}
.ro1{
    width: 500px;
    height: 100%;
    margin: 0;
    margin-right: 0;
    margin-left: 0;
}
@keyframes sl {
    0%{margin-left: 0%;}
    5%{margin-left: -300%;}
    10%{margin-left: -600%;}
    15%{margin-left: -1100%;}
    20%{margin-left: -1600%;}
    25%{margin-left: -2100%;}
    30%{margin-left: -2600%;}
    35%{margin-left: -3100%;}
    40%{margin-left: -3600%;}
    45%{margin-left: -4100%;}
    50%{margin-left: -4600%;}
    55%{margin-left: -5100%;}
    60%{margin-left: -5600%;}
    65%{margin-left: -6100%;}
    70%{margin-left: -6600%;}
    75%{margin-left: -7100%;}
    80%{margin-left: -7600%;}
    85%{margin-left: -8100%;}
    95%{margin-left: -8400%;}
  }
.banco{
    width: 90%;
    height: 50%;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    display: block;
}
.caja1{
    justify-content: center;
}
.caja1 img{
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    border-radius: 10px;
    border: 2px solid green;
}
.caja2{
    justify-content: center;
}
.caja2 img{
    width: 50px;
    height: 50px;
    margin-left: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    margin: 0 auto;
    border-radius: 10px;
    border: 2px solid green;
}
.caja3{
    justify-content: center;
}
.caja3 img{
    width: 50px;
    height: 50px;
    margin-left: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    margin: 0 auto;
    border-radius: 10px;
    border: 2px solid green;
}
.seccion4{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

.a1 img{
    width: 250px;
    height: 350px;
    border-radius: 25px;
    transition: transform 0.3s ease;
}
.a1:hover{
    transform: scale(1.2);
}
.a2 img{
    width: 250px;
    height: 350px;
    border-radius: 25px;
    transition: transform 0.3s ease;
}
.a2:hover{
    transform: scale(1.2);
}
.a3 img{
    width: 250px;
    height: 350px;
    border-radius: 25px;
    transition: transform 0.3s ease;
}
.a3:hover{
    transform: scale(1.2);
}
.e1{
    width: 250px;
    height: 350px;
    border: none;
    margin: 20px;
    border-radius: 25px;
}
.e2{
    width: 250px;
    height: 350px;
    border: none;
    margin: 20px;
    border-radius: 25px;
}
.e3{
    width: 250px;
    height: 350px;
    border: none;
    margin: 20px;
    border-radius: 25px;
}
.caja1 button{
    border: none;
}
.caja2 button{
    border: none;
}
.caja3 button{
    border: none;
}
.body2 { 
    background-color: #EACCF8;
    font-family: Arial, sans-serif; text-align: center; 
    color: white;
    font-size: 50px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #aa00ff, 0 0 10px #77ff00, 0 0 15px #00ffe1;
    animation: coca 5s ease infinite;
    transition: all 0.3s;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes coca {
    0% {
        background-position: 0% 10%;
    }
    50% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.opciones1{
    width: 100%;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
}
.botones{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
    text-decoration: none;
}
.body3{
    background-color: black;
    background-image: url(Imagenes/mate2.jpeg);
    text-shadow: 0 0 5px #fafaf4, 0 0 10px #52eef1, 0 0 15px #ff00ff;
}
.opera1{
    width: 60%;
    display: inline-block;
    position: relative;
    height: 600px;
    justify-content: center;
    background-color: black;
    box-shadow: inset white;
}
.opera1 h3{
    font-size: 30px;
}
.opera1 input{
    border-radius: 15px;
    border: 3px solid white;
    background-color: green;
    text-align: center;
    font-size: 20px;
}
.reiniciar{
    width: 2px;
    height: 2px;
    border: none;
}
.opera1 img{
    width: 35px;
    height: 30px;
    border-radius: 15px;
}
.ro3{
    width: 500px;
    height: 450px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin:auto;
    border-radius: 20px;
    padding-bottom: 25%;
    padding-left: 0;
    background-size: 100% 100%;
    display: none;
}
.seccion5{
    width: 90%;
    height: 200px;
    color: black;
    display: flex;
    justify-content: center;
}
.redes{
    width: 100%;
    height: auto;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.twi{
    width: 5%;
    height:auto ;

}
.insta{
    width: 5%;
    height:auto ;
}
.face{
    width: 5%;
    height: auto ;
}
.infoc{
    display: flex;
    width: 20%;
    height: auto;
    background-color: gray;
    text-align: center;
    justify-content: right;
    font-size: 20px;
}
.infoc h1{
    text-align: center;
}
.playlist{
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}
#o1{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o2{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o3{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o4{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o5{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o6{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o7{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o8{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o9{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
#o10{
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    transition: all 0.3s;
}
.audio{
    margin: 0 auto;
    overflow: hidden;
}
.playlist1{
    width: 90%;
    height: auto;
    display: block;
    background-color: #36849e;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist1 img{
    width: 30%;
    height: 95px;
}
.m1 button{
    margin: 0 auto;
}
.playlist2{
    width: 90%;
    height: auto;
    display: block;
    background-color: #9e3697;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist2 img{
    width: 30%;
    height: 95px;
}
.m2 button{
    margin: 0 auto;
}
.playlist3{
    width: 90%;
    height: auto;
    display: block;
    background-color: #32bdec;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist3 img{
    width: 30%;
    height: 95px;
}
.m3 button{
    margin: 0 auto;
}
.playlist4{
    width: 90%;
    height: auto;
    display: block;
    background-color: #e91717;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist4 img{
    width: 30%;
    height: 95px;
}
.m4 button{
    margin: 0 auto;
}
.playlist5{
    width: 90%;
    height: auto;
    display: block;
    background-color: #e6ec38;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist5 img{
    width: 30%;
    height: 95px;
}
.m5 button{
    margin: 0 auto;
}
.playlist6{
    width: 90%;
    height: auto;
    display: block;
    background-color: #a754e7;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist6 img{
    width: 30%;
    height: 95px;
}
.m6 button{
    margin: 0 auto;
}
.playlist7{
    width: 90%;
    height: auto;
    display: block;
    background-color: #15a315;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist7 img{
    width: 30%;
    height: 95px;
}
.m7 button{
    margin: 0 auto;
}
.playlist8{
    width: 90%;
    height: auto;
    display: block;
    background-color: #e06792;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist8 img{
    width: 30%;
    height: 95px;
}
.m8 button{
    margin: 0 auto;
}
.playlist9{
    width: 90%;
    height: auto;
    display: block;
    background-color: #6b9124;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist9 img{
    width: 30%;
    height: 95px;
}
.m9 button{
    margin: 0 auto;
}
.playlist10{
    width: 90%;
    height: auto;
    display: block;
    background-color: #75e0f6;
    margin: 0 auto;
    border: 2px dashed white;
}
.playlist10 img{
    width: 30%;
    height: 95px;
}
.m10 button{
    margin: 0 auto;
}
.tiplay{
    justify-content: center;
    text-align: center;
    font-size: 50px;
    color: #eb32b4;

}
.regresar{
    width: 100px;
    height: 50px;
    text-decoration: none;
    color: black;
    border: 2px solid white;
    background-color: #aa00ff;
    margin-bottom: 10px;
}
.k1{
    width: 250px;
    height: 350px;
    border-radius: 25px;
    background-color: #eaff00;
    transition: transform 0.3s ease;
}
.k1:hover{
    transform: scale(1.2);
}
.k2{
    width: 250px;
    height: 350px;
    border-radius: 25px;
    background-color: #eaff00;
    transition: transform 0.3s ease;
}
.k2:hover{
    transform: scale(1.2);
}
.k3{
    width: 250px;
    height: 350px;
    border-radius: 25px;
    background-color: #eaff00;
    transition: transform 0.3s ease;
}
.k3:hover{
    transform: scale(1.2);
}
.bt1{
    width: 250px;
    height: 350px;
    border: none;
    margin: 30px;
    border-radius: 25px;
}
.bt2{
    width: 250px;
    height: 350px;
    border: none;
    margin: 30px;
    border-radius: 25px;
}
.bt3{
    width: 250px;
    height: 350px;
    border: none;
    margin: 30px;
    border-radius: 25px;
}
.infoc a{
    text-decoration: none;
    color: black;
    margin: auto 0;
}
.row{
    border: 1.5px dashed orangered;
}
.col{
    border: 1.5px dashed orangered;
}
.grande{
    width: 90%;
    height: auto;
}
.contenedorgaleria1 img{
    width: 250px;
    height: 250px;
    transition: transform 0.3s ease;
}
.contenedorgaleria1 img:hover{
    transform: scale(1.2);
}
.contenedorgaleria2 img{
    width: 250px;
    height: 250px;
    transition: transform 0.3s ease;
}
.contenedorgaleria2 img:hover{
    transform: scale(1.2);
}
.contenedorgaleria3 img{
    width: 250px;
    height: 250px;
    transition: transform 0.3s ease;
}
.contenedorgaleria3 img:hover{
    transform: scale(1.2);
}
.contenedorgaleria4 img{
    width: 250px;
    height: 250px;
    transition: transform 0.3s ease;
}
.contenedorgaleria4 img:hover{
    transform: scale(1.2);
}
.contenedorgaleria5 img{
    width: 250px;
    height: 250px;
    transition: transform 0.3s ease;
}
.contenedorgaleria5 img:hover{
    transform: scale(1.2);
}
.b4{ 
    background-color: #EACCF8;
    font-family: Arial, sans-serif; text-align: center; 
    color: white;
    font-size: 50px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #aa00ff, 0 0 10px #77ff00, 0 0 15px #00ffe1;
    animation: coca 5s ease infinite;
    transition: all 0.3s;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes coca {
    0% {
        background-position: 0% 10%;
    }
    50% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.bn3 { 
    background-color: #EACCF8;
    font-family: Arial, sans-serif; text-align: center; 
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    text-shadow: 0 0 5px #aa00ff, 0 0 10px #77ff00, 0 0 15px #00ffe1;
    animation: coca 5s ease infinite;
    transition: all 0.3s;
    background: linear-gradient(45deg, #6064de, #00ffff, #ff00ff, #28e4ed);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    background-repeat: no-repeat;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes coca {
    0% {
        background-position: 0% 10%;
    }
    50% {
        background-position: 50% 25%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.s2{
    width: 100%;
    justify-content: space-between;
    display: flex;
    margin: auto 0;
}
.banner{
    width: 250px;
    height: auto;
    border: 3px solid purple;
    margin: auto;
    padding-bottom: 25%;
    padding-left: 25%;
    background-size: 100% 100%;
    border-radius: 15px;
    animation: mbanner 10s infinite alternate;
}
@keyframes mbanner{
    0%, 24%{
        background-image: url(Imagenes/g1.jpg);
        opacity: 1;
    }
    25%, 26%{
        opacity: 0.1;
    }
    27%, 49%{
        background-image: url(Imagenes/g10.jpg);
        opacity: 1;
    }
    50%, 51%{
        opacity: 0.1;
    }
    52%, 74%{
        background-image: url(Imagenes/g11.jpg);
        opacity: 1;
    }
    75%, 76%{
        opacity: 0.1;
    }
    77%, 100%{
        background-image: url(Imagenes/g12.jpg);
        opacity: 1;
    }
    101%, 102%{
        opacity: 0.1;
    }
    103%, 122%{
        background-image: url(Imagenes/g13.jpg);
        opacity: 1;
    }
}
.gs{
    justify-content: center;
    display: block;
    text-align: center;
}
.gs img{
    width: 150px;
    height: auto;
}
.fodo{
    width: 100%;
    height: 250px;
    background-color: darkgrey;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    padding-top: 100px;
}
.gran{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    background-color: #aa00ff;
    
}
@media screen and (max-width: 768px) {
    .gran {
        white-space: nowrap; /* Si el ancho de la pantalla es menor a 768px, permite que el texto se desborde horizontalmente */
        overflow-x: auto; /* Agrega una barra de desplazamiento horizontal si el texto se desborda */
    }
}
.datos{
    width: 80%;
    height: 250px;
    border-radius: 20px;
    background-color: #75e0f6;
    margin: 20px;
    justify-content: center;
    text-align: center;
    padding-top: 70px;
}
.temas{
    width: 80%;
    height: 250px;
    border-radius: 20px;
    background-color: #75e0f6;
    margin: 20px;
    justify-content: center;
    text-align: center;
    padding-top: 70px;
}
.megusto{
    width: 80%;
    height: 250px;
    border-radius: 20px;
    background-color: #75e0f6;
    margin: 20px;
    justify-content: center;
    text-align: center;
    padding-top: 70px;
}
.nogusto{
    width: 80%;
    height: 250px;
    border-radius: 20px;
    background-color: #75e0f6;
    margin: 20px;
    justify-content: center;
    text-align: center;
    padding-top: 70px;
}
.mejorar{
    width: 80%;
    height: 250px;
    border-radius: 20px;
    background-color: #75e0f6;
    margin: 20px;
    justify-content: center;
    text-align: center;
    padding-top: 70px;
}
.tt1{
    border-radius: 15px ;
    background-color: #eb32b4;
    font-size: 35px;
    text-align: center;
}
.tablaRegistros{
    text-align: center;
}
/* .tablaRegistros tr{
    border: 2px solid purple;
} */
.tablaRegistros th{
   border-right: 2px solid blue;
   border-top: 2px solid blue;
   border-bottom: 2px solid blue;
}
.contenedorin{
    justify-content: center;
    margin: auto;
}