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

body {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  height: 100dvh;
  z-index: -2;
  position: relative;
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}

.nav {
  display: flex;
  background-color: black;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  a {
    text-decoration: none;
    padding: 0.5rem 1rem;
    color: white;
    position: relative;
    z-index: 5;
    transition: 0.5s;

    &::before {
      content: '';
      position: absolute;
      background-color: transparent;
      box-shadow: inset 4px 4px 4px #fff8, inset -4px -4px 4px #fff8;
      scale: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      transition: 0.5s;
    }
  }

  a:hover {
    &::before {
      scale: 1;
    }
  }
}