@charset "utf-8";

:root {
	--h-padding-x: 0.5rem;
	--text-margin-y: 0.5em;
	--text-margin-x: 0.5em;
	--box-shadow: 0 2px 2px rgb(192, 192, 192);
	--row-border: solid 1px rgb(192, 192, 192);
	--color-h1-bg: rgb(255, 194, 104);
	--color-h2-bg: rgb(255, 234, 140);
	--color-a-hover-bg: rgb(240, 240, 240);
}

body {
	font-family: sans-serif;
}

h1 {
	font-size: 1.4em;
	padding: 0 var(--h-padding-x);
	background-color: var(--color-h1-bg);
	box-shadow: var(--box-shadow);
}

h2 {
	font-size: 1em;
	padding: 0 var(--h-padding-x);
	background-color: var(--color-h2-bg);
	box-shadow: var(--box-shadow);
}

p {
	margin-left: var(--text-margin-x);
	margin-right: var(--text-margin-x);
}

a {
	display: block;
	padding: var(--text-margin-y) var(--text-margin-x);
}

div.row {
	display: grid;
	grid: auto-flow / 1fr 1fr;
	align-items: center;
	border-bottom: var(--row-border);
}

div.row > div:last-child {
	padding: var(--text-margin-y) 0;
}

div.list {
	display: grid;
	grid: auto-flow / 1fr 1fr;
}

footer {
	text-align: center;
}

@media screen and (min-width: 720px) {
	/* consider body's default margin */

	main {
		width: 640px;
		margin: 0 auto;
	}

	a:hover {
		background-color: var(--color-a-hover-bg);
	}
}