body {
  display: flex;
  -webkit-box-align: center;
  -webkit-box-pack: center;
          justify-content: center;
  font-family: 'Helvetica';
}

nav a {
  margin: 0 55px;
  text-decoration: none;
  color: #3e3e3e;
  font-size: 14px;
  font-weight: light;
}

nav {
  background-color: #ffffff;
  padding: 20px 45px;
  border-radius: 30px;
  box-shadow: 0 10px 40px -20px #1d1d1d;

  
}

.page-transition-element, .page-transition-element:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: #203a69;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.page-transition-element:after {
  content: "";
  background-color: white;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.page-transition-element_out {
  -webkit-animation: page-out .6s ease .3s forwards;
          animation: page-out .6s ease .3s forwards;
}

.page-transition-element_out:after {
  -webkit-animation: page-out .6s ease forwards;
          animation: page-out .6s ease forwards;
}

.page-transition-element_in {
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: page-in .6s ease forwards;
          animation: page-in .6s ease forwards;
}

.page-transition-element_in:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: page-in .6s ease .3s forwards;
          animation: page-in .6s ease .3s forwards;
}

@-webkit-keyframes page-in {
  from {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes page-in {
  from {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@-webkit-keyframes page-out {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
@keyframes page-out {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}