/* Color Variables */
/* ************ */



a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  line-height: 1.5;
}



.links__list {
  font-size: 20px;
  list-style: none;
}

.links__list-item {
  margin-bottom: 15px;
}

.link__first {
  position: relative;
}
.link__first:after {
  content: '';
  border-top: 2px solid #a2a2a2;
  border-right: 2px solid #a2a2a2;
  display: block;
  position: absolute;
  right: -0.8em;
  top: 50%;
  height: 0.5em;
  width: 0.5em;
  transform: translate3d(0, -50%, 0) rotate(45deg);
  transition: right 0.3s;
}
.link__first:hover:after {
  right: -1em;
}

.link__second {
  position: relative;
}
.link__second:after {
  content: '';
  background-color: #d5d5d5;
  border: 2px solid #d5d5d5;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1.5em;
  width: 1.5em;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  z-index: -1;
  transition: transform 0.3s ease;
}
.link__second:hover:after {
  transform: translate3d(-50%, -50%, 0) scale(1, 1);
}

.link__third {
  position: relative;
}
.link__third:after {
  background-color: #AE71EB;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.1em;
  width: 0;
  transition: 0.3s width ease-in-out;
}
.link__third:hover:after {
  width: 100%;
}

.link__fourth {
  position: relative;
}
.link__fourth:after {
  background-color: #AEEB71;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 0;
  z-index: -1;
  transition: 0.3s width ease-in-out;
}
.link__fourth:hover:after {
  width: 100%;
}

.link__fifth {
  position: relative;
}
.link__fifth:after {
  background-color: #F90;
  content: '';
  height: 100%;
  position: absolute;
  left: 0;
  width: 0;
  transition: left;
}
.link__fifth:hover:after {
  width: 2px;
  animation: cylon 3s linear infinite;
  z-index: -1;
}

.link__six {
  position: relative;
}
.link__six:hover:before {
  background-image: url("https://25.media.tumblr.com/95a1a280c7bea93f50a95bc0330728a3/tumblr_mjs7qyEBGi1s6guyso1_250.gif");
  background-size: contain;
  content: '';
  display: inline-block;
  position: absolute;
  left: -5px;
  top: 50%;
  height: 1.5em;
  width: 1.5em;
  transform: translate3d(0, -50%, 0);
}
.link__six:hover:first-letter {
  color: transparent;
}

.link__seven {
  position: relative;
}
.link__seven:before {
  background-color: #EBBC71;
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 0.1em;
  width: 0;
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}
.link__seven:after {
  background-color: #EBBC71;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 0.1em;
  width: 0;
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}
.link__seven:hover:before, .link__seven:hover:after {
  left: 0;
  width: 100%;
}

@keyframes cylon {
  0% {
    left: 0;
    width: 2px;
  }
  25% {
    width: 10px;
  }
  50% {
    left: 100%;
    width: 2px;
  }
  75% {
    width: 10px;
  }
  100% {
    left: 0;
    width: 2px;
  }
}