/* ----- MAIN GRID ----- */
.grid {
  width:auto;
  height: auto;
  display: grid;
  grid-template-areas:"Tbar Tbar Tbar"
                      "menu menu menu"
                      "con con con"
                      "left left left"
                      "right right right"
                      "foot foot foot";
  grid-template-rows: 20vw 3vw auto 3vw 11vw 3vw;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: .5vw .5vw;
}

.all {
  background-color: #000;
  max-width: 100vw;
  display: flex;
  font-family: 'Cuprum', sans-serif;
}

/* Title Bar With Logo */
.Tbar{
  grid-area: Tbar;
  background-image: linear-gradient(to bottom, #3f0059, #000);
  border: .2vw solid #000;
  display: flex;
  font-family: 'Cuprum', sans-serif;
}

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

.neonB {
  color: #000;
  text-shadow:
    0 0 5px #bae,
    0 0 10px #bae,
    0 0 20px #bae,
    0 0 40px #3b348a,
    0 0 80px #3b348a,
    0 0 90px #000;
  padding: 2vw .5vw 2vw 2vw;
  margin: 2vw 0 2vw 1vw;
}

.neonR {
  color: #000;
  text-shadow:
    0 0 5px #bae,
    0 0 10px #bae,
    0 0 20px #bae,
    0 0 40px #be344c,
    0 0 80px #be344c,
    0 0 90px #000;
  padding: 2vw 2vw 2vw .5vw;
  margin: 2vw 1vw 2vw 0;
}

/* Menu */
.menuA {
  grid-area: menu;
	border-bottom: .1vw solid #000;
  animation: revU 1s ease-out, rev2 1s linear;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	list-style-type: none;
	padding: .5vw 2vw;
	margin: 0;
	background: #000;
}

.menu li a {
	display: block;
	text-decoration: none;
  font-family: 'Cuprum', sans-serif;
  font-size: 3vw;
	color: #000;
	padding: .75vw 1.5vw;
}

.menu li {
  background-color: #be344c;
  margin: 0;
  padding: 0;
}

.menu li a:active{
  top: .5vw;
}

.menu li a:hover{
  background-color: rgba(50,50,50,.5);
  transform: scale(.90);
  color: #bbb;
  border: #131313;
  transition: .5s;
}

/* Sides */
.left {
  grid-area: left;
  display: flex;
  background-color: #be344c;
  font-family: 'Cuprum', sans-serif;
  z-index: 3;
  position: fixed;
  bottom: 0;
  width: 95.75vw;
  margin: 0;
  animation: revL 1s ease-out, rev2 1s linear;
}

.left nav {
  display: flex;
  align-items: center;
  text-align: center;
  margin: auto;
}

.left h5 {
  margin: 1.5vw auto 1vw auto;
  padding: 1vw
}

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

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



/* Content */
.con{
  grid-area: con;
  max-width: 100vw;
  font-family: 'Cuprum', sans-serif;
  background-color: #bbaaee;
  z-index: 2;
  padding: 1vw 1vw 1vw 1vw;
  margin-top: 2vw;
  border: .1vw solid #000;
}

/* Blog Pots */
.post {
  display: flex;
  background-color: lavender;
  flex-direction: column;
  align-items: center;
  margin: 1vw;
  border: .1vw solid #000;
}

.bTit {
}

.post h3 {
align-self: center;
margin: 1vw auto 0 auto;
}

.date {
  font-size: 2vw;
  align-self: flex-end;
  margin: .5vw 1vw 1vw auto;
}

.bCon {
  align-self: flex-start;
  margin: 1vw;
}

.bCon h4, .bCon h5 {
padding: 1vw auto .5vw 1vw;
margin: 1.5vw auto .75vw 1.5vw;
}

.bCon p {
  padding: 1vw;
  margin: 0 .5vw 1vw .5vw;
}

/* Footer */
.foot{
  grid-area: foot;
  background-color: #000;
  color: #ccc;
  display: inline-block;
  padding-bottom: 21vw;
}

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

.menu a, .left a:hover {
  color: #777;
}

p {
  font-size: 3vw;
  padding: 0 1vw 0 1vw;
  margin: .5vw 1vw .5vw 1vw;
}

h1 {
  font-size: 7vw;
  padding: 0 3vw 0 3vw;
  margin: 3vw 3.5vw 1vw 3.5vw;
}

h2 {
  font-size: 5.5vw;
  padding: 0 2.5vw  0 2.5vw;
  margin: 5vw 2.5vw 1vw 2.5vw;
}

h3 {
  font-size: 4vw;
  padding: 0 2vw 0 2vw;
  margin: 2.5vw 2vw 1vw 2vw;
}

h4 {
  font-size: 3.5vw;
  padding: 0 2vw 0 2vw;
  margin: 2.5vw 1.5vw 1vw 1.5vw;
}

h5 {
  font-size: 3vw;
  padding: 0 1vw 0 1vw;
  margin: 2vw 1vw 1vw 1vw;
}

li {
  font-size: 3vw;
  padding: 0 1vw 0 1vw;
  margin: .5vw 1vw .5vw 1vw;
}

@keyframes revU {
  0% {transform: translateY(60px);}
  100% {transform: translateY(0px);}
}

@keyframes revL {
  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){
    .grid {
      width: auto;
      display: grid;
      grid-template-areas:
          "Tbar Tbar Tbar"
          ". menu ."
          "left con right"
          "foot foot foot";
      grid-template-columns: 1fr 3fr 1fr;
      grid-template-rows: 17vw 3vw auto 3vw;
    }

    .menu li a {
      font-size: 1.5vw;
    }

    .con {
      margin-top: 0
    }

    .date {
      font-size: .75vw;
    }

    .left {
      z-index: 1;
      flex-direction: column;
      margin-left: 5.5vw;
      padding-right: 4vw;
      bottom: 4.5vw;
      width: 14vw;
    }

    .left a {
      font-size: 1vw;
      margin: auto;
    }

    .left h5 {
      font-size: 1.25vw;
      margin: auto;
      padding: .5vw .5vw 0vw .5vw;
    }

    .left nav {
      display: flex;
      flex-direction: column;
    }

    .foot {
      margin-bottom: 0;
      padding-bottom: 0;
    }

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

    p {
      font-size: 1.5vw;
    }

    h1 {
      font-size: 5vw
    }

    h2 {
      font-size: 4vw;
    }

    h3 {
      font-size: 3vw;
    }

    h4 {
      font-size: 2.5vw;
    }

    h5 {
      font-size: 1.5vw;
    }

    li {
      font-size: 1.5vw;
    }

  }

}