*{
    box-sizing: border-box-;
}
.contenedor{
    height: auto;
    width: 76%;
    margin: 0% auto;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
}
.menu{
    height: auto;
    width: 100%;
    background-color: rgb(47, 47, 47);
    display: flex;
}
.btn{
    flex-grow: 1;
    text-align: center;
    padding: 1%;
}
.btn:hover{
    background-color: rgb(27, 27, 27);
}
.btn>a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}
.banner{
    height: auto;
    display: flex;
}
.banner>img{
    width: 100%;
    height: auto;
}
.caja{
    height: auto;
    background-color: rgb(138, 138, 138);
    display: flex;
}
#reves{
    flex-direction: row-reverse;
}
.imga{
    height: auto;
    width: 50%;
    display: flex;
    align-self: center;
    margin: 4%;
    box-shadow: 10px 10px 5px ;
}
.imga>img{
    width: 100%;
    height: auto;
}
.text{
    height: auto;
    width: 50%;
    padding: 3%;
    line-height: 150%;
    background-color: rgba(59, 56, 56, 0.637);
    color: white;
    margin: 4%;
    align-self: center;
}
.text>h2{
    text-align: center;
}
.footer{
    height: auto;
    padding: 2%;
    text-align: center;
    background-color: rgb(47, 47, 47);
}
.footer>h4{
    color: white;
}
.footer>a>img:hover{
    filter: blur(2px);
}
body{
    background-color: black;
    height: auto;
}
/**EEmpieza CSS index**/
.texte{
    padding: 3%;
    height: 100%;
    align-self: center;
    background-color: rgba(59, 56, 56, 0.637);
    color: white;
}
.imago{
    height: auto;
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.imago>a>img:hover{
    filter: blur(2px);
}


/**Empieza CSS banda**/
.cajete{
    height: auto;
    background-color: rgb(138, 138, 138);
    display: flex;
}
.cajete>.texte>h1{
    text-align: center;
}
.texte>h1{
    text-align: center;
}
.imagi{
    height: auto;
    width: 50%;
    display: flex;
    align-self: center;
    margin: 4%;
    box-shadow: 10px 10px 5px ;
}