/* Responsividade */
 @media screen and (max-width: 500px) {
    
    /* Nav Mobile */

    nav{
        display: flex;
        flex-direction: row-reverse;
    }

    #btnMobile{
        display: block;
        background-image: url(../../img/menu-hamburguer\ 1.png);
        color: transparent;
        border: none;
        background-color: transparent;
        width: 35px;
        align-items: center ;
        margin-top: 1%;
        margin-left: 50%;
    }


    #nav.ativado #menu{
        display: block;
        position: absolute;
        width: 100%;
        top: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #320148;
        z-index: 6
    }

    #menu{
        display: none;
    }

    .contatoLi{
        margin-bottom: 5%;
    }

    hr{
        display: none;
    }

    /* Header */
    header {
        background-color: #7640b870;
        width: 100vw;
        height: auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
     
    .presentation {
        margin-left: 4%;
        margin-right: 0%;
        width: 60vw;
        
    
    }
    
    .presentation > h1 {
        font-size: 8vw;
    }
    
    .presentation > h2 {
        font-size: 5vw;
    }
    
    .presentation > h3 {
        font-size: 3.8vw;
        padding-bottom: 5%;
        margin-top: -4%;
    }
    
    header > img {
        display: flex;
        justify-content: right;
        align-self: center;
        width: 40vw;
        height: auto
    }

    /* About */
    
    .about{
        display: flex;
        flex-direction: column;
        margin-top: 5%;
        width: 100vw;
    }
    
    .aboutMe {
        position: relative;
        width: 100%;
    }
    
    .txtAboutMe{
        width: 100vw;
        padding-right: 5%;
        padding-top: 6%;
    }
    
    .txtAboutMe > h1 {
        display: flex;
        align-self: center;
        justify-content: center;
        margin-bottom: 4%;
        padding-left: 4%;
        padding-top: 5%;
        font-size: 6vw;
    }
    
    .txtAboutMe > p{
        font-size: 3.5vw;
        font-weight: 300;
        margin-left: 4%;
        text-align: justify;
       

    
    }

    .foto {
        top: 0%;
        left: 32%;
        width: 35vw;
        max-width: 35vw;
    }
       
    .backFoto {
        position: relative;
        z-index: 0;
        margin-left: 19%;
        margin-top: 10%;
        max-width: 100vw;
        min-height: 5vh;
        height: 5vh;
        width: 60%;
        margin-bottom: 8%;
        border-radius: 20px;
        
    }

    .btnSobre{
        width: 27vw;
        height: 5vh;
        border-radius: 10px;
        font-family: 'Inter';
        font-weight: 600;
        border: none;
        outline: none;
        font-size: 3vw;
    }
    
    .btnSobre{
        background-color: #54a5b7;
    }
    
    .btnAbout{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.5%;
        margin-top: 4%;
        margin-bottom: 5%;
    }

    /* Skills */
 
    .skills {
        margin-top: 5%;
        width: 100vw;
   }
   
   .skills > h1 {
       font-size: 6vw;
       width: 100vw;
       height: 5vh;
       margin-left: 0% ;
       background-color: transparent;
       box-shadow: none;
       margin-top: -4%;
       margin-bottom: 8%;

       
   }

 
   .skillContainer {
       display: flex;
       flex-direction: column;
       margin-left: 7%;
   }
   
   .hardSkills{
       width: 85vw;
       height: auto;
   }
   
   .hardSkills h2 {
       top: -3%;
       font-size: 4.5vw;
       width: 38vw;
       height: 4vh;
       margin-right: 4%;
       border-radius: 20px;

   }

   .content{
    margin-bottom: 4%;
   }
   
   .content > h3 {
       font-size: 4.5vw;
       margin-top: -4%;
   }
   
   .content > ul > li {
       font-size: 3.5vw;
       font-weight: 600;
       margin-left: -4%;
   }

   
   .skillBox > img {
       width: 8.5vw;
       max-width: 8.5vw;
   }
   
   .softSkills{
        width: 85vw !important;
        height: auto !important;
        margin-top: 8%;

   }

   .contentSoft{
    margin-top: 15%;
    margin-bottom: 4%;
   }
   
   .contentSoft > ul > li {
       font-size: 3.5vw;
       margin-left: -12%;
   }
   
   
   
   .softSkills h2 {
       font-size: 4.5vw; 
       width: 38vw;
       height: 4vh;

   }

   /* Projetos */

   .projects > h1 {
    background-color: transparent;
    font-size: 6vw;
    margin-top: 8%;
    margin-left: 0%;
    width: 100vw;
    box-shadow: none;
    }

    .card {
        width: 85vw !important;
        height: auto !important;
        margin-left: 0%;
        margin-top: 8%;
    }

    .card-text{
        font-size: 4vw;
        text-align: justify;
    }

    .card-title{
        font-size: 6vw;
    }

    .card-img-top{
        width: 84.8vw;
        height: auto;
    }

    .projetoBtn{
        font-size: 4vw;    
       
    }

    .projetoBoxBtnPlanty{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12%;
    }
    
    .ProjectPost {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .andamentoBtn{
        border: 1px solid #4D2177;
        background-color: transparent;
        color: #4D2177;
        

    }

    /* Studying */

    .study{
        height: auto;
    }
    .study > h1 {
        background-color: transparent;
        font-size: 6vw;
        width: 25vw;
        margin-top: 8%;
        margin-bottom: 5%;
        box-shadow :none;
     }
    
    .study > figure img {
        width: 15vw;
    }

    /* Contact me */

    .contact {
        background-color: #4D2177;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: 0px 36px 55px -6px rgba(0,0,0,0.55);
        margin-top: 10%;
    }
    
    
    .infoContact {
        display: flex;
        flex-direction: column;
        width: 50vw;
        margin-left: 4%;
    }

    .infoContact h1 {
        font-size: 7vw;
    }
    
    .contact > figure {
         display: flex;
         justify-content: right;
         margin-left: 10%;
    }

    .contact > figure img {
        width: 35vw;
    }
    
    .gmail img, .linkedin img, .github img {
        margin-right:2%; 
        padding-bottom: 10%;
        width: 6vw;
    
    }
    
    .gmail p, .linkedin p, .github p {
        font-size: 3.8vw;
    }
    
    /* Copyright */

    .copyrigth{
        margin-top: 4%;
        font-size: 3.5vw;
       
    }

}

@media screen and (min-width: 501px) and (max-width: 900px) {

    /* Navegation */
    nav > ul {
        width: 74vw;
        font-size: 2.7vw;
    }

    /* Header */
    header {
        background-color: #7640b870;
        width: 100vw;
        height: auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
     
    .presentation {
        margin-left: 4%;
        margin-right: 0%;
        width: 100vw;
        
    
    }
    
    .presentation > h1 {
        font-size: 7vw;
    }
    
    .presentation > h2 {
        font-size: 4.5vw;
    }
    
    .presentation > h3 {
        font-size: 3vw;
        padding-bottom: 5%;
        margin-top: -3%;
    }
    
    header > img {
        display: flex;
        justify-content: right;
        align-self: center;
        width: 40vw;
        height: auto;
    }

    /* About */
    
    .aboutMe {
        width: 40%;
    }
    
    .txtAboutMe{
        width: 60%;
        padding-right: 4%;
    }
    
    .txtAboutMe > h1 {
        font-size: 4vw;
    }
    
    .txtAboutMe > p{
        font-size: 2vw;
        text-align: justify;
    }
    
    .foto {
        position: absolute;
        top: 18%;
        left: 14%;
        z-index: 1;
        width: 30vw;
        max-width: 30vw;
    }
    
    .backFoto {
        position: relative;
        z-index: 0;
        margin-top: 14%;
        margin-left: 35%;
        max-width: 15vw;
        height: 35vh;
        max-height: 200vh;
    }

    .btnSobre{
        width: 15vw;
        height: 4.6vh;
        border-radius: 10px;
        font-family: 'Inter';
        font-weight: 600;
        border: none;
        outline: none;
        font-size: 2vw;
    }
    
    .btnSobre{
        background-color: #54a5b7;
    }
    
    .btnAbout{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.5%;
        margin-top: 4%;
        margin-bottom: 5%;
    }

    /* Skills */



    .skills > h1 {
        background-color: transparent;
        font-size: 4vw;
        box-shadow: none;   
    }

    .hardSkills{
        width: 40vw;
        height: auto !important;
    }

    .hardSkills h2 {
        font-size: 3vw;
        width: 22vw;
        height: 5vh;
    }

    .content > h3 {
        font-size: 2.8vw;
    }

    .content > ul > li {
        font-size: 2vw;
        margin-left: -9%;
    }

    .skillBox {
        margin-top: 18%;
    }

    .skillBox > img {
        width: 5vw;
        max-width: 5vw;
    }

    .softSkills{
        width: 40vw !important;
        height: auto !important;
    }

    .contentSoft {
        margin-top: 15%;
        margin-left: -5%;
    }

    .contentSoft > ul > li {
        font-size: 2vw;
    }



    .softSkills h2 {
        font-size: 3vw;
        width: 22vw;
        height: 5vh;
    }

    .skillContainer{
        gap: 4%;
    }

    /* Projetos */

   .projects > h1 {
    background-color: transparent;
    font-size: 5vw;
    margin-top: 8%;
    margin-left: 0%;
    width: 100vw;
    box-shadow: none;
    }

    .card {
        width: 40vw !important;
        height: auto !important;
        margin-left: 0%;
        margin-top: 8%;
    }

    .card-text{
        font-size: 2vw;
        text-align: justify;
    }

    .card-title{
        font-size: 4vw;
    }

    .card-img-top{
        width: 39.7vw;
        height: 40vh;
    }

    

    .projetoBtn{
        font-size: 2.7vw;    
        border-radius: 15px;
       
    }

    .projetoBoxBtnPlanty{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12%;
    }
    
    .ProjectPost {
        gap: 2%;
        grid-template-columns: 40% 40%;
        grid-template-rows: 50% 50%;
     
        align-items: center;
        justify-content: center;
    }

    .andamentoBtn{
        border: 1px solid #4D2177;
        background-color: transparent;
        color: #4D2177;
        

    }

    /* Studying */

    .study{
        height: auto;
    }
    .study > h1 {
        background-color: transparent;
        font-size: 5vw;
        width: 25vw;
        margin-top: 10%;
        margin-bottom: 2%;
        box-shadow :none;
     }
    
    .study > figure img {
        width: 7vw;
    }

    
     /* Contact me */

     .contact {
        background-color: #4D2177;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: 0px 36px 55px -6px rgba(0,0,0,0.55);
        margin-top: 10%;
    }
    
    
    .infoContact {
        display: flex;
        flex-direction: column;
        width: 50vw;
        margin-left: 4%;
    }

    .infoContact h1 {
        font-size: 6vw;
    }
    
    .contact > figure {
         display: flex;
         justify-content: right;
         margin-left: 10%;
    }

    .contact > figure img {
        width: 30vw;
    }
    
    .gmail img, .linkedin img, .github img {
        margin-right:2%; 
        padding-bottom: 6%;
        width: 4vw;
    
    }
    
    .gmail p, .linkedin p, .github p {
        font-size: 3vw;
    }
    
    /* Copyright */

    .copyrigth{
        margin-top: 4%;
        font-size: 3vw;
       
    }
}

@media screen and (min-width: 901px) and (max-width: 1320px){

    /* About */
    
    .txtAboutMe > h1 {
        font-size: 3vw;
    }
    
    .txtAboutMe > p{
        text-align: justify;
    }

    .btnSobre{
        width: 12vw;
        height: 4.7vh;
        border-radius: 10px;
        font-family: 'Inter';
        font-weight: 600;
        border: none;
        outline: none;
        font-size: 1.5vw;
    }
    
    .btnSobre{
        background-color: #54a5b7;
    }
    
    .btnAbout{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.5%;
        margin-top: 4%;
        margin-bottom: 5%;
    }
    
    /* Skills */

    .skills > h1 {
        font-size: 3vw;
        width: 100vw;
        height: 5vh;
        margin-left: 0% ;
        background-color: transparent;
        box-shadow: none;
        margin-top: -4%;
        margin-bottom: 4%;  
    }
    
    .hardSkills{
        height: auto;
    }


    /* Projetos */

   .projects > h1 {
    background-color: transparent;
    font-size: 3vw;
    margin-top: 8%;
    margin-left: 0%;
    width: 100vw;
    box-shadow: none;
    }

    .card {
        width: 35vw !important;
        height: auto !important;
        margin-left: 0%;
        margin-top: 8%;
    }

    .card-text{
        font-size: 1.7vw;
        text-align: justify;
    }

    .card-title{
        font-size: 3vw;
    }

    .card-img-top{
        width: 34.7vw;
        height: 40vh;
    }

    

    .projetoBtn{
        font-size: 1.8vw;    
        border-radius: 15px;
       
    }

    .projetoBoxBtnPlanty{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12%;
    }
    
    .ProjectPost {
        gap: 2%;
        grid-template-columns: 40% 40%;
        grid-template-rows: 50% 50%;
        margin-left: 3%;
    }

    .andamentoBtn{
        border: 1px solid #4D2177;
        background-color: transparent;
        color: #4D2177;
    }

    /* Studying */

    .study{
        height: auto;
    }
    .study > h1 {
        background-color: transparent;
        font-size: 3vw;
        width: 25vw;
        margin-top: 10%;
        margin-bottom: 2%;
        box-shadow :none;
     }
    
    .study > figure img {
        width: 5vw;
    }

    /* Contact me */

    .contact {
        background-color: #4D2177;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: 0px 36px 55px -6px rgba(0,0,0,0.55);
        margin-top: 10%;
    }
    
    
    .infoContact {
        display: flex;
        flex-direction: column;
        width: 50vw;
        margin-left: 10%;
    }

    .infoContact h1 {
        font-size: 4vw;
    }
    
    .contact > figure {
         display: flex;
         justify-content: right;
         margin-left: 10%;
    }

    .contact > figure img {
        width: 20vw;
    }
    
    .gmail img, .linkedin img, .github img {
        margin-right:2%; 
        padding-bottom: 4%;
        width: 3vw;
    
    }
    
    .gmail p, .linkedin p, .github p {
        font-size: 2vw;
    }
    
    /* Copyright */

    .copyrigth{
        margin-top: 2%;
        font-size: 2vw;
       
    }

}