*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(0deg, rgba(2,0,36,0.9501050420168067) 0%, #220b36 51%);
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: 100%;
}


.contanier-elenco {
    display: flex;
    flex-direction: row-reverse;
    width: 80%;
    max-width: 1280px;
    margin: 40px auto;
    gap: 25px;
}

.contanier-elenco a {
    color: aliceblue;
    font-size: 4rem;
    position: fixed;
    left: 50px;
}

.contanier-elenco img {
    width: 500px;
    height: 600px;
    border-radius: 5px;
    position: relative;
    left: 30px;
    animation: slideLeft 2s forwards;
}


@keyframes slideLeft {
    to {
      left: 0; /* move para a posição superior 0 (dentro do contêiner) */
    }
  }

  @keyframes slideRight{
    to {
      left: 0; /* move para a posição superior 0 (dentro do contêiner) */
    }
  }

.box-text {
    position: relative;
    left: -30px;
    transition: ease-in-out 1s;
    animation: slideRight 2s forwards;
}

.nome-title h2 {
    font-size: 4rem;
    color: rgb(182, 185, 188);
}

.nome-title .funcao {
    font-size: 2rem;
    position: relative;
    top: -25px;
    color: rgb(216, 218, 220);
}


.box-text p {
    font-size: 1.3rem;
    text-align: justify;
    color: rgb(216, 218, 220);
    margin-top: 20px;
}





/* ------------------ PARA DISPOSITIVOS DO TAMANHO S5 E X -----------------*/

@media (min-width: 601px) and  (max-width: 1280px) {
    .contanier-elenco {
        display: flex;
        flex-direction: column-reverse;
        width: 85%;
        margin-top: 80px;
    }

    .contanier-elenco a {
        color: aliceblue;
        font-size: 2rem;
        position: absolute;
        left: 40px;
        top: 30px;
        
    }
}
 




@media (max-width: 600px) {
    .contanier-elenco {
        display: flex;
        flex-direction: column-reverse;
        width: 85%;
        margin-top: 80px;
    }

    .contanier-elenco a {
        color: aliceblue;
        font-size: 2rem;
        position: absolute;
        left: 40px;
        top: 30px;
        
    }

    .contanier-elenco img {
        width: 100%;
        height: 400px;
    }

    .nome-title h2 {
        font-size: 2.5rem;
    }

    .nome-title .funcao {
        font-size: 1.5rem;
    }

    .box-text p {
        font-size: 1.3rem;
        text-align:left;
    }

}