html {
  font-family: "Rubik", sans-serif;
}
p {
	font-size: 1.3vw;
}
a {
	font-size: 1.3vw;
}
h1 {
	font-size: 2vw;
}
h3 {
	font-size: 1.2vw;
}
h2 {
	font-size: 1.5vw;
}
.catthumb {
	height: 15.7vw;
	border-radius: 0.5vw;
}
.center {
	text-align: center;
}
.catitem {
	position: relative;
	padding: 1vw;
	margin: 0 1vw 2vw 1vw;
	background: lightgrey;
	width: 15.7vw;
	transition-duration: 250ms;
	border-radius: 0.5vw;
}
.catitem:hover {
	box-shadow: 0px 0px 10px 4px #000000;
}
.catbox {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.dark {
	position: absolute;
	top: 1vw;
	background: black;
	height: 15.7vw;
	width: 15.7vw;
	opacity: 0;
	transition-duration: 250ms;
	border-radius: 0.5vw;
}
.dark:hover {
	opacity: 0.5;
}
#headerbox {
	width: 97%;
	margin: auto;
}
#mainbox {
	position: relative;
	width: 97%;
	margin: auto;
}
#mainimg {
	width: 33vw;
	height: 33vw;
	border-radius: 0.5vw;
	transition-duration: 250ms;
}
#mainimg:hover {
	box-shadow: 0px 0px 10px 4px #000000;
}
#imgbox {
	margin-left: 2vw;
	min-width: 57vw;
	padding: 0 2vw 0 2vw;
	background: lightgrey;
	border-radius: 0.5vw;
	transition-duration: 250ms;
}
#imgbox:hover {
	box-shadow: 0px 0px 10px 4px #000000;
}
#imgbox > p {
	line-height: 2vw;
}
#imgallery {
	display: flex;
}
#imgallery > a > img {
	margin-right: 1vw;
	height: 4.5vw;
	box-shadow: 0px 0px 3px 1px #000000;
}
#bottombox {
	margin-top: 2vw;
	padding: 1vw;
	background: lightgrey;
	transition-duration: 250ms;
	width: 98%;
	border-radius: 0.5vw;
}
#bottombox:hover {
	box-shadow: 0px 0px 10px 4px #000000;
}