.skillset {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 80%;
  align-items: center;
  position: relative;
  margin-bottom: 2.5rem;
}
.skillset h3.skillsHeader {
  margin-bottom: 2.5rem;
  font-size: 3rem;
  font-weight: 700;
}
.skillset > .skill {
  align-self: center;
  display: flex;
  width: auto;
  height: 2rem;
  position: absolute;
  top: 5rem;
  font-size: 1.5rem;
  font-weight: 600;
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  transition: transform 1s;
}
.skillset > .skill.animated {
  font-size: 1.5rem;
  font-weight: 600;
}
.skillset .skills {
  height: 6rem;
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  margin-top: 1rem;
}
.skillset .skills .skill {
  align-self: center;
  display: flex;
  width: auto;
  height: 2rem;
  position: absolute;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  transition: transform 1s;
}
.skillset .skills .skill:first-of-type {
  left: 15%;
}
.skillset .skills .skill:nth-of-type(2) {
  left: 35%;
}
.skillset .skills .skill:nth-of-type(3) {
  left: 55%;
}
.skillset .skills .skill:nth-of-type(4) {
  left: 75%;
}
.skill.animated {
  position: absolute;
  height: 2rem;
  width: auto;
  font-size: 1.5rem;
  font-weight: 500;
  transform: rotate(1080deg);
}

@media all and (max-width: 900px) {
  .skillset .skills {
    height: 12rem;
  }

  .skillset .skills .skill:first-of-type {
    top: 25%;
    left: 15%;
  }
  .skillset .skills .skill:nth-of-type(2) {
    top: 25%;
    right: 15%;
    left: auto;
  }
  .skillset .skills .skill:nth-of-type(3) {
    top: 55%;
    left: 15%;
  }
  .skillset .skills .skill:nth-of-type(4) {
    top: 55%;
    right: 15%;
    left: auto;
  }
}

@media all and (max-width: 400px) {
  .skillset .skills .skill:first-of-type {
    top: 20%;
    left: 30%;
  }
  .skillset .skills .skill:nth-of-type(2) {
    top: 40%;
    left: 30%;
    right: auto;
  }
  .skillset .skills .skill:nth-of-type(3) {
    top: 60%;
    left: 15%;
  }
  .skillset .skills .skill:nth-of-type(4) {
    top: 60%;
    left: 60%;
  }
}