* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  display: block;
  align-content: center;
  margin: auto;
  background-color: #f5f5f5;
  color: #767676;
}

h1 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 3em;
  text-align: center;
  padding: 50px;
}

.it {
  color: #767676;
  transition: all 0.3s ease;
}
.it:hover {
  transform: translate3d(0, -12px, 22px);
  color: #ff0266;
}
ul {
  list-style: none;
}
.skills {
  margin: 0 auto;
  justify-content: center;
  max-width: 90%;
}

.skills-list {
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding: 10px;
}

.skill {
  float: left;
  text-align: center;
  font-size: 5em;
  padding: 20px;
}

.skill div {
  width: 100px;
}

@media (max-width: 800px) {
  .skills-list {
    width: 500px;
    margin: auto;
  }
}

@media (max-width: 625px) {
  .skills-list {
    width: 350px;
    margin: auto;
  }
}