* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0 0 0;
  font-family: Verdana;
  position: flex;
}

/* genereal area on the right */
.gen-area {
  width: 100vw;
  height: max(auto, 100vh);
  margin-top: 18vh;
  background-color: #E0E0E0;
  font-size: 18px;
  font-family: Verdana;
  padding: 8vw 8vw 8vw;
  margin-right: 0;
  color: black;
  float: left;
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: 1;
}

.gen-header h1{
  font-size: 5.5vw;
  font-weight: normal;
  font-style: italic;
}

.gen-header h2{
  font-size: 5vw;
  font-weight: normal;
  color: grey;
}

.gen-header h3{
  font-size: 3.7vw;
  font-weight: normal;
  color: grey;
}

.gen-table{
  font-size: 4.5vw;
  font-weight: normal;
}
.gen-section{
  margin-top: 3vh;
}

.gen-section h3{
  font-size: 6vw;
  font-weight: bold;
}

.gen-section embed{
  width: 85vw;
  height: 60vw;
}

.gen-section-item{
  margin-top: 2vw;
}

.gen-section-item h4{
  font-size: 6vw;
  font-weight: normal;
}

.gen-section-item h5{
  font-size: 4.5vw;
  font-style: italic;
  font-weight: normal;
  color: grey;
}

.gen-section-item h6{
  font-size: 4vw;
  font-style: normal;
  font-weight: normal;
  color: black;
}

.gen-section-item img{
  width: 83vw;
  height: auto;
}

.reduced-size-img img{
  width: 40vw;
  height: auto;
  margin-right: 1vw;
}

@media only screen and (orientation: landscape) {
  .gen-area{
    width: 77.5vw;
    height: max(auto, 100vh);
    margin-top: 0;
    margin-left: 22.5vw;
    padding-top: 1.6vw;
    padding-left: 5vw;
    padding-right: 3vw;
    z-index: 3;
  }

  .gen-header h1{
    font-size: 2.6vw;
  }

  .gen-header h2{
    font-size: 2vw;
  }

  .gen-header h3{
    font-size: 1.2vw;
  }

  .gen-table{
    font-size: 1vw;
    font-weight: normal;
  }

  .gen-table td{
    padding: 0.03vw 1vw 0.03vw;
  }

    .gen-section{
      margin-top: 0vw;
    }

    .gen-section h3{
      font-size: 2.5vw;
    }

    .gen-section embed{
      width: 55vw;
      height: 30vw;
    }

    .gen-section-item{
        margin-top: 1vw;
    }

    .gen-section-item h4{
      font-size: 1.7vw;
    }

    .gen-section-item h5{
      font-size: 1.3vw;
    }

    .gen-section-item h6{
      font-size: 1.1vw;
    }

    .gen-section-item img{
      width: 27vw;
    }

    .reduced-size-img img{
      width: 17vw;
      margin: 0;
    }
}