.grid {
  width:auto;
  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;
}

.Tbar{
  grid-area: Tbar;
  background-image: url(SpearsNet Project\MainBackground.JPG) repeat;
}

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

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

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

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

.con{
  grid-area: con;
  background-color: #bbafef;
}

.foot{
  grid-area: foot;
  background-color: #ccaaff;
}

a {
  color: #000;
}

h2 {
  font-size: 3vw;
}

li {
  font-size: 1vw;
}

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

    li {
      font-size: 5vw;
    }

    h2 {
      font-size: 10vw;
    }

  }

}