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

@import url('https://fonts.googleapis.com/css2?family=Acme&family=Domine&family=EB+Garamond&family=Noto+Serif+TC&family=Potta+One&family=Texturina&family=Yusei+Magic&display=swap');

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

a{
	text-decoration: none; 
	color: #debfa7;
}


body{
	width: 100%;
	height: 76%;
	right: 0;
	background-color: #f6f5f3;
	font: 2.4vh/3.6vh;
}

nav{
	position: fixed;
	height: 100%;
	width: 20%;
	left: 0;
	background-color: gray;
	font-family: 'Potta One', cursive;
	font-size: 4.5vh;
	text-align: center;
}

div#container{
	position: absolute;
	height: 100%;
	width: 80%;
	right: 0;
	font-size: 2.4vh;
}

nav > div{
	padding: 15% 1vh;
}

nav > div:hover{
	background-color:indianred
}

article{
	margin-left: 3.6vh;
	font-family: 'Donime', serif;
	font-family: 'Noto Serif TC', serif;
	color: #1f7a8c;
	text-align: justify;
}

h1 {
	padding: 2vh;
	color: #49494b;
	font-family: 'Texturina', serif;
	font-size: 6vh;
	margin-left: -7px;
}

section ~ img {
	width: 45%;
	padding: 10px;
	float: left;
}

section {
	padding: 10px 18px 20px 10px;
}

section.home > img {
	position:relative;
	width: 200%;
	margin-top: -7vh;
	margin-left: -10vh;
}

section.home {
	font-family: 'Texturina', serif;
	color: white;
}


p > img {
	width: 30%;
}

section.home {
	padding: 6vh;
	background-color: #94786c;
	width: 70%;
	text-align: right;
}

h {
	color: #2e3830;
	font-family: Noto Serif TC, serif;
	font-size: 4.8vh;
	padding: 10px;
}

img.special {
	float: right;
	display: inline-block;
	width: 18%;
	margin: -4.5vh 10px 1px 10px;
}

section:nth-child(3) > img.special {
	float: left;
	margin: 10px 10px 1px 10px;
	width: 20%;
}

section:nth-child(2) > img.special {
	float: right;
	margin: -7vh 10px 1px 10px;
	width: 20%;
}

h3 {
	position: fixed;
	margin: 10px 0 0 0;
}