/* ----- MAIN GRID ----- */
.grid {
  width:100vw;
  min-height: 100vw;
  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, 11vw) 14vw;
  grid-gap: .5vw .5vw;
}

.all {
  background-color: #6d3fc3;
}

/* Title Bar With Logo */
.Tbar{
  grid-area: Tbar;
  background-color: url(SpearsNet Project\MainBackground.JPG) repeat;
}

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

/* Navigation */
.navbar{
  font-family: 'Julius Sans One', sans-serif;
  border: .1vw solid black;
  text-align: center;
  font-size: 1.5vw;
  position: relative;
}

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

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

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

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

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

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

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

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

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

/* ----- MAIN CONTENT GRID ----- */
.con{
  grid-area: con;
  background-color: #bbafef;
  display: grid;
  grid-template-areas:
    "tBefHi"
    "BefHi"
    "tHi"
    "Hi"
    "tColl"
    "Coll";
    grid-template-rows: repeat(6, auto);
    grid-gap: .5vw .5vw;
}

.BefHi{
  display: grid;
  grid-gap: .5vw;
  grid-template-columns: repeat(4, 16.5vw);
  grid-auto-rows: 10vw;
}


.Hi{
  display: grid;
  grid-gap: .5vw;
  grid-template-columns: repeat(4, 16.5vw);
  grid-auto-rows: 10vw;
}

.Coll{
  display: grid;
  grid-gap: .5vw;
  grid-template-columns: repeat(4, 16.5vw);
  grid-auto-rows: 10vw;
}

/* ----- IMAGE CARD ----- */
.ArtCard{
  display: grid;
  grid-template-areas:
        "image ImgTit"
        "image ides"
        "image ilink";
  background-color: lavender;
}

.image{
  grid-area: image;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 1fr;
  border: .1vw solid #ddd;
  padding: .25vw;
  max-width: 9vw;
  max-height: 8vw;
}

.ImgTit {
  grid-area: ImgTit;
  height: 1fr;
  width: 2fr;
}

.ides {
  grid-area: ides;
  height: 2fr;
  width: 2fr;
}

.ilink {
  grid-area: ilink;
  height: 1fr;
  width: 2fr;
}

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


/*---------------------------
CSS Grid
---------------------------*/

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

    .BefHi {
      grid-template-columns: repeat(3, 30vw);
      grid-auto-rows: 13vw;
    }

    .Hi {
      grid-template-columns: repeat(3, 30vw);
      grid-auto-rows: 13vw;
    }

    .Coll {
      grid-template-columns: repeat(3, 30vw);
      grid-auto-rows: 13vw;

    }

    .image {
      max-width: 13vw;
      max-height: 11vw;
    }

  }

@media screen and (max-width: 20em) {

  .BefHi {
    grid-template-columns: repeat(2, 45vw);
    grid-auto-rows: 15vw
  }

  .Hi {
    grid-template-columns: repeat(2, 45vw);
    grid-auto-rows: 15vw
  }

  .Coll {
    grid-template-columns: repeat(2, 45vw);
    grid-auto-rows: 15vw
  }

  .image {
    max-width: 15vw;
    max-height: 13vw;
  }

}


}