.grid {
  width: auto;
  height: auto;
  display: grid;
  grid-template-areas:
                      "Main Home"
                      "Main Artwork"
                      "Main Photography"
                      "Main Programing"
                      "Main Blog"
                      "Main AboutMe"
                      "Footer Footer";
  grid-template-columns: 69vw 28.5vw;
  grid-template-rows: repeat(6, 7vw) 3vw;
  grid-gap: .5vw .5vw;
}

.all {
  background-image: linear-gradient(to bottom, #690069, #000);
  z-index: 0;
  animation: mv 2.5s linear;
}

.Main{
  grid-area: Main;
  background: url(MainBackground.JPG) no-repeat;
  background-size: 100%;
  z-index: 2;
  height: 44.5vw;
  border: .1vw solid #000;
  animation: mini 2.5s linear;

}

.Logo {
  width: auto;
  height: 75%;
  display: flex;
  align-self: center;
  margin: auto;
  opacity: .85;
  animation-name: fade;
  animation-duration: 3s;
}

.Home{
  grid-area: Home;
  background-color: #690000;
  animation-duration: 3s;
}

.Artwork{
  grid-area: Artwork;
  background-color: #730000;
  animation-duration: 3.2s;
}

.Photography{
  grid-area: Photography;
  background-color: #7d0000;
  animation-duration: 3.4s;
}

.Programing{
  grid-area: Programing;
  background-color: #870000;
  animation-duration: 3.6s;
}

.Blog{
  grid-area: Blog;
  background-color: #910000;
  animation-duration: 3.8s;
}

.AboutMe{
  grid-area: AboutMe;
  background-color: #9b0000;
  animation-duration: 4s;
}

.Footer{
  grid-area: Footer;
  z-index: 1;
  height: 3vw;
  color: #696969
}

.g{
  border: .1vw solid black;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 3vw;
  text-align: center;
  z-index: 1;
  padding: 2vw;
  transition: .5s;
  animation-name: slide;
  animation-timing-function: ease-out;
  border-radius: .3vw;
  text-decoration: none;
}

.g:active{
  top: .5vw;
}
.g:hover{
  background-color: #2c2c2c;
  transform: scale(.95);
  color: #6e6e6e;
}

a {
  color: #000;
}

@supports (grid-area: auto) {

  @media screen and (max-width: 35em){
    .grid {
      width: auto;
      display: grid;
      grid-template-areas:
        "Main"
        "Home"
        "Artwork"
        "Programing"
        "Photography"
        "Blog"
        "AboutMe"
        "Footer";
      grid-template-rows: auto repeat(6, 7vw) 5vw;
      grid-template-columns: auto;
    }
  }

}

@keyframes mv {
  0% {transform: translate(225px,20px);}
  20% {transform: translate(225px,20px);}
  100% {transform: translate(0px,0px);}
}

@keyframes mini {
  0%{transform: scale(1.45);}
  20% {transform: scale(1.45);}
  100% {transform: scale(1);}
}

@keyframes fade {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: .85;}
}

@keyframes slide {
  from {transform: translateX(-1000px);}
  to {transform: translateX(0px);}
}