.separationBar{
    background-color: lightgray;
    height: 2px;
    width: 90vw;
    margin: 0 auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    text-align: center;
}

.legenda {
    display: flexbox;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 80%;
    text-align: center;
}

#tituloSkill{
    text-align: center;
}

#stack{
    font-weight: 800;
    padding-right:10px;
    border-right: 1px;
}

#destaque{
    font-weight: 800;
}

.containerProjetos{
    width: 100%;
    background-color: rgb(255, 255, 255);
    text-align: center;
}

#tituloProjetos{
    margin-bottom: 4rem;
}

.textoProjeto{
    text-align: left;
    width: 90%;
    padding-left: 10px;
}

.cardContainer{
    width: 100%;
}

.cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    width: 90vw;
    margin: 0 auto;
    margin-bottom: 2rem;
    margin-top: 4rem;
}

.projectCard{
    width: 90%;
    height: auto;
}

.cardImage{
    height: 350px;
    width: 100%;
    box-sizing: content-box;
    border-radius: 10px;
    overflow: hidden;
}

#projectImage{
    margin-left: 0px;
    object-fit: cover;
}



.filtros{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    margin-top: 4rem;
    width: 100vw;
}

.filtroContainer{
    text-align: center;
    align-content: center;
    margin: 0 auto;
}

.filtroImage{
    object-fit: scale-down;
}

.textoFiltro{
    text-align: center;
}

.apps{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-items:center;
    justify-items: center;
    justify-content: start;
    margin-top: 4rem;
    width: 100vw;
    margin-bottom: 4rem;
}


.appCard{
    display: grid;
    margin: 0 auto;
    width: 90%;
    /* background-color: magenta; */
}

.appContainer{
    width: 100%;
    align-items: center;
}


.appAR{
    text-align: left;
    width: 70%;
    padding-left: 5vw;
}

.vrinfo{
    margin-bottom: 2rem;
}


#posterImage{
    width: 100vw;
    object-fit: cover;
    object-position: bottom;
    margin-bottom: 1rem;
    max-height: 90vh;
}

.vGamesContainer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    width: 90vw;
}

.mainProjectImage{
    height: auto;
    overflow: hidden;
    object-fit:cover;
    text-align: center;
}

.nomeprojeto{
    color: gray;
    width: 70%;
}

.vr{
    width: 100vw;
    height:100vh;
}

.imagemGrandeE3pequenas{
    width:100%;
    height: 50vw;
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    grid-column: 2/3;
    margin-bottom: 4rem;
    margin-top: 3rem;
}

.imagemGrandeE3pequenas > div:first-child {
    background-color: gray;
    grid-row-start: 1 ;
    grid-row-end: span 3;
    overflow: hidden;
}

.imagemGrandeE3pequenas > div:nth-child(2) {
    background-color: gray;
    grid-row-start: 1 ;
    grid-row-end: 1;
}
.imagemGrandeE3pequenas > div:nth-child(3) {
    background-color: gray;
    grid-row-start: 2 ;
    grid-row-end: 2;
}
.imagemGrandeE3pequenas > div:nth-child(4) {
    background-color: gray;
    grid-row-start: 3 ;
    grid-row-end: 3;
}

.imagemGrande{
    height: 100%;
    align-content: center;
}

.imagemPequena{
    height: 100%;
    overflow: hidden;
}

#arte1
{
    object-fit: cover;
    object-position: bottom;
}