Web/css/index.css

body {
	background: url('/images/pic1.webp');
	background-position: center;
	background-size: cover;
	padding: 0;
}

.title {
	height: 200px;
	width: 600px;
	margin: calc((100vh - 200px) / 2) auto;
	text-align: center;
	background: #ffffff;
	box-shadow: 0 0 1rem black;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	column-gap: 1em;
}

.title h1, .title h2 {
	font-size: 3rem;
	margin: 0;
	align-self: end;
}
.title h1 {
	text-align: left;
}
.title h2 {
	text-align: right;
}

.title nav {
	font-variant: small-caps;
	font-size: 1.5rem;
	grid-column: 1 / 3;
	padding: .5em;
	align-self: center;
	line-height: 2em;
}
.title nav a {
	border: 0px solid #484848de;
	border-width: .1em 0;
	padding: 0 .5em;
	margin: .5em;
	transition: border-color 250ms, background-color 250ms, color 250ms;
}
.title nav a:hover {
	background-color: #242424de;
	border-color: #242424de;
	color: #ffffffde;
}
.title nav a:active {
	border-color: #121212de;
	background-color: #121212de;
	color: #dededede;
}

footer {
	background: white;
	margin: 0;
	padding: 1em;
	text-align: center;
}
footer>p>* {
	padding: 1em;
	line-height: 3em;
}
footer>p {
	margin: 0;
	padding: 0;
}
footer>.author {
	font-family: 'IBM Plex Serif';
	font-weight: 300;
}

@media screen and (max-width: 700px) {
	.title {
		width: auto;
		height: 300px;
		margin: calc((100vh - 300px) / 2) 1em;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 2fr;
	}
	.title h1, .title h2 {
		text-align: center;
	}
	.title h1 {
		align-self: start;
	}
	.title nav {
		grid-column: 1;
	}
}