.navegacion {
    background-color: rgb(33, 32, 33); 
    color: #fff; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.navegacion a {
    text-decoration: none; 
    color: #fff; 
    font-size: 20px; 
    margin-right: 30px; 
}

.navegacion a:hover {
    color: #ff0048; 
}

.navegacion h1 {
    margin: 0; 
    font-size: 32px; 
}

#container {
    color: rgb(0, 0, 0) ;
    background-color: rgb(33, 32, 33);
    text-align: justify;
    

}

* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}   

body {
    background-color: rgb(33, 32, 33);
}

footer {
    background-color: rgb(33, 32, 33);
    color: #fff;
    text-align: center;
    padding: 5px; 

}

.personajes {
    margin-bottom: 30px;    
}

.ima {
    float: left;
}

a{
    color:#fff;
}

.gremios{
    text-align: center;
    padding-bottom: 20px;
}

#personajes{
    text-align: center;
    margin-top: 350px;
    background-color: rgb(33, 32, 33);
    color: #fff;
    padding: 10px;
    padding: top 10px;
}

#gremios{
    text-align: center;
    background-color: rgb(33, 32, 33);
    color: #fff;
    padding: 10px;
}

.logos{
    height: 200px;
    width: 200px;
    display: flex;
    align-items: center;

}

.encabezado-container {
    position: relative;
    width: 100%;
    height: 300px; 
}

.texto-superpuesto {
    position: absolute;
    top: 100%; 
    left: 50%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.886); 
    border: 2px solid #000; 
    border-radius: 10px; 
}

.tamañoimagen{
    width: 100%;
}

.texto-superpuesto-natsu{
    position: absolute;
    top: 1200px; 
    left: 20%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.826); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;

}

.texto-superpuesto-gray{
    position: absolute;
    top: 2300px; 
    right: -120px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-erza{
    position: absolute;
    top: 3200px; 
    left: 20%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.948); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-lucy{
    position: absolute;
    top: 4400px; 
    left: 20%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.948); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-happy{
    position: absolute;
    top: 5300px; 
    right: 80px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-wendy{
    position: absolute;
    top: 6000px; 
    left: 15%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.962); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-charle{
    position: absolute;
    top: 6850px; 
    left: 15%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.962); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-gajeel{
    position: absolute;
    top: 7600px; 
    right: -100px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-lily{
    position: absolute;
    top: 8450px; 
    left: 15%; 
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.962); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-juvia{
    position: absolute;
    top: 9300px; 
    right: -40px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 300px;
}

.texto-superpuesto-fairytail{
    position: absolute;
    top: 10710px; 
    right: -90px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 210px;
    height: 290px;
}

.texto-superpuesto-sabertooth{
    position: absolute;
    top: 11760px; 
    right: -90px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 210px;
    height: 290px;
}

.texto-superpuesto-bluepegasus{
    position: absolute;
    top: 12950px; 
    right: -90px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 210px;
    height: 290px;
}

.texto-superpuesto-lamiascale{
    position: absolute;
    top: 13940px; 
    right: -90px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 210px;
    height: 290px;
}

.texto-superpuesto-raventail{
    position: absolute;
    top: 15000px; 
    right: -90px;
    transform: translate(-50%, -50%); /* Centra completamente el recuadro */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.951); 
    border: 2px solid #000; 
    border-radius: 10px; 
    width: 210px;
    height: 290px;
}