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

html {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

body {
	font-family: serif;
	font-weight: 400;
	font-size: 2.4vh;
	line-height: 3.6vh; /* 1.5 * font-size is nice. */
}

nav {
	z-index: 1;
	position: fixed;
	top: 0;
	height: 6%;
	width: 100%;
	background-color: #777777;
	opacity: 0;  /* You can't see me, but I'm still here! */
}

nav > div {
	height: 100%;
	width: 100%;
	margin-left: 50%;
}

nav > div div {
	display: inline-block; /* become a part of text */
	text-align: center;
	line-height: 6vh;
	width: 8vw;
	color: #ebebeb;
	font-size: 2vh;
	font-family: sans-serif;
	text-decoration: none;
}

nav > div div:hover {
	background-color: #415975;
}

div#home {
	background-color: #eeeeee;
}

div#home > div:first-of-type {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: black;
	opacity: 0.6;
}

div#home div {
	display: inline-block;
	height: 100vh;
	width: 33.1%;
	margin: auto;
	color: white;
	font-family: sans-serif;
	text-align: center;
}

div#block1 {
	margin: auto;
	height: 100vh;
	background-image: url('img/dna-Genetic-Algorithm2.png');
	background-size: cover;
}
div#block1:hover h1{
	font-size: 8vh;
}

div#block2 {
	z-index: -1;
	margin: auto;
	height: 100vh;
	background-image: url('img/Flow-chart-of-genetic-algorithm.png');
	background-size: cover;
}
div#block2:hover h1{
	font-size: 8vh;
}

div#block3 {
	z-index: -1;
	margin: auto;
	height: 100vh;
	background-image: url('img/modular.png');
	background-size: cover;
}
div#block3:hover h1{
	font-size: 8vh;
}

div#home h1 {
	position: relative;
	font-size: 6vh;
	line-height: 100vh;
	color: white;
}


article {
	background-color: white;
	color: black;
	padding: 0 10%;
}

article > section {
	background-color: #eeeeee;;
	margin: 10vh 5%;
	padding: 20px 20px;
}

article p {
	margin: 3vh 0;
}

p.eng {
	padding-left: 5vh;
	padding-right: 5vh;
}

p.chi {
	padding-left: 30vh;
	padding-right: 5vh;
}

article ol {
	margin: 3vh 0;
}

ol.eng {
	padding-left: 10vh;
	padding-right: 5vh;
}

ol.chi {
	padding-left: 30vh;
	padding-right: 5vh;
}

ol ul {
	padding-left: 5vh;
	font-size: 2vh;
	line-height: 3vh;
}

article div {
	display: flex;
	height: 100%;
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap; /* 寬度不夠會換行 */
	justify-content: space-evenly; /* 橫的間隔 */
	align-content: space-around; /* 直的間隔 */
}

article div img {
	margin: 3vh 0;
	border: 2px solid black;
}

h1, h2 {
	font-family: sans-serif;
}

h1 {
	padding-left: 2vh;
	font-size: 6vh;
	line-height: 9vh;
	color: black;
}

h2 {
	padding-left: 2vh;
	font-size: 3.6vh;
	line-height: 5.4vh;
	font-style: normal;
	color: black;
}