body,
html {
  height: 100%;
}

body {
  font-family: Montserrat;
  margin: 0px;
  background-color: rgb(242, 241, 237);
}

/* navbar related css */
.navbar {
  overflow: hidden;
  opacity: 0.9;
  background-color: #003b46;
  padding-left: 0%;
  width: 100%;
  z-index: 1;
  top: 0px;
  position: fixed;
}

.navbar a,
.dropbtn,
.dropdown-content a {
  float: left;
  font-size: 16px;
  color: #c4dfe6;
  text-align: center;
  padding: 16px 6px;
  text-decoration: none;
  border-radius: 6px;
  margin-left: 20px;
  width: 240px;
}

.dropdown {
  position: static;
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  float: none;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #66a5ad;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #07575b;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-left: 20px;
  width: 190px;
}

.dropdown-content a {
  float: none;
  display: block;
  text-align: left;
  margin-left: 0px;
}

.dropdown-content a:first-child {
  float: none;
  display: block;
  text-align: left;
  margin-left: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.dropdown-content a:hover {
  background-color: #66a5ad;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* content related css */

.textblock {
  position: relative;
  margin: 15%;
  margin-top: 5%;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0px 5px 5px rgb(0 0 0 / 10%);
  padding: 10%;
  padding-top: 5%;
  padding-bottom: 5%;
  color: #515154;
}

.main-title {
  text-align: center;
  font-size: 50px;
  font-weight: 1000;
  font-family: Montserrat;
}

.secondary-title {
  text-align: left;
  font-size: 40px;
  font-weight: 800;
  font-family: Montserrat;
  margin-top: 80px;
  margin-bottom: 30px;
  text-decoration: underline;
}

.content {
  margin-top: 60px;
  text-align: justify;
  font-size: 18px;
  line-height: 40px;
  font-weight: bold;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 1;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: #07575b;
  color: #c4dfe6;
  cursor: pointer;
  padding: 16px 16px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #66a5ad;
}

.s {
  font-family: SimHei;
  font-size: larger;
}
.ss {
  font-family: SimHei;
  font-size: large;
}
section {
  display: -webkit-flex;
  display: flex;
}
nav-1 li {
  font-size: 20px;
}
nav-2 li {
  font-size: 20px;
}
nav-3 li {
  font-size: 20px;
}
nav-4 li {
  font-size: 20px;
}
nav-5 li {
  font-size: 20px;
}
/* Figure-1 */
nav-1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 15px;
}
article-1 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}
/* Figure-2 */
nav-2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: rgb(161, 172, 157);
  padding: 15px;
}
article-2 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #eaefe1;
  padding: 10px;
}
/* Figure-3 */
nav-3 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: rgb(202, 177, 177);
  padding: 20px;
}
article-3 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #eddede;
  padding: 10px;
}
/* Figure-4 */
nav-4 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: rgb(209, 207, 173);
  padding: 20px;
}
article-4 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f3f2c4;
  padding: 10px;
}
/* Figure-5 */
nav-5 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: rgb(173, 204, 209);
  padding: 20px;
}
article-5 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #caf6f6;
  padding: 10px;
}

figcaption {
  background-color: #07575b;
  color: #c4dfe6;
  font-style: italic;
  font-size: 15px;
  text-align: center;
}