.grid {
  width: auto;
  height: auto;
  display: grid;
  grid-template-areas:
                      "Main Home"
                      "Main Artwork"
                      "Main Programing"
                      "Main Photography"
                      "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-color: #6d3fc3;
}

.Main{
  grid-area: Main;
  background: url(MainBackground.JPG) no-repeat;
  background-size: 100%;
  z-index: 1;
  height: 44.5vw;
}

.Logo {
  width: auto;
  height: 75%;
  display: flex;
  align-self: center;
  margin: auto;
}

.Home{
  grid-area: Home;
  background-color: #c83737;
}

.Artwork{
  grid-area: Artwork;
  background-color: #800000;
}

.Programing{
  grid-area: Programing;
  background-color: #c83737;
}

.Photography{
  grid-area: Photography;
  background-color: #800000;
}

.Blog{
  grid-area: Blog;
  background-color: #c83737;
}

.AboutMe{
  grid-area: AboutMe;
  background-color: #800000;
}

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

.g{
  border-radius: .1vw;
  border-color: black;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 3vw;
  text-align: center;
  position: relative;
  z-index: 1;
  height: 7vw;
}

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

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;
    }
  }
}