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

html {
	height: 100%;
}

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

overview,product {
	display: none;
}

@media screen {
	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;
		max-width: 40em;
		text-decoration: none;
		color: black;
	}

	owner {
		display: block;
		width: 11em;

		border-bottom: black 1px dotted;

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

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

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

	recovery {
		display: block;
		width: 17em;

		border-bottom: black 1px dotted;

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

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

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

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

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

	.selected {
		font-weight: 600;
	}
}

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

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

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

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