.siteMap {
  width: 100vw;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 80px repeat(4, 20px minmax(200px, 350px) 20px minmax(40px, 80px));
  grid-template-rows: repeat(2, 40px 20px) 80px 20px 1fr;
  text-align: center;
  min-height: calc(100dvh - 50px);
}


.siteMap a {
  color: white;
  text-decoration: none;
}

.siteMap a:hover {
  text-decoration: underline dotted;
}



.step {
  background-color: blue;
  padding: 10px;
  position: relative;
}


.step {
  border-radius: 5px ;
  color: white;
}


.gardens {
  grid-column: 3;
  grid-row: 7;
  background-color: #488648;
  display: grid;
  height: calc(2 * 45px);
}


.gardensChild {
  height: 35px;
  margin: 10px;
  backdrop-filter: brightness(150%);
}


.original {
  grid-column: 3/8;
  grid-row: 1;
  background-color: whitesmoke;
  color: black;
}


.home {
  grid-column: 7;
  grid-row: 3;
  background-color: #2da1a6;
}


.bottomBar {
  grid-column: 7;
  grid-row: 7;
  background-color: #1e222d;
  height: calc((8 * 45px) + 10px);
}


.bottomBarChild {
  backdrop-filter: brightness(150%);
  height: 35px;
  margin: 10px;
}


.bottomBarMore {
  background-color: #2d3343;
  height: calc(4 * 45px);
  margin: 10px;
}


.moreChild {
  backdrop-filter: brightness(150%);
  height: 35px;
  margin: 10px;
}


.readable {
  grid-column: 11/16;
  grid-row: 1;
  background-color: whitesmoke;
  color: black;
}


.homeR {
  grid-column: 11;
  grid-row: 3;
}


.bottomBarR {
  grid-column: 11;
  grid-row: 7;
  height: calc(7 * 45px);
}


.gardensR {
  grid-column: 15;
  grid-row: 7;
}


.gardensChild, .bottomBarChild, .moreChild {
  line-height: 35px;
}


.arrowU, .arrowD, .arrowL, .arrowR, .lineH, .lineV {
  -webkit-filter: invert(100%); /* Safari/Chrome */
  filter: invert(100%);
}


.arrowL {
  transform: rotate(180deg);
}

.arrowU {
  transform: rotate(270deg);
}

.arrowD {
  transform: rotate(90deg);
}


.lineH {
  width: 100%;
  height: 20px;
}


.lineV {
  width: 20px;
  height: 100%;
}


.a1c, .l1c, .l2c {
  grid-row: 7;
  display: grid;
  grid-template-rows: 40px 1fr;
}


.a1, .a2, .l1, .l2, .a3a, .a3b, .l3 {
  grid-row: 2;
  z-index: 1;
}


.a1c {
  grid-column: 6;
}


.l1c {
  grid-column: 4/6;
}


.a2c {
  grid-column: 12;
}


.l2c {
  grid-column: 12/15;
}


.a3c1, .a3c2, .l3c {
  grid-row: 7;
  display: grid;
  grid-template-rows: 140px 1fr;
}


.a3c1 {
  grid-column: 7;
  justify-self: flex-end;
}


.l3c {
  grid-column: 8/11;
}


.a3c2 {
  grid-column: 11;
}

    

.a4c1, .l4c, .a4c2 {
  grid-column: 7;
}


.a4c1, .a5c1{
  grid-row: 4;
}

              
.l4c, .l5c{
  grid-row: 5;
}


.a4c2, .a5c2 {
  grid-row: 6;
}
   

.a5c1, .l5c, .a5c2 {
  grid-column: 11;
}


.a6c1, .l6c1, .l6c1b {
  display:grid;
  grid-template-rows: 10px 1fr;
}


.a6c1 {
  grid-column: 6;
  grid-row: 3;
}


.l6c1 {
  grid-column: 4/6;
  grid-row: 3;
  display:grid;
}


.a6a, .l6a, .l6a2 {
  grid-row: 2;
}


.l6c2 {
  grid-column: 3;
  grid-row: 4/6;
}


.a6c2 {
  grid-column: 3;
  grid-row: 6;
}


.l6c1b {
  grid-column: 3;
  grid-row: 3;
  position: relative;
  left: 50%;
  width: 50%;
}


.l6c2b {
  grid-column: 3;
  grid-row: 3;
  position: relative;
  top: 50%;
  height: 50%;
}


.a7c1, .l7c1, .l7c1b {
  display:grid;
  grid-template-rows: 10px 1fr;
}


.a7c1 {
  grid-column: 12;
  grid-row: 3;
}


.l7c1 {
  grid-column: 12/15;
  grid-row: 3;
  display:grid;
}


.a7a, .l7a, .l7a2 {
  grid-row: 2;
}

.l7c2 {
  grid-column: 15;
  grid-row: 4/6;
}


.a7c2 {
  grid-column: 15;
  grid-row: 6;
}


.l7c1b {
  grid-column: 15;
  grid-row: 3;
  position: relative;
  width: 50%;
}


.l7c2b {
  grid-column: 15;
  grid-row: 3;
  position: relative;
  top: 50%;
  height: 50%;
}


.l3c2, .l3c3 {
  visibility: hidden;
}


@media (max-width: 1200px) {
  .siteMap {
    grid-template-columns: 1px repeat(2, 20px minmax(200px, 420px) 20px minmax(5px, 100px)) minmax(15px, 40px);
    grid-template-rows: repeat(2, 40px 20px 40px 20px 80px 20px 1fr 20px);
  }
  .readable {
    grid-column: 3/8;
    grid-row: 9;
  }
  .homeR {
    grid-column: 7;
    grid-row: 11;
  }
  .bottomBarR {
    grid-column: 7;
    grid-row: 15;
    height: calc(7 * 45px);
  }
  .gardensR {
    grid-column: 3;
    grid-row: 15;
  }
  .l2c {
    grid-column: 4/6;
    grid-row: 15;
  }
  .a2c {
    grid-column: 6;
    grid-row: 15;
  }
  .a2 {
    transform: rotate(0deg);
  }
  .a5c1, .l5c, .a5c2 {
    grid-column: 7;
  }
  .a5c1 {
    grid-row: 12;
  }
  .l5c {
    grid-row: 13;
  }
  .a5c2 {
    grid-row: 14;
  }
  .a7c1 {
    grid-column: 6;
    grid-row: 11;
  }
  .l7c1 {
    grid-column: 4/6;
    grid-row: 11;
    display:grid;
  }
  .a7a {
    transform: rotate(0deg);
  }
  .l7c1b {
    grid-column: 3;
    grid-row: 11;
    display:grid;
    left: 50%;
    width: 50%;
  }
  .l7c2, .l7c2b, .a7c2 {
    grid-column: 3;
  }
  .l7c2 {
    grid-row: 12/14;
  }
  .l7c2b {
    grid-row: 11;
  }
  .a7c2 {
    grid-row: 14;
  }
  .a3b {
    transform: rotate(180deg);
  }
  .a3c2 {
    grid-column: 7;
    grid-row: 15;
    justify-self: flex-end;
  }
  .l3c {
    grid-column: 8/10;
    grid-row: 7;
  }
  .l3c2, .l3c3 {
    visibility: initial;
  }
  .l3c2 {
    grid-column: 8/10;
    grid-row: 15;
    display: grid;
    grid-template-rows: 140px 1fr;
  }
  .l3c3 {
    grid-column: 10;
    grid-row: 7/15;
    display: grid;
    grid-template-rows: 150px 1fr;
  }
  .l3b {
    grid-row: 2;
    height: calc(100% + 150px);
    position: relative;
    left: -10px;
  }

}

.container {
  background-color: #4a4a4a;
}