redes.css

/** -------------------------------Padrão Site ------------------------------------------------------- **/
html {
    overflow-x: hidden;
}

:root {
    --color1:#111111;
    --color2:#AF40FF;
    --color3:#1164ff;
    --color4:#fff;
    --color5:#5B42F3;
}


/*---------------------=-------------------------------------------------------------------------------**/





.botão{
   background: rgb(0, 88, 189);
   color: rgb(15, 15, 15);
   padding: 10px 50px;
   text-decoration: none;
   border-radius: 5px; 
}


.caixa {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 12em;
    
}

.caixa img{
    height: 100px;
}

.container{
    display: flex;
    align-items: center;
    margin: 25px;
    justify-content: space-around;
}

.sexta{
    padding-top: 10vh;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
    background: black;
    color: white;
    height: 250px;
}

.paramont{
    display: flex;
    align-items: center;
}

.paramont img{
    height: 555px;
    margin: 25px;
    width: 790px;
}

.esquerda{
    display: flex;
    align-items: center;
}

.esquerda img{
    height: 395px;
    margin: 25px;
}

.trom{
   display: flex;
   align-items: center;
}

.trom img{
    height: 550px;
    margin: 25px;
}

.megatron{
    height: 400px;
    display: flex;
   
}

.megatron img{
    height: 210px;
    margin: 25px;
    width: 250px;
}

.nathan{
    display: flex;
    align-items: center; 
    flex-direction: column; 
    margin: 25px;
}

.familia{
    background-image: linear-gradient(rgb(104, 1, 172), rgb(0, 0, 0));
    color: white;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    margin-top: 20vh;
}

.familia > div {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: scroll;
}

.familia h2{
    text-align: center;
    padding: 2%;
}


@media (max-width:900px) {

    .familia,
    .container, div {
        flex-direction: column;

    }
}