@import url(https://fonts.googleapis.com/css?family=Cherry+Cream+Soda);

.nav {
  height: 5vh;
  position: fixed;
  left: -2em;
  top: 0;
  z-index: 1000;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.nav:hover .text {
  transform: rotateY(0deg)
}

.text {
  position: absolute;
  left: 0px;
  top: 6vh;
  z-index: 980;
  height: 50vh;
  background: rgb(2, 67, 67);
  border-right: 1px solid hsla(0,0%,0%,.3);
  transition: transform .6s linear;
  backface-visibility: hidden;
  transform-origin: left;
  transform: perspective(1000px) rotateY(90deg);

    & a {
      display: block;
      width: 26vw;
      height: 8vh;
      line-height: 64px;
      text-indent: 2vw;
      text-decoration: none;
      font-size: 2vw;
      color: gold;
      text-shadow: 0 1px 0 hsla(0,0%,0%,1);
      transition: all 1s ease;
      margin: 5%;
  
         &:hover {
            color: hsla(255,255%,255%,1);
            transform: translateX(10px);
         }
    } 
}

@media screen and ( max-height:550px ) {
    .info {
      display: none;
    }
}

@media screen and ( max-width:450px ) {
    h1 {
      font-size: 7.5vw;
    }
}