* {margin: 0;padding: 0;box-sizing: border-box;}
html {
	width: 100vw;
	min-height: 100vh;
	background: url("/assets/img/black_background.png");
}
body {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	font: 14px 'Roboto', sans-serif;
	overflow-x: hidden;
	color: rgb(226, 226, 226);
	background-color: rgba(255, 255, 255, 0.1);
}

a {
	text-decoration: none;
	color: rgb(255, 255, 255);
}

.hidden { display: none; }

@media screen and (orientation: portrait) {
	header { height: 20vh; }
	main .outer {
		width: 100vw;
		height: 40vh;
	}
}

@media screen and (orientation: landscape) {
	header { height: 30vh; }
	main .outer {
		width: 50vw;
		height: 62.5vh;
	}
}

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

header .title {
	font-size: 108px;
}

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

main {
	display: flex;
	flex-wrap: wrap;
}

main .outer {
	padding: 16px;
}

main .outer a {
	display: flex;
	position: relative;
	overflow: hidden;
	border: ridge white 15px;
	width: 100%;
	height: 100%;
}

main .outer a.renaissance { border-color: rgb(58, 9, 9); }
main .outer a.renaissance:hover { border-color: rgb(88, 39, 39); }

main .outer a.portfolio { border-color: rgb(202, 149, 1); }
main .outer a.portfolio:hover { border-color: rgb(232, 179, 31); }

main .outer 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 .inner div {
	display: inline-block;
	padding: 16px;
	background-color: rgba(0,0,0,0.9);
}

main .inner .title {
	font-size: 48px;
}

main .inner .desc {
	text-align: center;
	font-size: 24px;
	max-width: 75%;
}

footer {
	background-color: rgb(0, 0, 0);
}