/* MAIN GRID */
.grid {
  width: auto;
  height: auto;
  display: grid;
  grid-template-areas:
        "Main"
        "Home"
        "Artwork"
        "Programming"
        "Blog"
        "About"
        "Footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto repeat(6, 13vw) 3vw;
  grid-gap: .5vw .5vw;
}

/* EVERYTHING */
.all {
  background-image: repeating-radial-gradient(#3f0059, #000);
  max-width: 100vw;
  z-index: 0;
  margin: 2vw;
}

/* MAIN PAINTING */
.x {
  animation-name: max;
  animation-duration: 4s;
}

.Main{
  grid-area: Main;
  background: url(MainBackground.JPG) no-repeat;
  background-size: 100%;
  z-index: 3;
  max-width: 95.75vw;
  min-height: 45vw;
  border: .1vw solid #000;
  animation-name: spin;
  animation-duration: 4s;
}

/* LOGO */
.Logo {
  max-width: 50%;
  display: flex;
  align-self: center;
  margin: 7vw auto 7vw auto;
  padding: 0;
  opacity: .8;
  animation-name: fade;
  animation-duration: 7s;
}


.Home {
  grid-area: Home;
  animation-delay: 3.1s
}

.Artwork {
  grid-area: Artwork;
  animation-delay: 3.2s
}

.Programming {
  grid-area: Programming;
  animation-delay: 3.4s;
}

.Blog {
  grid-area: Blog;
  animation-delay: 3.5s;
}

.About {
  grid-area: About;
  animation-delay: 3.6s;
}

.g{
  background-color: #be344c;
  border: .1vw solid #000;
  font-family: 'Rubik', sans-serif;
  font-size: 7vw;
  text-decoration-line: none;
  text-align: center;
  z-index: 0;
  padding: 2vw;
  margin: .1vw;
  transition: .5s;
  animation-name: waterfallD;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
}

.g:active{
  text-transform: scale(1.1);

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

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

a {
  color: #000;
  text-decoration: none;
}

@supports (grid-area:auto) {

  @media screen and (min-width: 50em) {



    .grid {
      display: grid;
      grid-template-areas:
                          "Main Home"
                          "Main Artwork"
                          "Main Programming"
                          "Main Blog"
                          "Main About"
                          "Footer Footer";
      grid-template-columns: 66vw 29vw;
      grid-template-rows: repeat(5, 8.6vw) 3vw;
    }

    .x {
      animation-name: none;
    }

    .Main {
      animation-name: none;
      max-height: 10vw;
    }

    .Logo {
      animation-duration: 3s;
    }

    .g {
      font-size: 4vw;
      animation-name: waterfallR;
    }

    .Home {
      animation-delay: .1s
    }

    .Artwork {
      animation-delay: .2s
    }

    .Photography {
      animation-delay: .3s
    }

    .Programming {
      animation-delay: .4s;
    }

    .Blog {
      animation-delay: .5s;
    }

    .About {
      animation-delay: .6s;
    }
  }

  @media screen and (max-width: 35em) {
    .Main {
      min-height: 70vw;
    }
  }


}

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

@keyframes waterfallD {
  0% {transform: translateY(550px);}
  100%{transform: translateY(0px);}
}

@keyframes waterfallR {
  0% {transform: translateX(475px);}
  100%{transform: translateX(0px);}
}

@keyframes max {
  0%{transform: scaleX(1.7) scaleY(2.2) translateY(113px);}
  80%{transform: scaleX(1.7) scaleY(2.2) translateY(113px);}
  100%{transform: scale(1) scaleY(1) translateY(0px);}
}

@keyframes spin {
  0%{
    transform: rotate(90deg);
    transition: z-index: 2;
  }
  45%{
    transform: rotate(90deg);
    transition: z-index: 2;
  }
  80%{
    transform: rotate(900deg);
    transition: z-index: 2;
  }
  100%{
    transform: rotate(0deg);
    transition: z-index: 2;
  }
}

@keyframes none {

}