* {
	box-sizing: border-box;
}
body{
	margin: 0;
	padding: 1.5rem;
	background-color: #f3f4f8;
	color: #1f2a37;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.55;
}
#wrapper{
	display:grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header header header"
		"left main right"
		"footer footer footer";
	gap: 1rem;
	min-height: 90vh;
	max-width: 1100px;
	margin: 0 auto;
}
.default{
	border-radius: 1rem;
	padding:1rem 1.4rem;
	font-size:3ch;
	box-shadow: 0 2px 10px rgba(31, 42, 55, .12);
	border: 1px solid rgba(31, 42, 55, .08);
}
.default h1,
.default h2{
	margin: 0 0 .4em;
	font-family: Georgia, Cambria, "Times New Roman", serif;
	line-height: 1.2;
}
.default h1{
	font-size: 1.6rem;
}
.default h2{
	font-size: 1.1rem;
	padding-bottom: .4em;
	border-bottom: 2px solid rgba(31, 42, 55, .25);
}
.default p,
.default li{
	font-size: .95rem;
}
header{
	grid-area: header;
	background-color: lightblue;
}
header h1{
	margin-bottom: 0;
}
header p{
	margin: .2em 0 0;
}
aside{
	background-color: antiquewhite;
}
aside ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
aside li{
	padding: .4em .6em;
	border-radius: .5rem;
}
aside li:hover{
	background-color: rgba(255, 255, 255, .6);
}
.leftSide{
	grid-area: left;
}
main{
	grid-area: main;
	background-color: lavender;
}
main.default h2{
	font-size: 1.7rem;
	border-bottom: 0;
	padding-bottom: 0;
}
main .lead{
	font-family: Georgia, Cambria, "Times New Roman", serif;
	font-size: 1.2rem;
	margin: 0 0 1rem;
}
main pre{
	background-color: #2d2a4a;
	color: #f3f1ff;
	padding: 1rem 1.2rem;
	border-radius: .7rem;
	overflow-x: auto;
	font-size: .9rem;
}
code{
	font-family: ui-monospace, Consolas, Menlo, monospace;
}
main p code{
	background-color: rgba(255, 255, 255, .7);
	padding: .1em .35em;
	border-radius: .3rem;
	font-size: .9em;
}
.rightSide{
	grid-area: right;
}
footer{
	grid-area: footer;
	background-color:aquamarine;
	text-align: center;
}
footer.default h2{
	margin: 0;
	padding: 0;
	border: 0;
}

@media (max-width: 700px){
	#wrapper{
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"main"
			"left"
			"right"
			"footer";
	}
}