#projetos{
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 100px;
}

.projetoWrapper{
    height: 50vh;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.projetoWEsquerda{
    flex-direction: row;
}


.projetoWDireita{
    flex-direction: row-reverse;
}

.cardWrapper{
    height: 100%;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.descricaoProjeto{
    width: 40%;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
.marginzero{
  margin: 0 !important;
}


.card {
    width: 70%;
    height: fit-content;
    background-color: rgb(37, 33, 33);
    overflow: hidden;
    display: flex;
    margin-bottom: 15%;
  }
  .card, .smartphone, .linkProjetoWrapper{
    box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.37);
  }
  
  .circles,
  .browser {
    height: 30px;
    display: flex;
    align-items: center;
  }
  
  .circles {
    width: 20%;
    gap: 8px;
    padding: 10px 5px;
  }
  
  .c {
    width: 09px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356);
  }
  
  .c:first-child {
    background-color: red;
  }
  
  .c:nth-child(2) {
    background-color: rgb(204, 167, 4);
  }
  
  .c:last-child {
    background-color: green;
  }
  
  .browser {
    width: 80%;
    padding: 5px;
    display: flex;
    gap: 10px;
  }
  
  .chevrons {
    display: flex;
  }

  .browserSVG path{
    color: white;
    stroke: white;
  }
  
  .search-bar {
    position: relative;
    border: 0.5px solid rgb(255, 255, 255);
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    box-shadow: inset 2px 2px 2px #05050525;
  }
  
  .search-bar svg {
    position: absolute;
    left: 10px;
  }

  .browserWrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
  .printProjeto{
    width: 100%;
    aspect-ratio: 16/8;
  }


.smartphone{
    width: 26%;
    aspect-ratio: 9/16;
    border: solid 6px rgb(37, 33, 33);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    z-index: 11;
    background-color: white;
    margin-top: 15%;
    margin-left: -35px;
}

.topSmartphone{
    width: 50%;
    height: 5%;
    background-color: rgb(37, 33, 33);
    border-radius: 60px;
    margin-top: -5px;
    z-index: 10;
}

.bottomSmartphone{
    width: 65%;
    height: 5px;
    background-color: rgb(37, 33, 33);
    border-radius: 60px;
    margin-bottom: 15px;
    z-index: 10;
}

.card:hover{
    z-index: 15;
}


.descricaoProjeto h3{
    font-size: 4vw !important;
}

.descricaoProjeto p{
    font-size: 1vw !important;
    text-align: justify;
}
.tecnologiasProjeto, #tituloProjeto{
  padding: 0 5px;
}
.tecnologiasProjeto, .tecnologiasProjeto span{
    color: white;
    background-color: var(--myred);
    font-size: 1vw !important;
}


.linkProjetoWrapper{
    
    padding: 24px 12px;
    background-color: var(--myred);
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: white;
    transition: transform 0.4s ease;
}



.linkProjetoWrapper:hover{
    transform: scale(1.1);
}

.divLinkAnimation span, .divLinkAnimation, .conteudoLink, .tecnologiasProjeto, .tecnologiasProjeto span{
    font-family: "Pixelify Sans", sans-serif;
    font-size: 20px;
}

.conteudoLink{
    margin: 0 0 0 10px; 
}

.conteudoLink i{
    margin: 0 10px;
}


#tituloProjeto, #tituloProjeto span{
  margin-top:50px;
  margin-bottom: 40px;
  font-family: "Pixelify Sans", sans-serif !important;
  font-size: 4vw;
  color: white !important;
  background-color: var(--myred);
}




@media screen and (max-width:1024px) {

  #tituloProjeto, #tituloProjeto span{
    font-size: 8vw;
    margin-bottom: 60px;
    margin-top: 50px;
  }

  .tecnologiasProjeto, .tecnologiasProjeto span, .descricaoProjeto p{
    font-size: 1.4vw !important;
  }
}


@media screen and (max-width:828px){

  .tecnologiasProjeto, .tecnologiasProjeto span, .descricaoProjeto p{
    font-size: 2vw !important;
  }
  .projetoWrapper{
    height: fit-content;
  }

  .cardWrapper, .descricaoProjeto{
    width: 100%;
  }

  .projetoWEsquerda{
    flex-direction: column-reverse !important;
  }
  .projetoWDireita{
    flex-direction: column-reverse;
  }
}


@media screen and (max-width:503px){
  .tecnologiasProjeto, .tecnologiasProjeto span, .descricaoProjeto p{
    font-size: 2.7vw !important;
  }
  .smartphone{
    border-radius: 20px;
  }

  .descricaoProjeto h3{
    font-size: 6vw !important;
  }

  .linkProjetoWrapper{
    transform: scale(.8);
  }

  #tituloProjeto{
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);

  }
}