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

    .euImg,.eu-animation{
        display: none;
    }
    .eu h1 {
        font-size: 3em;
    }
    
    .eu p {
        font-size: 1.3rem;
    }
    .contexto-eu{
        margin-top: -30vh;
    }
    .contexto-eu p{
        font-size: 14px;
    }
    .textWhite{
        font-size: 74px;
    }
    .textBlue{
        margin-top: -46px;
        margin-left: 150px;
        font-size: 70px;
    }
    .container_sobre{
        height: 100vh;
        flex-direction: column;
        display: flex;
    }
    .textSobre{
        margin-top: -17vh;
        width: 100%;
        height: 100%;
    }
    .contexto-eu{
        height: 100%;
        width: 100%;
    }
    .icone-skiil{
      margin: 10px 5px;
    }
    .icone-skiil p{
      margin-top: 8px;
      font-size: 11px;
    }
    .skills-icons i {
      font-size: 25px;
    }
    .left{
        margin-left: 0;
    }
    .right{
        margin-right: 0;
    }
    .mockup img{
        width: 98vw;
        height:34vh;
    }
    .tituloProjeto{
        font-size: 75px;
    }

    .text-projeto h1{
        margin-top: -5.9vh;
        font-size: 57px;
    }
    .text-projeto p{
        margin-top: -1.2vh;
        font-size: 26px;
    }
    .card-certificado{
        margin: 3vh;
        width: 290px;
        height: 240px;
      }
    svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #ffffff;
        font-size: 36px;
    }
    .button {
        width: 40px;
        height: 40px;
        border-radius: 50px;
        margin-inline: 9px;
      }
      .rede-sociais {
        margin-top: 0vh;
      }
      .button svg {
        width: 30px;
        height: 30px;
      }
      .button::before {
        width: 45px;
        height: 45px;
        border-radius: 50px;
      }
      .button-1 {
        padding-block: 0.5rem;
        padding-inline: 1rem;
        font-size: 5vh;
      }
      .container-rede-sociais {
        margin-bottom: 5vh;
        margin-top:0vh;
      }
      .icon-1 {
        width: 36px;
        height: 36px;
        transition: all 0.3s ease-in-out;
      }

}
@media only screen and (min-width: 345px) and (max-width: 600px) {

    .euImg,.eu-animation{
        display: none;
    }
    .eu h1 {
        font-size: 3em;
    }
    
    .eu p {
        font-size: 1.5rem;
    }
    .contexto-eu{
        margin-top: -30vh;
    }
    .contexto-eu p{
        font-size: 14px;
    }
    .textWhite{
        font-size: 75px;
    }
    .textBlue{
        margin-top: -54px;
        margin-left: 195px;
        font-size: 65px;
    }
    .container_sobre{
        height: 95vh;
        flex-direction: column;
        display: flex;
    }
    .textSobre{
        margin-top: -30vh;
        width: 100%;
        height: 100%;
    }
    .contexto-eu{
        height: 100%;
        width: 100%;
    }
    .icone-skiil{
      margin: 10px 10px;
    }
    .icone-skiil p{
      margin-top: 8px;
      font-size: 12px;
    }
    .skills-icons i {
      font-size: 30px;
    }
    .left{
        margin-left: 0;
    }
    .right{
        margin-right: 0;
    }
    .mockup img{
        width: 98vw;
        height:34vh;
    }
    .tituloProjeto{
        font-size: 80px;
    }

    .text-projeto h1{
        margin-top: -5.9vh;
        font-size: 57px;
    }
    .text-projeto p{
        margin-top: -1.2vh;
        font-size: 26px;
    }
    .card-certificado{
        margin: 3vh;
        width: 400px;
        height: 270px;
      }
    svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #ffffff;
        font-size: 42px;
    }
    .button {
        width: 45px;
        height: 45px;
        border-radius: 50px;
        margin-inline: 14px;
      }
      .rede-sociais {
        margin-top: 0vh;
      }
      .button svg {
        width: 34px;
        height: 34px;
      }
      .button::before {
        width: 50px;
        height: 50px;
        border-radius: 50px;
      }
      .button-1 {
        padding-block: 0.6rem;
        padding-inline: 1.2rem;
        font-size: 5vh;
      }
      .container-rede-sociais {
        margin-bottom: 6vh;
        margin-top:0vh;
      }
      .icon-1 {
        width: 38px;
        height: 38px;
        transition: all 0.3s ease-in-out;
      }
      
}
@media only screen and (min-width: 601px) and (max-width: 821px) {
    .textWhite{
        font-size: 90px;
        margin-left: 10px;
    }
    .textBlue{
        margin-top: -50px;
        margin-left: 180px;
        font-size: 87px;
    }
    .euImg,.eu-animation {
        display: none;
    }  
    .eu h1 {
        font-size: 4.1em;
    }
    .container_sobre{
        height: 70vh;
        width: 100%;
        background-color: #000;
        display: flex;
    }
    .contexto-eu p{
        font-size: 20px;
    }

    .icone-skiil{
      margin: 10px 24px;
    }
    .icone-skiil p{
      margin-top: 8px;
      font-size: 15px;
    }
    .skills-icons i {
      font-size: 40px;
    }
    .destaque{
        font-size: 90px;
    }
    .text-projeto h1{
        margin-top: -5.9vh;
        font-size: 80px;
    }
    .left{
        margin-left: 0;
    }
    .right{
        margin-right: 0;
    }
    .mockup img{
        width: 86vw;
        height:34vh;
    }
    .text-projeto p{
        margin-top: -1.2vh;
        font-size: 48px;
    }
    svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #ffffff;
        font-size: 72px;
    }
    .button {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        margin-left: 38px;
      }
      
      .button svg {
        width: 48px;
        height: 48px;
      }
      .button::before {
        width: 75px;
        height: 75px;
        border-radius: 50px;
      }
}

@media only screen and (min-width: 821px) and (max-width: 1025px) {
    .euImg,.eu-animation {
        display: none;
    }  
    .eu h1 {
        font-size: 4.5em;
    }
    .container_sobre{
        height: 70vh;
        width: 100%;
        background-color: #000;
        display: flex;
    }
    .contexto-eu p{
        font-size: 20px;
    }
    .textWhite{
        font-size: 110px;
        margin-left: 10px;
    }
    .textBlue{
        margin-top: -60px;
        margin-left: 250px;
        font-size: 105px;
    }
    .icone-skiil{
      margin: 10px 30px;
    }
    .icone-skiil p{
      margin-top: 8px;
      font-size: 17px;
    }
    .skills-icons i {
      font-size: 50px;
    }
    .destaque{
        font-size: 115px;
    }
    .text-projeto h1{
        margin-top: -5.9vh;
        font-size: 80px;
    }
    .left{
        margin-left: 0;
    }
    .right{
        margin-right: 0;
    }
    .mockup img{
        width: 86vw;
        height:34vh;
    }
    .text-projeto p{
        margin-top: -1.2vh;
        font-size: 48px;
    }
    svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #ffffff;
        font-size: 100px;
    }
    .button {
        width: 90px;
        height: 90px;
        border-radius: 50px;
        margin-left: 50px;
      }
      
      .button svg {
        width: 58px;
        height: 58px;
      }
      .button::before {
        width: 95px;
        height: 95px;
        border-radius: 50px;
      }

}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .left{
        margin-left: 0;
    }
    .right{
        margin-right: 0;
    }
    .mockup img{
        width: 45vw;
        height:40vh;
    }
    .destaque{
        font-size: 75px;
    }
    .text-projeto h1{
        margin-top: -5.9vh;
        font-size: 75px;
    }
    svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #ffffff;
        font-size: 124px;
    }
    .button {
        margin-left: 80px;
      }
      
      
  }

@media only screen and (min-width: 1441px) {

    .textWhite{
    margin-left: -65px;
    font-size: 9.5vw;
    text-shadow: 7px 7px 9px #020096d8;
    }
    .textBlue{
        margin-top: -87px;
        margin-left: 335px;
        font-size: 10.5vw;
        text-shadow: 5px 5px 10px #ffffff8f;
    }
    .tituloProjeto{
        font-size: 130px;
    }
    .contexto-eu p{
        margin-bottom: 16px;
        font-size: 25px;
    }
    .destaque{
        font-size: 110px;
    }
    .skills-icons i{
        font-size: 76px;
    }
}
@media only screen and (min-width: 1640px) {

.euImg {
  width: 30%;
  object-fit: contain;
}

.overlay {
  width: 34%;
  height: 32vh;
}
}
/* Responsividade do calendario */
@media only screen and (min-width: 190px)and (max-width: 380px)  {
    .ContributionCalendar-grid{
        height: 16vh;
      }
      .total-commits{
        margin-left: 0vw;
      }
      .total-commits p{
        font-size: 14px;
      }
      .container-meses p{
        margin-inline: -45px;
        font-size: 8px;
      }

      .float-right{
        font-size: 12px;
      }

      .calendar-container h1{
        font-size: 6vh;
      }
      .legenda-commits{
        margin-top: -60px;
        margin-left: 26vw;
        font-size: 14px;
      }
      .cor{
        height: 8px;
        width: 8px;
        margin-inline: 7px;
      }
      #github-calendar-01 {
        padding: 20px;
        padding-bottom: 70px;
      }
}
@media only screen and (min-width: 380px)and (max-width: 550px)  {
    .ContributionCalendar-grid{
        height: 16vh;
      }
      .total-commits{
        margin-left: 0vw;
      }
      .total-commits p{
        font-size: 14px;
      }
      .container-meses p{
        margin-inline: -45px;
        font-size: 10px;
      }
      #github-calendar-01 {
        padding: 20px;
        padding-bottom: 70px;
      }
      .float-right{
        font-size: 14px;
      }
      .calendar-container h1{
        font-size: 6vh;
      }
      .legenda-commits{
        margin-top: -60px;
        margin-left: 32vw;
        font-size: 14px;
      }
      .cor{
        height: 8px;
        width: 8px;
        margin-inline: 7px;
      }
}
@media only screen and (min-width: 550px)and (max-width: 660px)  {
    .ContributionCalendar-grid{
        height: 16vh;
      }
      .total-commits{
        margin-left: -240px;
      }
      .total-commits p{
        font-size: 14.5px;
      }
      .container-meses p{
        margin-top: -6px;
        margin-inline: -45px;
        font-size: 14px;
      }

      .float-right{
        font-size: 14px;
      }
      .legenda-commits{
        margin-top: -18px;
        margin-left: 54vw;
        font-size: 16px;
      }
      .cor{
        height: 10px;
        width: 10px;
        margin-inline: 8px;
      }
}
@media only screen and (min-width: 660px)and (max-width: 867px)  {
    .ContributionCalendar-grid{
      height: 22vh;
    }
      .total-commits{
        margin-left: -360px;
      }
      .total-commits p{
        font-size: 16px;
      }
      .container-meses p{
        margin-top: -6px;
        margin-inline: -35px;
        font-size: 15px;
      }
      .container-certificados {
        margin-top:750px;
      }
      .float-right{
        font-size: 14px;
      }
      .legenda-commits{
        margin-top: -18px;
        margin-left: 60vw;
        font-size: 17px;
      }
      .cor{
        height: 10px;
        width: 10px;
        margin-inline: 10px;
      }
}
@media only screen and (min-width: 867px)and (max-width: 1150px)  {
    .ContributionCalendar-grid{
        height: 18vh;
      }
      .total-commits{
        margin-left: -350px;
      }
      .total-commits p{
        font-size: 20px;
      }
      .container-meses p{
        margin-top: -6px;
        margin-inline: -25px;
        font-size: 15.5px;
      }
      .legenda-commits{
        margin-top: -27px;
        margin-left: 62vw;
        font-size: 17px;
      }
      .cor{
        height: 11px;
        width: 11px;
        margin-inline: 11px;
      }
}
@media only screen and (min-width: 1150px)and (max-width: 1399px)  {
    .ContributionCalendar-grid{
        height: 22vh;
      }
      .total-commits{
        margin-left: -410px;
      }
}
@media only screen and (min-width: 1400px)and (max-width: 1700px)  {
    .ContributionCalendar-grid{
        height: 26vh;
      }
}
@media only screen and (min-width: 1700px)and (max-width: 2000px)  {
    .ContributionCalendar-grid{
        height: 320px;
      }
      .container-certificados {
        margin-top:680px;
      }
}