passmate.css

@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;
	}

	blurb.side-one,blurb.side-two {
		display: none;
	}

	overview.side-one blurb.side-one {
		display: block;
	}

	overview.side-two blurb.side-two {
		display: block;
	}

	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.selectable::before {
		display: inline-block;
		height: 0.75em;
		width: 1.15em;
		background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6Ny4wMXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTA1PC90aXRsZT48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjkuNjciIHk9IjkuNjciIHdpZHRoPSI4MC42NyIgaGVpZ2h0PSI4MC42NyIgcng9IjQwLjMzIiByeT0iNDAuMzMiPjwvcmVjdD48L3N2Zz4=");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left 0.05em;
		content: "";
	}

	button.selected {
		font-weight: bold;
	}

	button.selected::before {
		background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6Ny4wMXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTAzPC90aXRsZT48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjkuNjciIHk9IjkuNjciIHdpZHRoPSI4MC42NyIgaGVpZ2h0PSI4MC42NyIgcng9IjQwLjMzIiByeT0iNDAuMzMiPjwvcmVjdD48cmVjdCB4PSIyNC4zMyIgeT0iMjQuMzMiIHdpZHRoPSI1MS4zNCIgaGVpZ2h0PSI1MS4zNCIgcng9IjI1LjY3IiByeT0iMjUuNjciPjwvcmVjdD48L3N2Zz4=");
	}

	ul {
		list-style-type: none;
		padding-inline-start: 25px;
	}

	ul.checklist li::before {
		display: inline-block;
		height: 0.75em;
		width: 1.15em;
		background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzAwMDAwMDt9LmNscy0ye2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6My40N3B4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjMsNTEuMjNDMjkuNjksNTgsMzkuMjEsNzAuNjYsNDQuMTUsODAuNTRBMjU2LDI1NiwwLDAsMSw4My40OCwxOS42bC0zLjYxLTQuMDhjLTEwLjc0LDEwLjYzLTI3LjQ1LDMwLjc4LTM2LjExLDQ3QTk5LDk5LDAsMCwwLDI5LjQxLDQ0TDIzLDUxLjIzWiI+PC9wYXRoPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTc0LjI2LDQ3LjgzbDAsMzcuODdhMS42NywxLjY3LDAsMCwxLTEuNjcsMS42N0gxOC4xOWExLjY3LDEuNjcsMCwwLDEtMS42Ny0xLjY3VjMxLjMxYTEuNjcsMS42NywwLDAsMSwxLjY3LTEuNjdINTAuNzYiPjwvcGF0aD48L3N2Zz4=");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left 0.05em;
		content: "";
	}

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

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

	li.side-one,li.side-two {
		display: none;
	}

	overview.side-one li.side-one {
		display: list-item;
	}

	overview.side-two li.side-two {
		display: list-item;
	}

	.selected {
		font-weight: 600;
	}

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

@media print {
	product {
		display: grid;
		width: 100%;
		height: 100%;
	}

	product.side-two {
		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%;
	}

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

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

	product.side-two 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 {
		display: none;
	}

	product.index-letters letter {
		display: block;
		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;
	}

	blurb.index-letters,blurb.index-none {
		display: none;
	}

	product.index-letters blurb.index-letters {
		display: block;
	}

	product.index-none blurb.index-none {
		display: block;
	}

	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;
	}

	product.index-letters passwordBlock:nth-of-type(6) {
		display: none;
	}

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

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

	passwordShort,passwordPronounceable,passwordReadable {
		display: none;
	}

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

	product.passwords-pronounceable passwordPronounceable {
		display: inline;
	}

	product.passwords-readable passwordReadable {
		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;
	}
}