/* Skills */
#skill h2 {
  top: 1.5vw;
  margin-bottom: 200px;
}

.skill-container {
  display: flex;
  margin: 100px auto 0px auto;
  max-width: 1300px;
  /* border: solid red 1px; */
}

.skill-container h3 {
  font-size: 30px;
  font-weight: bold;
  padding: 60px 0px 30px 0px;
}

.skill-container p {
  font-size: 20px;
  text-align: justify;
  line-height: 30px;
}

.container-left {
  width: 50%;
  text-align: left;
}

aside {
  width: 50%;
  text-align: left;
  margin-left: 80px;
}

.skill-card {
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: #573b85 3px 3px 25px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 15px;
  width: 650px;
  height: 350px;
  transition: all 0.5s;
  filter: blur(3px);
}

.item {
  padding: 35px;
}

.item img {
  width: 90px;
}

/* Animation skill card*/
.skill-right {
  transform: perspective(800px) rotateX(10deg) rotateY(25deg) scale(0.9);
  left: -20px;
}

.skill-right:hover {
  transform: perspective(800px) rotateX(10deg) rotateY(-15deg) translateY(-50px)
    scale(1);
  filter: blur(0);
  opacity: 1;
}

.skill-left {
  transform: perspective(800px) rotateX(10deg) rotateY(-15deg) scale(0.9);
  right: -20px;
}

.skill-left:hover {
  transform: perspective(800px) rotateX(10deg) rotateY(25deg) translateY(-50px)
    scale(1);
  filter: blur(0);
  opacity: 1;
}