body {
     height: auto;
     width: 100%;
     padding: 0;
     background-color: white;
     margin: 0px auto;
}

.page {
     height: auto;
     display: grid;
     width: 100%;
     max-width: 900px;
     background-color: white;
     grid-template-columns: 100%;
     grid-template-rows: 50px 1400px 350px 450px 150px;
     row-gap: 40px;
     grid-template-areas:
          "hed"
          "header"
          "my-main"
          "hp-info-pic"
          "footer";
     padding: 0;
     margin: 0px auto;
     row-gap: 20px;
}

.header {
     height: 1300px;
     width: 100%;
     max-width: 900px;
     display: grid;
     background-color: darkseagreen;
     background-image: url("./map-images/ehfs-os-map2-3.png");
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     padding: 30px 0px 30px 0px;
     border: 1px solid black;
}

.hed,
.hed h1 {
     width: 100%;
     height: 50px;
     font-size: 30px;
     text-align: center;
}


.my-main {
     display: grid;
     height: auto;
     width: 100%;
     max-width: 900px;
     grid-template-rows: 350px;
     grid-template-columns: 40% 60%;
     grid-template-areas:
          "main-l main-r";
}

.main-l {
     display: grid;
     grid-area: main-l;
     height: 350px;
     width: 100%;
     grid-template-rows: 50px 300px;
     grid-template-columns: 100%;
     grid-template-areas:
          "hed"
          "info-r-blck";
place-items: center;
}

.hed {
     width: 100%;
     height: 50px;
     font-size: 30px;
     text-align: center;
}

.info-r-blck {
     display: grid;
     height: 300px;
     width: 100%;
     grid-template-columns: 200px;
     grid-template-rows: 50px 40px 40px 40px 40px 40px;
     place-content: center;
     grid-template-areas:
     "info-r-blck-menu-row"
     "info-r-blck-menu-row"
     "info-r-blck-menu-row"
     "info-r-blck-menu-row";
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
}

.info-r-blck-menu-row a,
.info-r-blck-menu-row {
     display: grid;
     height: 40px;
     padding-top: 10px;
     width: 100%;
     border-bottom: 1px solid white;
     place-items: center;
     font-size: 20px;
     list-style-type: disc;
     cursor: pointer;
     color: rgb(58,85,58);
     text-decoration: none;
}

.info-r-blck-menu-row:hover
{
     background-color: rgb(58,85,58);
     color: white;
     cursor: pointer;
     z-index: 10;
}


.main-r {
     display: grid;
     height: 300px;
     width: 100%;
     grid-template-rows: 50px 200px;
     grid-template-columns: 100%;
     grid-template-areas:
          "hed"
          "hp-info";
     place-items: top;
}


.hp-info {
     height: auto;
     width: 90%;
     padding: 0px;
     margin: 0px;
     font-size: 20px;
}

.hp-info {
     display: grid;
     font-size: 22px;
     padding-left: 5%;
     padding-top: 30px;
}

.hp-info-pic
{
     display: grid;
     height: auto;
     width: 100%;
     max-width: 900px;
     background-color: lightseagreen;
     background-image: url("./map-images/IMG_0733.jpeg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}

.footer {
     background-color: rgb(58,85,58);
     display: grid;
     height: 100px;
     width: 100%;
     line-height: 20px;
     align-items: center;
     justify-content: left;
}

.footer p {
     font-size: 18px;
     color: white;
     margin: 0px;
     padding: 0px 0px 0px 60px;
}

@media screen AND (max-width: 800px) {

     body {
          height: auto;
          width: 100%;
          max-width: 420px;
          padding: 0;
          background-color: white;
          max-width: 420px;
          margin: 0px auto;
     }

     .page {
          overflow-y: hidden;
          height: auto;
          display: grid;
          width: 100%;
          max-width: 420px;
          background-color: white;
          grid-template-columns: 100%;
          grid-template-rows: 100px 700px 700px 500px 150px;
          grid-template-areas:
               "hed"
               "header"
               "my-main"
               "hp-info-pic"
               "footer";
          padding: 0px;
          margin: 0px;
          place-items: center;
     }

     .hed
     {
          display: grid;
          height: 50px;
          width: 100%;
          color: slategrey;
     }

     .header {
          width: 98%;
          height: auto;
          min-height: 690px;
          display: grid;
          grid-area: header;
          background-image: url("./map-images/ehfs-os-map2-3.png");
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
          border: 1px solid black;
     }

     .my-main {
          display: grid;
          grid-area: my-main;
          height: auto;
          width: 100%;
          grid-template-rows: auto auto;
          grid-template-columns: 100%;
          grid-template-areas:
               "main-r"
               "main-l";
     }


     .main-l {
          color: darkgray;
          display: grid;
          grid-area: main-l;
          height: auto;
          width: 100%;
          grid-template-rows: 50px auto;
          grid-template-columns: 100%;
          grid-template-areas:
               "hed"
               "info-r-blck";
     }

     .info-r-blck {
          display: grid;
          grid-area: info-r-blck;
          height: auto;
          color: black;
     }


     .main-r {
          background-color: white;
          display: grid;
          height: auto;
          width: 100%;
          grid-template-rows: 50px 300px;
          grid-template-columns: 100%;
          grid-template-areas:
               "hed"
               "hp-info";
          place-items: top;
          padding: 0px 0px 30px 0px;
          color: slategray;
     }

     .hp-info-pic
{
     display: grid;
     height: 500px;
     width: 100%;
     max-width: 420px;
     background-color: lightseagreen;
     background-image: url("./map-images/IMG_0733.jpeg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}
     
     .footer {
          background-color: rgb(58,85,58);
          display: grid;
          height: 150px;
          width: 100%;
          place-items: center;
     }

     footer p {
          font-size: 14px;
          color: white;
          margin: 0px;
          padding: 0px 0px 0px 0px;
          text-align: center;

     }


}