@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=PT+Serif&display=swap');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth; /*for label*/
}

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

body {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 2.4vh;
	line-height: 3.6vh; /* 1.5 * font-size is nice. */
	background-color: #eeeeee;
}

nav {
	z-index: 1;
	position: fixed;
	top: 0;
	height: 6%;
	width: 100%;
	background-color: #707070;
	opacity: 0.7;
}

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: 10vw;
	color: #ebebeb;
	font-size: 2vh;
	font-family: sans-serif;
	text-decoration: none;
}

nav > div div:hover { /*mouse hovering*/
	background-color: #415975;
}

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

div#home > div {
	position: relative;
	display: block;
	margin: auto;
	height: 100vh;
	width: 75%;
	background-image: url('./img/background.jpg');
	background-size: cover;
	opacity: 1;

	color: white;
	font-family: sans-serif;
	font-size: 10vh;
	line-height: 100vh;
	text-align: center;
}

div#home > div > h1 {
	position: relative;
	top: 55vh;
	left: 30%;
	color: white;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 10vh;
	line-height: 10vh;
	opacity: 1;
}

div#home > div > h2 {
	position: relative;
	top: 57vh;
	left: 30%;
	color: white;
	font-family: sans-serif;
	font-style: italic;
	font-size: 4vh;
	line-height: 4vh;
	opacity: 1;
}

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

div#cat > img {
	height: 30vh;
	margin-top: 5vh;
	margin-left: 15%;
}

article {
	background-color: #eeeeee;
	color: black;
	padding: 0 10%;
}
article > section:first-child {
	background-color: #c8d0cc;
	margin-left: 5%;
	margin-right: 30%;
	padding: 30px 30px;
}

article > section:first-child > h1 {
	font-family: 'Amatic SC', cursive;
	font-size: 7.2vh;
	line-height: 10.8vh;
	color: black;
}

article > div {
	margin-top: -30vh;
	margin-left: 70%;
	height: 50vh;
	width: 30vh;
}

div#cat2 > img {
	height: 50vh;
	width: 30vh;
}


article > section:nth-of-type(2) {
	margin-top: -10vh;
	margin-left: 5%;
	margin-right: 5%;
	padding: 30px 30px;
	background-color: #c8d0cc;
}

article > section:nth-of-type(2) > h1 {
	font-size: 4.8vh;
	line-height: 7.2vh;
	color: black;
}