/* ----- MAIN GRID ----- */
.grid {
  width:auto;
  display: grid;
  grid-template-areas:"Tbar Tbar Tbar Tbar Tbar Tbar Tbar Tbar"
                      "left nav1 nav2 nav3 nav4 nav5 nav6 right"
                      "left con con con con con con right"
                      "left foot foot foot foot foot foot right";
  grid-template-rows: 20vw 3vw auto 3vw;
  grid-template-columns: 14vw repeat(6, 11.25vw) 14vw;
  grid-gap: .5vw .5vw;
}

.all {
  background-color: #000;
}

/* Title Bar With Logo */
.Tbar{
  grid-area: Tbar;
  background-image: linear-gradient(to bottom, #690069, #000);
  border: .2vw solid #000;
  border-radius: .5vw;
}

.Logo {
  width: auto;
  height: 90%;
  display: flex;
  margin-left: 5vw;
}

/* Navigation */
.navbar{
  font-family: 'Julius Sans One', sans-serif;
  border: .1vw solid black;
  border-radius: .3vw;
  text-align: center;
  padding: .5vw 0vw;
  font-size: 1.5vw;
  position: relative;
  transition: .5s;
  animation: rev 1s linear, rev2 1s linear;
  text-decoration: none;
}

.navbar:active{
  top: .5vw;
}

.navbar:hover{
  background-color: #2c2c2c;
  transform: scale(.95);
  color: #6e6e6e;
}

.nav1{
  grid-area: nav1;
  background-color: #af0000;
}

.nav2{
  grid-area: nav2;
  background-color: #690000;
}

.nav3{
  grid-area: nav3;
  background-color: #af0000;
}

.nav4{
  grid-area: nav4;
  background-color: #690000;
}

.nav5{
  grid-area: nav5;
  background-color: #af0000;
}

.nav6{
  grid-area: nav6;
  background-color: #690000;
}

/* Sides */
.left{
  grid-area: left;
  background-color: #000;
}

.right{
  grid-area: right;
  background-color: #000;
}

/* Content */
.con{
  grid-area: con;
  background-color: #bbaaee;
  z-index: 2;
}

/* Footer */
.foot{
  grid-area: foot;
  background-color: #ccaaff;
}

a {
  color: #000;
  font-size: 1vw;
}

p {
  font-size: 1vw;
}

h2 {
  font-size: 3vw;
}

h3 {
  font-size: 1.5vw;
}

li {
  font-size: 1vw;
}


/*---------------------------
CSS Grid + Mobile Support
---------------------------*/
@supports (grid-area: auto) {

  @media screen and (max-width: 35em){
    .grid {
      width: auto;
      display: grid;
      grid-template-areas:
          "Tbar Tbar Tbar Tbar Tbar Tbar"
          "nav1 nav2 nav3 nav4 nav5 nav6"
          "con con con con con con"
          "left left left right right right"
          "foot foot foot foot foot foot";
      grid-template-columns: repeat(6, 16.6667%);
      grid-template-rows: 17vw 3vw auto repeat(3, 5vw);
    }

    li {
      font-size: 5vw;
    }

    h2 {
      font-size: 10vw;
    }

  }

}

@keyframes rev {
  0% {transform: translateY(60px);}
  75% {transform: translateY(-5px);}
  90% {transform: translateY(2.5px);}
  100% {transform: translateY(0px);}
}

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