@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');

body {
	padding: 0;
	margin: 0;
}

h1 {
	color: dimgray;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	text-shadow: -3px 3px 2px silver;
}

#content {
	width: 50%;
	margin: 0 auto;
	overflow-x: hidden;
	padding: 10px;
	background-color: aliceblue;
	box-shadow: 0 0 15px lightgray;
}

header {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: calc(100% - 20px);
	margin: 0 0 20px 0;
	font-family: 'Turret Road', cursive;
	font-size: 300%;
	font-weight: bold;
	background-color: steelblue;
	color: white;
	cursor: default;
	padding: 10px;
	box-shadow: 0 0 20px gray;
}

header:before {
	content: 'filedl';
}

header p {
	margin: 10px auto;
	cursor: default;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

header a {
	display: inline-block;
	width: 200px;
	margin: 0 20px;
	text-align: center;
	background-color: aliceblue;
	color: steelblue;
	border-radius: 5px;
	padding: 5px;
	font-size: 16px;
	text-decoration: none;
}

header a:hover {
	box-shadow: 0 0 10px #467296;
	color: #467296;
}

.inpage {
	background-color: steelblue;
    color: aliceblue;
    border: solid 1px aliceblue;
}

@media screen and (max-width: 812px) {
	#content {
		width: 95%;
	}

	header {
		width: calc(100% - 20px);
	}

	header p {
		flex-wrap: wrap;
	}

	header a {
		display: block;
		width: 80vw;
		margin: 10px auto;
	}
}