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

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #303F9F;
}

ul {
  display: flex;
  color: white;
  list-style-type: none;

  &:hover {
    li a {
      transform: scale(1.2);
      opacity: 0.5;
      filter: blur(2px);
    }
  }

  li {
    margin: 1em;

    a {
      position: relative;
      display: block;
      padding: 5px;
      font-family: Lato, sans-serif;
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.5s;

      &:hover {
        transform: scale(2);
        opacity: 1;
        filter: blur(0);
      }

      &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: #FF5252;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }

      &:hover::before {
        transform: scaleX(1);
        transform-origin: left;
      }
    }
  }
}
