body {
	color: rgb(202, 149, 1);
}

header a, main a {
	text-decoration: none;
	color: rgb(202, 149, 1);
}

@media screen and (orientation: portrait) {
	header { height: 20vh; }
}

@media screen and (orientation: landscape) {
	header { height: 40vh; }
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 100vw;
	padding: 32px;
}

header .title {
	width: 100%;
	font-size: 80px;
	display: flex;
	justify-content: center;
	font-weight: bold;
	text-transform: uppercase;
}

header .name {
	font-size: 50px;
}

main {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 5vh;
}

@media screen and (max-width: 1080px) {
	main div.outer {
		width: 100vw;
		height: 25vh;
		min-height: 200px;
	}

	main div.outer.wide {
		min-height: 150px;
	}
}

@media screen and (min-width: 1080px) {
	main div.outer {
		width: 50vw;
		height: 40vh;
		min-height: 300px;
	}

	main div.outer.single-center {
		margin: 0 25vw;
	}

	main div.outer.wide {
		min-height: 175px;
	}
}

main div.outer {
	padding: 16px;
}

main div.outer.wide {
	width: 100vw;
	height: 25vh;
}

main a {
	display: flex;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	border: ridge 15px rgb(202, 149, 1);
	z-index: 8;
}

main a img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
}

main .inner {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	z-index: 10;
}

main .outer a:hover {
	border-color: rgb(242, 189, 41);
}

main .outer .inner {
	position: absolute;
	top: 0;
	height: 200%;
	transition: top .3s .25s ease;
}

@media screen and (min-width: 1080px) {

	main .outer.hover a:hover .inner {
		top: -100%;
	}

}

main .inner div {
	display: inline-block;
	position: absolute;
	left: 50%;
	padding: 16px;
	background-color: rgba(0,0,0,0.9);
	color: rgb(202, 149, 1);
}

main .inner .title {
	top: 25%;
	transform: translate(-50%, -50%);
	font-size: 48px;
	white-space: nowrap;
}

main .inner .desc {
	text-align: center;
	bottom: 25%;
	transform: translate(-50%, 50%);
	font-size: 20px;
}

main div.outer:not(.wide) .inner .desc {
	min-width: 75%;
}