body {
  background-color: rgba(15, 15, 15, 0.856);
  color: white;
}
header {
  top: 0;
  height: 1.6em;
}
section {
  margin: 5em 1em;
}
.wrapper {
  padding-top: 1em;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  /* z-index: -3; */
}
.pos_left {
  /* for chrome and safari*/
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: anim;

  /*for firefox*/
  -moz-animation-duration: 0.5s;
  -moz-animation-name: anim;

  /* for opera*/
  -o-animation-duration: 0.5s;
  -o-animation-name: anim;

  /* Standard syntax*/
  animation-duration: 0.5s;
  animation-name: anim;
}
.x1 {
  filter: grayscale(30%);
}
.x1:hover {
  filter: none;
}

@-webkit-keyframes anim {
  from {
    margin-left: 100%;
    width: 3%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-moz-keyframes anim {
  from {
    margin-left: 100%;
    width: 3%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@-o-keyframes anim {
  from {
    margin-left: 100%;
    width: 3%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@keyframes anim {
  from {
    margin-left: 100%;
    width: 3%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
/* @media screen and (max-width: 1300px) {
  .wrapper {
    display: block;
  }
} */