* {

  font-size: 16px;
  border-color: black;
  border: 0px;
}



html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}


body {
  font-family: sans-serif;
  color: #eadfbd;
  background-color: black;
  text-align: left;
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: auto minmax(0, 1fr);
  grid-template-columns: auto minmax(0, 1fr);
  -ms-grid-rows: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow-y: hidden;

}

ul {
  padding-inline-start: 4vw;
}

#helpMenu {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 1;
  grid-column: 1;
  padding-right: 2vw;
  overflow-y: auto;
}

.menuRef {
  display: inline-block;
  padding-top: calc(0.5rem + 1vh);
  ;
  margin-left: 2vw;
}

.mainContent {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 2;
  grid-column: 2;
  overflow-y: auto;
  /* justify-self: center; */
  /* align-self: center; */
  padding-left: 2vw;
  padding-right: 2vw;
}

.footer {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 3;
  grid-row: 3;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 3vw;
}

h1 {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 2;
  grid-column: 2;
  font-size: calc(1.2rem + 1vw);
  text-align: center;
}

a {
  color: #DE907A;
  font-size: calc(0.5rem + 1vw);
}

a:link {
  color: #DE907A;
}

a:visited {
  color: #DE907A;
}

a:hover {
  color: #C9482E;
}

.subPoint {
  color: #E3770B;
  font-size: calc(.8rem + 1vw);
  padding-top: 2vh;
}

.description {
  color: #eadfbd;
  font-size: calc(.5rem + 1vw);
  padding-top: 1vh;
}

.subDetail {
  color: #d2bd91;
  font-size: calc(.5rem + 1vw);
}

.helppic {
  width: 95%;
}


@media only screen and (orientation:portrait) {
  h1 {
    font-size: calc(1.2rem + 1vh);
  }

  a {
    color: #7f5246;
    font-size: calc(0.5rem + 1vh);
  }

  .subPoint {
    font-size: calc(.8rem + 1vh);
  }

  .description {
    font-size: calc(.5rem + 1vh);
  }

  .subDetail {
    font-size: calc(.5rem + 1vh);
  }

}


@media only screen and (orientation:landscape) and (min-width: 1000px) {
  h1 {
    font-size: calc(1.2rem + 1.2vw);
  }

  a {
    color: #7f5246;
    font-size: calc(0.5rem + 1.2vw);
  }

  .subPoint {
    font-size: calc(.8rem + 1.2vw);
  }

  .description {
    font-size: calc(.5rem + 1.2vw);
  }

  .subDetail {
    font-size: calc(.5rem + 1.2vw);
  }

}


@media only screen and (orientation:landscape) and (min-width: 2000px) {
  h1 {
    font-size: calc(1.2rem + 1.8vw);
  }

  a {
    color: #7f5246;
    font-size: calc(0.5rem + 1.4vw);
  }

  .subPoint {
    font-size: calc(.8rem + 1.4vw);
  }

  .description {
    font-size: calc(.5rem + 1.4vw);
  }

  .subDetail {
    font-size: calc(.5rem + 1.4vw);
  }

}

@media only screen and (orientation:portrait) and (min-width: 1000px) {
  h1 {
    font-size: calc(1.2rem + 1.2vh);
  }

  a {
    color: #7f5246;
    font-size: calc(0.5rem + 1.2vh);
  }

  .subPoint {
    font-size: calc(.8rem + 1.2vh);
  }

  .description {
    font-size: calc(.5rem + 1.2vh);
  }

  .subDetail {
    font-size: calc(.5rem + 1.2vh);
  }

}

@media only screen and (orientation:portrait) and (min-width: 2000px) {
  h1 {
    font-size: calc(1.2rem + 1.4vh);
  }

  a {
    color: #7f5246;
    font-size: calc(0.5rem + 1.4vh);
  }

  .subPoint {
    font-size: calc(.8rem + 1.4vh);
  }

  .description {
    font-size: calc(.5rem + 1.4vh);
  }

  .subDetail {
    font-size: calc(.5rem + 1.4vh);
  }

}