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

@media screen {
	side {
		display: none !important;
	}
}

@media print {
	overview {
		display: none !important;
	}
}

html {
	height: 100%;
}

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

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

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

/**********
 * Screen
 **********/
overview {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1em;
}

overview h2 {
	margin-top: 1.2em;
}

overview blurb {
	max-width: 40em;
}

overview owner {
	text-align: left;
	margin-top: 0;
}

overview recovery {
	margin-top: 0;
	margin-bottom: 1em;
	font-size: 1.2em;
}

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

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

/**********
 * Print
 **********/
side {
	page-break-inside: avoid;

	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: row;
}

side:nth-of-type(even) {
	transform: rotateZ(180deg);
}

page {
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 0;
	position: relative;

	padding: 1.5em;

	display: flex;
	flex-direction: column;
}

page:first-of-type {
	border-right: 1px black solid;
}

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

page:first-of-type pagenum {
}

page:last-of-type pagenum {
	align-self: flex-end;
}

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

page:last-of-type 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;
}

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