.sq {
  background-color: #bbaaee;
}

.js {
  background-color: lavender;
}

.jsTest {
  display: flex;
  align-items: center;
}

.jsTestRes {
  display: flex;
}

.right{
  grid-area: right;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #3b348a;
  font-family: 'Cuprum', sans-serif;
  z-index: 1;
  animation: revR 1s ease-out, rev2 1s linear;
}

.right nav {
  display: flex;
}

.right h5 {
  margin: 1.5vw auto 1vw auto;
}

.right a {
  text-decoration: none;
  padding: 1vw;
}

.right a:hover {
  color: #bbb;
  transition: .5s;
}

@keyframes revR {
  0% {transform: translateX(-300px);}
  100% {transform: translateX(0px);}
}

@keyframes rev2 {
  0% {transition: opacity:0;}
  75% {transition: opacity:25;}
  100% {transition: opacity:100;}
}

@supports (grid-area: auto) {

  @media screen and (min-width: 45em){
    .right {
      position: fixed;
      z-index: 1;
      flex-direction: column;
      margin-left: 75vw;
      padding-left: 4vw;
      padding-right: 1vw;
      bottom: 4.5vw;
    }

    .right a {
      font: 1vw;
    }

    .left h5 {
      font-size: 1.25vw;
    }

    .right nav {
      flex-direction: column;
    }
  }
}