@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Open+Sans:wght@300&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

:root {
  --font-title: "Josefin Sans", sans-serif;
  --font-text: "Open Sans", sans-serif;
  --font-button: "Josefin Sans", sans-serif;
  --font-color: rgb(130, 254, 239);
}

/* .header-skill h1::after {
  content: "";
  position: absolute;
  border-top: solid 1.5rem #000000;
  border-left: solid 1.5rem transparent;
  border-right: solid 1.5rem transparent;
  border-bottom: solid 5rem transparent;
  top: 0rem;
} */

.div-devs:hover img {
  animation: rotaLogo 2s;
}

@keyframes rotaLogo {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-8deg);
  }
}

/*------------------------------------------------------------------*/
@media screen and (min-width: 1300px) {
  .section-skill {
    position: relative;
    height: 45rem;
    background-color: rgb(255, 255, 255);
  }

  .skills {
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 0rem;
    margin-left: 0rem;
    height: 35rem;
    position: relative;
    top: 3rem;
  }

  .header-skill {
    background-color: rgb(255, 255, 255);
    display: flex;
    height: 2rem;
    width: 100%;
    justify-content: center; /*aliamento horizontal*/
    align-items: center; /*aliamento vestical*/
    box-shadow: 0rem 0rem 1rem 0rem #66666641;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 4rem;
    margin-bottom: 0rem;
  }

  .div-devs {
    background-color: rgb(255, 255, 255, 0);
    border-radius: 1rem 1rem 1rem 1rem;
    text-align: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
  }

  .div-devs-e {
    background-color: rgba(245, 243, 243, 0.411);
    border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
    text-align: left;
    align-items: center;
    border: solid;
    border-width: 0px;
    z-index: 1;
    box-shadow: 0rem 0rem 1rem 0.5rem #66666641;
    height: 20rem;
  }

  .div-devs-e h3 {
    font-family: var(--font-text);
    font-size: 0.9rem;
    color: rgb(1, 29, 47);
    letter-spacing: 0.07rem;
    margin-top: 1rem;
    margin-left: 1rem;
  }

  .header-skill h1 {
    font-size: 1.5rem;
    font-variant-caps: small-caps;
    font-family: var(--font-title);
    text-align: center;
    justify-content: center; /*aliamento horizontal*/
    align-items: center; /*aliamento vestical*/
    color: #000000;
    background-color: #fff;
    display: flex;
    padding-top: 1rem;
    margin-bottom: 2rem;
  }

  .div-skill .img-git-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-linux-logo {
    position: relative;
    width: 4rem;
    height: 4rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-docker-logo {
    position: relative;
    width: 4rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-java-logo {
    position: relative;
    width: 3.5rem;
    height: 5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-mysql-logo {
    position: relative;
    width: 5rem;
    height: 5rem;
    opacity: 0.2;
    top: 0rem;
  }
  .div-skill .img-github-logo {
    position: relative;
    width: 3rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-html5-logo {
    position: relative;
    width: 2.5rem;
    height: 2.6rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-css-logo {
    position: relative;
    width: 3rem;
    height: 3rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-kubernetes-logo {
    position: relative;
    width: 3rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-jenkins-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 3px;
  }

  .div-skill .img-php-logo {
    position: relative;
    width: 3.5rem;
    height: 2rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-postgres-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-aws-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-angular-logo {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-javascript-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-docker-logo {
    position: relative;
    width: 4rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-springboot-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 0.5rem;
  }

  .div-skill .img-devsecops-logo {
    position: relative;
    width: 35rem;
    height: 20rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 0.5rem;
  }

  .div-devs p {
    text-align: center;
    font-family: var(--font-text);
    font-size: 1.55vh;
    letter-spacing: 0.09rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    margin-bottom: 0.8rem;
    color: rgb(1, 11, 65);
  }

  .div-skill h3 i {
    text-align: center;
  }

  .div-skill i {
    margin-top: 0.3rem;
    margin-left: 0.4rem;
  }

  .div-devs i {
    font-size: 2.5rem;
  }

  #id-linux {
    color: #000;
    background-color: #2f4f4f;
    font-size: 3.8rem;
    margin-left: 1rem;
  }

  /************************** CONHECIMENTOS GRID +1300PX ****************************/
  .skills {
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    grid-template-rows: repeat(32);
  }

  .div-devs:nth-child(1) {
    grid-column: 4 / 6;
    grid-row: 2 / 11;
  }
  .div-devs:nth-child(2) {
    grid-column: 12 / 15;
    grid-row: 2 / 10;
  }
  .div-devs:nth-child(3) {
    grid-column: 16 / 19;
    grid-row: 2 / 10;
  }
  .div-devs:nth-child(4) {
    grid-column: 23 / 26;
    grid-row: 1/ 11;
  }
  .div-devs:nth-child(5) {
    grid-column: 6 / 8;
    grid-row: 10 / 17;
  }
  .div-devs:nth-child(6) {
    grid-column: 21 / 24;
    grid-row: 10 / 17;
  }
  .div-devs:nth-child(7) {
    grid-column: 3 / 6;
    grid-row: 17 / 26;
  }
  .div-devs:nth-child(8) {
    grid-column: 24 / 27;
    grid-row: 17 / 26;
  }
  .div-devs:nth-child(9) {
    grid-column: 5 / 8;
    grid-row: 22 / 29;
  }
  .div-devs:nth-child(10) {
    grid-column: 9 / 12;
    grid-row: 25 / 32;
  }
  .div-devs:nth-child(11) {
    grid-column: 14 / 19;
    grid-row: 25 / 30;
  }
  .div-devs:nth-child(12) {
    grid-column: 19 / 24;
    grid-row: 25 / 33;
  }
  .div-devs:nth-child(13) {
    grid-column: 23 / 27;
    grid-row: 22 / 29;
  }
  .div-devs:nth-child(14) {
    grid-column: 12 / 18;
    grid-row: 30 / 40;
  }
  .div-devs:nth-child(15) {
    grid-column: 16 / 20;
    grid-row: 30 / 40;
  }
  .div-devs-e:nth-child(16) {
    grid-column: 8 / 21;
    grid-row: 15 / 26;
  }
}

@media screen and (min-width: 800px) and (max-width: 1299px) {
  .section-skill {
    position: relative;
    height: 45rem;
    background-color: rgb(255, 255, 255);
  }

  .skills {
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 0rem;
    margin-left: 0rem;
    height: 35rem;
    position: relative;
    top: 3rem;
  }

  .header-skill {
    background-color: rgb(255, 255, 255);
    display: flex;
    height: 2rem;
    width: 100%;
    justify-content: center; /*aliamento horizontal*/
    align-items: center; /*aliamento vestical*/
    box-shadow: 0rem 0rem 1rem 0rem #66666641;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 4rem;
    margin-bottom: 0rem;
  }

  .div-devs {
    background-color: rgb(255, 255, 255, 0);
    border-radius: 1rem 1rem 1rem 1rem;
    text-align: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
  }

  .div-devs-e {
    background-color: rgba(245, 243, 243, 0.411);
    border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
    text-align: left;
    align-items: center;
    border: solid;
    border-width: 0px;
    z-index: 1;
    box-shadow: 0rem 0rem 1rem 0.5rem #66666641;
    height: 26rem;
  }

  .div-devs-e h3 {
    font-family: var(--font-text);
    font-size: 0.9rem;
    color: rgb(1, 29, 47);
    letter-spacing: 0.07rem;
    margin-top: 1rem;
    margin-left: 1rem;
  }

  .header-skill h1 {
    font-size: 1.5rem;
    font-variant-caps: small-caps;
    font-family: var(--font-title);
    text-align: center;
    justify-content: center; /*aliamento horizontal*/
    align-items: center; /*aliamento vestical*/
    color: #000000;
    background-color: #fff;
    display: flex;
    padding-top: 1rem;
    margin-bottom: 2rem;
  }

  .div-skill .img-git-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-linux-logo {
    position: relative;
    width: 4rem;
    height: 4rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-docker-logo {
    position: relative;
    width: 4rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-java-logo {
    position: relative;
    width: 3.5rem;
    height: 5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-mysql-logo {
    position: relative;
    width: 5rem;
    height: 5rem;
    opacity: 0.2;
    top: 0rem;
  }
  .div-skill .img-github-logo {
    position: relative;
    width: 3rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-html5-logo {
    position: relative;
    width: 2.5rem;
    height: 2.6rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-css-logo {
    position: relative;
    width: 3rem;
    height: 3rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-kubernetes-logo {
    position: relative;
    width: 3rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-jenkins-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 3px;
  }

  .div-skill .img-php-logo {
    position: relative;
    width: 3.5rem;
    height: 2rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-postgres-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-aws-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-angular-logo {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-javascript-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-docker-logo {
    position: relative;
    width: 4rem;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-springboot-logo {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 0.5rem;
  }

  .div-skill .img-devsecops-logo {
    position: relative;
    width: 35rem;
    height: 20rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 0.5rem;
  }

  .div-devs p {
    text-align: center;
    font-family: var(--font-text);
    font-size: 1.55vh;
    letter-spacing: 0.09rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    margin-bottom: 0.8rem;
    color: rgb(1, 11, 65);
  }

  .div-skill h3 i {
    text-align: center;
  }

  .div-skill i {
    margin-top: 0.3rem;
    margin-left: 0.4rem;
  }

  .div-devs i {
    font-size: 2.5rem;
  }

  #id-linux {
    color: #000;
    background-color: #2f4f4f;
    font-size: 3.8rem;
    margin-left: 1rem;
  }

  /************************** CONHECIMENTOS GRID +1300PX ****************************/
  .skills {
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    grid-template-rows: repeat(32);
  }

  .div-devs:nth-child(1) {
    grid-column: 4 / 6;
    grid-row: 2 / 11;
  }
  .div-devs:nth-child(2) {
    grid-column: 12 / 15;
    grid-row: 2 / 10;
  }
  .div-devs:nth-child(3) {
    grid-column: 16 / 19;
    grid-row: 2 / 10;
  }
  .div-devs:nth-child(4) {
    grid-column: 23 / 26;
    grid-row: 1/ 11;
  }
  .div-devs:nth-child(5) {
    grid-column: 6 / 8;
    grid-row: 10 / 17;
  }
  .div-devs:nth-child(6) {
    grid-column: 21 / 24;
    grid-row: 10 / 17;
  }
  .div-devs:nth-child(7) {
    grid-column: 3 / 6;
    grid-row: 17 / 26;
  }
  .div-devs:nth-child(8) {
    grid-column: 24 / 27;
    grid-row: 17 / 26;
  }
  .div-devs:nth-child(9) {
    grid-column: 5 / 8;
    grid-row: 22 / 29;
  }
  .div-devs:nth-child(10) {
    grid-column: 9 / 12;
    grid-row: 25 / 32;
  }
  .div-devs:nth-child(11) {
    grid-column: 14 / 19;
    grid-row: 25 / 30;
  }
  .div-devs:nth-child(12) {
    grid-column: 19 / 24;
    grid-row: 25 / 33;
  }
  .div-devs:nth-child(13) {
    grid-column: 23 / 27;
    grid-row: 22 / 29;
  }
  .div-devs:nth-child(14) {
    grid-column: 12 / 18;
    grid-row: 30 / 40;
  }
  .div-devs:nth-child(15) {
    grid-column: 16 / 20;
    grid-row: 30 / 40;
  }
  .div-devs-e:nth-child(16) {
    grid-column: 8 / 21;
    grid-row: 15 / 26;
  }
}

@media screen and (max-width: 799px) {
  .section-skill {
    position: relative;
    height: 40rem;
    background-color: rgb(255, 255, 255);
  }

  .skills {
    justify-content: center;
    padding-left: 0rem;
    padding-right: 0rem;
    width: 100%;
  }

  .header-skill {
    background-color: rgb(255, 255, 255);
    display: flex;
    height: 2rem;
    width: 100%;
    justify-content: center; /*aliamento horizontal*/
    align-items: center; /*aliamento vestical*/
    box-shadow: 0rem 0rem 1rem 0rem #66666641;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 4rem;
    margin-bottom: 2rem;
  }

  .div-devs {
    background-color: rgb(255, 255, 255, 0);
    border-radius: 1rem 1rem 1rem 1rem;
    text-align: center;
    align-items: center;
    height: 2rem;
  }

  

  .div-devs-e {
    background-color: rgba(245, 243, 243, 0.411);
    border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
    text-align: left;
    align-items: center;
    border: solid;
    border-width: 0px;
    z-index: 1;
    box-shadow: 0rem 0rem 1rem 0.5rem #66666641;
    height: 26rem
  }

  .div-devs-e h3 {
    font-family: var(--font-text);
    font-size: 0.8rem;
    color: rgb(1, 29, 47);
    letter-spacing: 0.07rem;
    margin-top: 1rem;
    margin-left: 1rem
  }

  .header-skill h1 {
    font-size: 1.2rem;
    font-variant-caps: small-caps;
    font-family: var(--font-title);
    text-align: center;
    justify-content: center; /*aliamento horizontal*/
    align-items: center; /*aliamento vestical*/
    color: #000000;
    background-color: #fff;
    display: flex;
    padding-top: 1rem;
    margin-bottom: 2rem;
  }

  .div-skill .img-git-logo {
    position: relative;
    width: 1.5rem;
    height: 1.4rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-linux-logo {
    position: relative;
    width: 2.43em;
    height: 2.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-java-logo {
    position: relative;
    width: 2rem;
    height: 3rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-mysql-logo {
    position: relative;
    width: 3rem;
    height: 3rem;
    opacity: 0.2;
    top: 0rem;
  }
  .div-skill .img-github-logo {
    position: relative;
    width: 1.5rem;
    height: 1rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-html5-logo {
    position: relative;
    width: 1rem;
    height: 1.1rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-css-logo {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-kubernetes-logo {
    position: relative;
    width: 1.5rem;
    height: 1rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-jenkins-logo {
    position: relative;
    width: 1.5rem;
    height: 1.3rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 3px;
  }

  .div-skill .img-php-logo {
    position: relative;
    width: 1.5rem;
    height: 0.8rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-postgres-logo {
    position: relative;
    width: 1.5rem;
    height: 1.3rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-aws-logo {
    position: relative;
    width: 1.5rem;
    height: 1.3rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-angular-logo {
    position: relative;
    width: 2rem;
    height: 2rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-javascript-logo {
    position: relative;
    width: 1.5rem;
    height: 1.3rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-docker-logo {
    position: relative;
    width: 2.5rem;
    height: 1.2rem;
    opacity: 0.2;
    top: 0rem;
  }

  .div-skill .img-springboot-logo {
    position: relative;
    width: 2rem;
    height: 1.8rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 0.5rem;
  }

  .div-skill .img-devsecops-logo {
    position: relative;
    width: 30rem;
    height: 20rem;
    opacity: 0.2;
    top: 0rem;
    border-radius: 0.5rem;
  }

  .div-devs p {
    text-align: center;
    font-family: var(--font-text);
    font-size: 1vh;
    letter-spacing: 0.09rem;
    margin-top: 0.5rem;
    margin-left: 0.1rem;
    margin-bottom: 0.8rem;
    color: rgb(1, 11, 65);
  }

  .div-skill h3 i {
    text-align: center;
  }

  .div-skill i {
    margin-top: 0.3rem;
    margin-left: 0.4rem;
  }

  .div-devs i {
    font-size: 2.5rem;
  }

  #id-linux {
    color: #000;
    background-color: #2f4f4f;
    font-size: 3.8rem;
    margin-left: 1rem;
  }

  /************************** CONHECIMENTOS GRID +800PX ****************************/
  .skills {
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    grid-template-rows: repeat(40);
  }

  .div-devs:nth-child(1) {
    grid-column: 2 / 10;
    grid-row: 5 / 9;
  }
  .div-devs:nth-child(2) {
    grid-column: 12 / 15;
    grid-row: 1 / 11;
  }
  .div-devs:nth-child(3) {
    grid-column: 14 / 19;
    grid-row: 1 / 11;
  }
  .div-devs:nth-child(4) {
    grid-column: 19 / 22;
    grid-row: 1/ 11;
  }
  .div-devs:nth-child(5) {
    grid-column: 8 / 13;
    grid-row: 10 / 16;
  }
  .div-devs:nth-child(6) {
    grid-column: 16 / 23;
    grid-row: 10 / 16;
  }
  .div-devs:nth-child(7) {
    grid-column: 3 / 6;
    grid-row: 15 / 22;
  }
  .div-devs:nth-child(8) {
    grid-column: 20 / 25;
    grid-row: 15 / 25;
  }
  .div-devs:nth-child(9) {
    grid-column: 5 / 8;
    grid-row: 28 / 32;
  }
  .div-devs:nth-child(10) {
    grid-column: 6/13;
    grid-row: 34 / 40;
  }
  .div-devs:nth-child(11) {
    grid-column: 13 / 16;
    grid-row: 35 / 40;
  }
  .div-devs:nth-child(12) {
    grid-column: 16 / 20;
    grid-row: 35 / 40;
  }
  .div-devs:nth-child(13) {
    grid-column: 20 / 30;
    grid-row: 34 / 40;
  }
  .div-devs:nth-child(14) {
    grid-column: 10 / 15;
    grid-row: 40 / 46;
  }
  .div-devs:nth-child(15) {
    grid-column: 15 / 17;
    grid-row: 40 / 46;
  }
  .div-devs-e:nth-child(16) {
    grid-column: 4 / 25;
    grid-row: 15 / 32;
  }
}