Follow Along Links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Follow Along Links</title>

  <link rel="stylesheet" href="./styles.css"/>
</head>
<body>
  <span class="pill"></span>

  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>

  <article class="article">
    <p>Gingerbread chocolate candy topping. <a href="#">Tiramisu</a> cake lollipop sweet. Sweet roll muffin gummi bears <a href="#">chocolate</a> cake bear claw marshmallow carrot cake. Tart sesame snaps chocolate cake ice cream cookie sugar plum halvah dragée. Icing topping marshmallow <a href="#">soufflé</a> biscuit. Jujubes pie dragée <a href="#">jujubes</a> biscuit.</p>

    <p>Tiramisu tart jelly-o sesame snaps jelly beans bear claw carrot cake. Lollipop jelly-o halvah marshmallow. Sweet roll cake liquorice bonbon caramels <a href="#">dessert</a>. Cookie tart sesame snaps bonbon <a href="#">brownie</a> candy.</p>

    <p>Canes apple pie pie. Chocolate cake <a href="#">muffin</a> cotton candy wafer fruitcake lollipop. Lollipop pastry marshmallow marzipan candy. Cheesecake bonbon dessert lollipop chupa chups. Powder sweet icing danish. Marzipan powder <a href="#">macaroon</a>. Jelly powder chupa chups.</p>

    <p>Marzipan oat cake icing tootsie roll cake chocolate cotton candy. Cupcake gingerbread powder. Chupa chups jujubes pastry  <a href="#">chocolate</a> bar chocolate. Jelly toffee <a href="#">marshmallow</a> sesame snaps pie dessert tart chocolate cake. Sesame snaps donut liquorice. Dessert muffin cake. Cheesecake macaroon topping caramels fruitcake.</p>

    <p>Marzipan oat cake icing tootsie roll cake chocolate cotton candy. Cupcake gingerbread powder. Chupa chups jujubes pastry chocolate chocolate bar chocolate. <a href="#">Jelly</a> toffee marshmallow sesame snaps pie dessert tart chocolate cake. Sesame snaps donut liquorice. Dessert muffin cake. Cheesecake <a href="#">macaroon</a> topping caramels fruitcake.</p>
  </article>

  <script src="./scripts.js"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Kavivanar');

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

body {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}

a {
  text-decoration: none;
  position: relative;
  z-index: 10;
  transition: all .7s;
}

.pill {
  background: rgba(255, 255, 255, .8);
  color: #000;
  border-radius: 5px;
  position: absolute;
  transition: all .3s;
  z-index: 1;
  opacity: 0;
}

.menu a {
  font-family: 'Kavivanar', cursive;
  font-size: 18px;
  padding: 5px 10px;
  margin: 0 10px;
  color: #fff;
}

.menu a:hover { color: #000; }

.article {
  width: 575px;
  padding: 50px;
  text-align: justify;
  border-radius: 10px;
  background: rgba(255, 255, 255,.5);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.article p { margin-bottom: 15px; }
.article p:last-child { margin-bottom: 0; }

.article a {
  color: #4243FF;
  padding: 2px;
}

@media screen and (max-width: 600px) {
  .article {
    width: 80vw;
    height: 65vw;
    padding: 33px 50px;
    overflow: hidden;
  }

  .article p:nth-child(5n+3),
  .article p:nth-child(5n+4),
  .article p:nth-child(5n+5) {
    display: none;
  }
}

let links = document.querySelectorAll('a'),
    pill = document.querySelector('.pill');

function moveHover(e) {
  pill.style.opacity = 1;

  pill.style.height = `${e.toElement.offsetHeight}px`;
  pill.style.width = `${e.toElement.offsetWidth}px`;

  pill.style.top = `${e.toElement.offsetTop}px`;
  pill.style.left = `${e.toElement.offsetLeft}px`;
}

links.forEach(link => link.addEventListener('mouseenter', moveHover));