@font-face {
	font-family: 'copernicus';
	src: url('copernicus-semibold.woff2') format('woff2');
	font-weight: 600;
	font-display: block;
}

@font-face {
	font-family: 'inconsolata';
	src: url('inconsolata-bold.woff2') format('woff2');
	font-weight: 700;
	font-display: block;
}

@font-face {
	font-family: 'proxima-nova';
	src: url('proxima-nova-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: 'proxima-nova';
	src: url('proxima-nova-semibold.woff2') format('woff2');
	font-weight: 600;
	font-display: block;
}

@page {
	size: letter landscape;
	margin: 0;
}

html {
	height: 100%;
}

body {
	margin: 0;
	font-family: 'proxima-nova';
	font-weight: 400;
	height: 100%;

	color: black;
	background-color: white;
}

overview,product {
	display: none;
}

@media screen, speech {
	overview {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 1em;
	}

	h1 {
		font-family: 'copernicus';
		font-weight: 600;
		align-self: center;
	}

	h2 {
		font-family: 'proxima-nova';
		font-weight: 600;
		align-self: center;
		margin-top: 1.2em;
	}

	blurb {
		text-align: justify;
		margin-bottom: 1em;
		max-width: 40em;
	}

	a {
		margin-bottom: 1em;
		padding: 0.1em;
		max-width: 40em;
		text-decoration: none;
		color: black;
	}

	input {
		display: block;

		border: 0;
		border-bottom: black 1px dotted;

		margin-top: 0.2em;
		margin-bottom: 0.2em;

		padding: 0.1em;
	}

	input:focus {
		outline: none;
	}

	input.owner {
		width: 11em;

		font-family: 'proxima-nova';
		font-weight: 600;
		font-size: 1.5em;
	}

	input.recovery {
		width: 17em;

		font-family: 'inconsolata';
		font-weight: 700;
		font-size: 1.2em;

		text-align: center;
	}

	label.recovery {
		text-align: center;
	}

	button {
		/* ugly hack to give the focus box breathing room without moving the text */
		position: relative;
		left: -0.1em;
		padding: 0.1em;

		border: none;
		background: none;

		font-family: inherit;
		font-size: inherit;
		font-weight: bold;
	}

	button.selectable {
		font-weight: normal;
	}

	button.selected {
		font-weight: bold;
	}

	ol {
		box-sizing: border-box;
		max-width: 40em;
		margin: 0;
		padding-inline-start: 1em;
	}

	ol > li {
		margin-bottom: 1em;
		padding: 0.1em;
	}

	.selected {
		font-weight: 600;
	}

	*:focus {
		outline: none;
		box-shadow: 0 0 2pt 1pt maroon;
	}
}

@media print {
	product {
		display: grid;
		width: 100%;
		height: 100%;
		grid-template:
			[side1-start] "page56 page1" 100% [side1-end]
			[side2-start] "page55 page2" 100% [side2-end]
			[side3-start] "page54 page3" 100% [side3-end]
			[side4-start] "page53 page4" 100% [side4-end]
			[side5-start] "page52 page5" 100% [side5-end]
			[side6-start] "page51 page6" 100% [side6-end]
			[side7-start] "page50 page7" 100% [side7-end]
			[side8-start] "page49 page8" 100% [side8-end]
			[side9-start] "page48 page9" 100% [side9-end]
			[side10-start] "page47 page10" 100% [side10-end]
			[side11-start] "page46 page11" 100% [side11-end]
			[side12-start] "page45 page12" 100% [side12-end]
			[side13-start] "page44 page13" 100% [side13-end]
			[side14-start] "page43 page14" 100% [side14-end]
			[side15-start] "page42 page15" 100% [side15-end]
			[side16-start] "page41 page16" 100% [side16-end]
			[side17-start] "page40 page17" 100% [side17-end]
			[side18-start] "page39 page18" 100% [side18-end]
			[side19-start] "page38 page19" 100% [side19-end]
			[side20-start] "page37 page20" 100% [side20-end]
			[side21-start] "page36 page21" 100% [side21-end]
			[side22-start] "page35 page22" 100% [side22-end]
			[side23-start] "page34 page23" 100% [side23-end]
			[side24-start] "page33 page24" 100% [side24-end]
			[side25-start] "page32 page25" 100% [side25-end]
			[side26-start] "page31 page26" 100% [side26-end]
			[side27-start] "page30 page27" 100% [side27-end]
			[side28-start] "page29 page28" 100% [side28-end]
			/ 50% 50%;
	}

	h1 {
		font-family: 'copernicus';
		font-weight: 600;
		align-self: center;
	}

	h2 {
		font-family: 'proxima-nova';
		font-weight: 600;
		align-self: center;
	}

	page {
		page-break-inside: avoid;

		position: relative;
		padding: 1.5em;

		display: flex;
		flex-direction: column;
	}

	page[data-half="first"]:nth-of-type(2n) {
		transform: rotateZ(180deg);
	}

	page[data-half="second"]:nth-of-type(2n+1) {
		transform: rotateZ(180deg);
	}

	page:nth-of-type(2n+1) {
		border-left: 1px black solid;
	}

	pagenum {
		order: 99;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	page:nth-of-type(2n+1) pagenum {
		align-self: flex-end;
	}

	letter {
		font-family: 'copernicus';
		font-weight: 600;
		font-size: 4em;
		margin-bottom: 0.2em;
	}

	page:nth-of-type(2n+1) letter {
		align-self: flex-end;
	}

	blurb {
		text-align: justify;
		margin-bottom: 1em;
	}

	owner {
		display: block;
		width: 11em;

		border-bottom: black 1px dotted;

		font-family: 'proxima-nova';
		font-weight: 600;
		font-size: 1.5em;

		text-align: center;
		align-self: center;

		margin-top: 1em;
		margin-bottom: 1em;
	}

	recovery {
		display: block;
		width: 17em;

		border-bottom: black 1px dotted;

		font-family: 'inconsolata';
		font-weight: 700;
		font-size: 1.5em;

		text-align: center;
		align-self: center;

		margin-top: 1em;
	}

	passwordBlock {
		display: grid;
		margin-bottom: 1.5em;
		font-size: 1.4em;

		grid-template:
			[password-start] "passwordLabel password" [password-end]
			[website-start] "websiteLabel website" [website-end]
			[username-start] "usernameLabel username" [username-end];
		grid-template-columns: 5em auto;
		grid-column-gap: 0.5em;
		grid-row-gap: 0.2em;
	}

	passwordLabel,websiteLabel,usernameLabel {
		text-align: right;
	}

	password {
		display: block;
		font-family: 'inconsolata';
		font-weight: 700;
		font-size: 1.1em;
	}

	passwordAlphaNum,passwordWords {
		display: none;
	}

	product.passwords-short passwordAlphaNum {
		display: inline;
	}

	product.passwords-readable passwordWords {
		display: inline;
	}

	passwordSymbols {
		color: darkgrey;
		border: 1px darkgrey dotted;
		border-radius: 1em;
		padding: 0.2em;
		margin: 0.2em;
	}

	website,username {
		width: 100%;
		border-bottom: black 1px dotted;
		margin-bottom: 0.17em;
	}
}