:root {
	--red: #bc002d;
	--blue: #003149;
	--white: #fdfdfd;
	--yellow: #fff200;
}

@font-face {
	font-family: 'lato';
	src: url('lato.woff2') format('woff2');
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

body {
	background: var(--blue);
	color: var(--white);
	font-family: lato;
	font-size: 1.3rem;
}

a {
	color: var(--white);
}

.buttons {
	display: grid;
	gap: 1rem;
	margin-bottom: 1rem;
}
button {
	appearance: none;
	background: var(--red);
	border: 2px solid #6b061e;
	font-family: lato;
	font-size: 1.5rem;
	font-weight: bolder;
	color: var(--white);
	height: 5rem;
	width: 100%;
}
button:hover {
	outline: 2px solid var(--white);
}

button:focus,
button:active	 {
	outline: 2px solid var(--yellow);
}

@media (min-width: 34.375rem) {
	header, h1 {
		align-items: center;
		display: flex;
		justify-content: flex-start;
		gap: 1rem;
	}
	header {
		gap: 2rem;
	}
	header p {
		/* not elegant but anyway */
		margin-bottom: 0.8125rem;
	}
	header p::before {
		/* test with some screen readers */
		content: "—";
		margin-right: 0.5rem;
	}
}


@media (min-width: 55rem) and (min-height: 34.375rem) {
	body {
		font-size: 1.7rem;
	}
  .buttons {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 35vh 35vh;
	}
	button {
		font-size: 3rem;
		height: 100%;
	}
	.buttons.small {
		grid-template-rows: 10vh;
	}
	
	.small button {
		font-size: 1.5rem;		
	}
}