html {
	font-family: Georgia, 'Times New Roman', Times, serif;
	display: grid;
	grid-template-columns: minmax(5vw,1fr) minmax(auto,30em) minmax(5vw,11vw);
	grid-template-rows: 11vh auto 22vh;
	grid-template-areas: 
	"margintop margintop margintop"
	"marginleft content marginright"
	"marginbottom marginbottom marginbottom";
	background-color: azure;
}
body {
	grid-area: content;
	transform: rotate(-2.5deg);
	transition: .3s;
}

h1 {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: clamp(2em,10vw,30em);
	margin: 0;
}
@media (min-aspect-ratio: 1/1) {
	body {
		display: grid;
		grid-template-columns: auto minmax(auto,30em);
		grid-template-rows: auto auto;
		grid-template-areas: 
			"header p"
			"header ul";
		transform: rotate(-5deg);
	}
	h1 {
		grid-area: header;
		writing-mode: vertical-lr;
		font-size: clamp(2em,11vh,20em);
	}
	p {
		margin-top: 0;
	}

}

ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
li {
	padding: 0;
	margin: 0 0 1em;
	position: relative;
}
li a {
	color: blue;
	transition: .2s;
}
li a:hover,
li a:focus {
	color: red;
} 
li a:focus {
	outline: dashed;
}
li a:first-of-type {
	display: block;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
li a:first-of-type:focus {
	outline: none;
}
li a:first-of-type::before {
	content: '';
	position: absolute;
	left: -.5em;
	right: -.5em;
	top: -.5em;
	bottom: -.5em;
	transition: .2s;
}
li a:first-of-type:hover::before,
li a:first-of-type:focus::before {
	background-color: rgba(120, 120, 120, .1);
}
li a:first-of-type:focus::before {
	outline: dashed;
}
li a:not(:first-of-type) {
	position: relative;
}