<main>


	<form class="check">
		<div class="check__front">
			<div class="check__person">
				<address class="check__address">
					<strong>Jack O. Lantern</strong><br>
					123 Somewhere Lane<br>
					Harrisburg, PA 17110
				</address>
			</div>
			<div class="check__date">
				<input class="check__input" id="date" type="text" name="date">
				<label class="check__label" for="date">
					<small>Date</small>
				</label>
			</div>
			<div class="check__no">
				<span>1234</span><br>
				<small>12-345/6789 12345</small>
			</div>
			<label class="check__label check__order-of" for="order-of">Pay to the Order of</label>
			<input class="check__input" id="order-of" type="text" name="order_of">
			<label class="check__label check__currency" for="amount">$</label>
			<input class="check__input" id="amount" type="number" name="amount" step="0.01" min="0">
			<input class="check__input" id="amount-in-words" type="text" name="amount_in_words" maxlength="99">
			<label class="check__label check__currency-name" for="amount-in-words">Dollars</label>
			<svg class="check__icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 512 512" aria-label="Camera" role="img">
				<path d="M 352 277.333 C 352 330.352 309.019 373.333 256 373.333 C 202.981 373.333 160 330.352 160 277.333 C 160 224.314 202.981 181.333 256 181.333 C 309.019 181.333 352 224.314 352 277.333 Z M 236 338.044 C 236 349.09 244.954 358.044 256 358.044 C 267.046 358.044 276 349.09 276 338.044 L 276 274.649 C 287.956 267.732 296 254.805 296 240 C 296 217.909 278.091 200 256 200 C 233.909 200 216 217.909 216 240 C 216 254.805 224.044 267.732 236 274.649 Z" />
				<path d="M 512.001 149.333 L 512.001 426.666 C 512.001 450.198 492.865 469.333 469.334 469.333 L 42.667 469.333 C 19.135 469.333 0 450.197 0 426.666 L 0 149.333 C 0 125.802 19.135 106.667 42.667 106.667 L 110.323 106.667 C 118.875 106.667 126.906 103.334 132.958 97.292 L 171.958 58.292 C 182.031 48.219 195.427 42.667 209.677 42.667 L 302.323 42.667 C 316.573 42.667 329.969 48.219 340.042 58.292 L 379.042 97.292 C 385.094 103.334 393.125 106.667 401.677 106.667 L 469.333 106.667 C 492.865 106.667 512 125.802 512.001 149.333 Z M 384 277.333 C 384 206.75 326.583 149.333 256 149.333 C 185.417 149.333 128 206.75 128 277.333 C 128 347.916 185.417 405.333 256 405.333 C 326.583 405.333 384 347.916 384 277.333 Z M 456 130 C 439.431 130 426 143.431 426 160 C 426 176.569 439.431 190 456 190 C 472.569 190 486 176.569 486 160 C 486 143.431 472.569 130 456 130 Z" />
			</svg>
			<div class="check__photo">
				<strong>Photo<br>Safe<br>Deposit&reg;</strong><br>Details on back
			</div>
			<div class="check__logo">
				<small aria-label="XYZ Bank">XYZ Bank</small>
			</div>
			<div class="check__division">
				<small aria-label="Advisors">Advisors</small>
			</div>
			<div class="check__payable">payable through<br>XYZ Bank, N.A.</div>
			<label class="check__label check__memo" for="memo">For</label>
			<input class="check__input" id="memo" type="text" name="memo">
			<label class="check__label check__signature" for="signature">Signature</label>
			<input class="check__input" id="signature" type="text" name="signature">
			<div class="check__mp">
				<strong>MP</strong>
			</div>
			<div class="check__routing-no"><code>987654321</code></div>
			<div class="check__account-no"><code>123457890</code></div>
			<div class="check__bottom-no"><code>1234</code></div>
			<div class="check__manufacturer">Harland Clarke</div>
		</div>
		<div class="check__back">
			<div class="check__info">
				<p><code>987654321</code><br>
				<code>123457890</code></p>
				<div class="check__back-no"><code>1234</code></div>
				<div class="check__back-person">Jack O. Lantern</div>
				<div class="check__alter-area">
					<div class="check__alter-area-head"><small>Alter Area</small></div>
					<div class="check__alter-area-body">
						<div class="check__alter-area-border"></div>
						<strong>XYZ Bank&nbsp;&nbsp;XYZ Bank&nbsp;&nbsp;XYZ Bank&nbsp;&nbsp;XYZ Bank&nbsp;&nbsp;XYZ Bank&nbsp;&nbsp;XYZ Bank</strong>
					</div>
				</div>
				<div class="check__features">
					<strong>Security Features exceed industry standards and include:</strong>
					<ul class="check__features-list">
						<li>ImageMatch&reg;: Matching account and check number <br>on back <small>(Patent No. 9,240,088)</small></li>
						<li>MobileMark&reg;: Mobile Deposit check mark to indicate <br>check has been deposited via mobile device</li>
						<li>The Security Weave&reg; pattern on back designed to deter fraud</li>
						<li>Microprint (MP) lines printed on front and back</li>
						<li>The words <q>ORIGINAL DOCUMENT</q> across the back</li>
						<li>Photo Safe Deposit&reg; icon visible on front and back</li>
					</ul>
					<strong>Do not cash if:</strong>
					<ul class="check__features-list">
						<li>Any of the features listed aboce are missing or appear altered</li>
						<li>Fugitive Ink on back looks pink or has disappeared in Alter Area</li>
						<li>Brown stains or colored spots appear on both front and back</li>
					</ul>
				</div>
				<div class="check__icons">
					<svg class="check__icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 512 512" aria-label="IJQ" role="img">
						<path d="M 436 256 C 436 355.411 355.411 436 256 436 C 156.589 436 76 355.411 76 256 C 76 156.589 156.589 76 256 76 C 355.411 76 436 156.589 436 256 Z M 106.576 159.69 L 106.576 336 L 142.176 336 L 142.176 159.69 Z M 210.591 308.87 C 200.337 308.87 195.211 300.557 195.211 283.93 L 159.491 283.93 C 159.491 301.043 163.971 314.403 172.931 324.01 C 181.891 333.617 194.444 338.42 210.591 338.42 C 225.611 338.42 237.881 333.253 247.401 322.92 C 256.927 312.587 261.691 298.863 261.691 281.75 L 261.691 159.69 L 226.091 159.69 L 226.091 280.05 C 226.091 299.263 220.924 308.87 210.591 308.87 Z M 392.106 176.88 C 380.806 163.807 365.426 157.27 345.966 157.27 C 326.026 157.27 310.446 164.07 299.226 177.67 C 288.006 191.27 282.396 210.18 282.396 234.4 L 282.396 262.01 C 282.476 285.91 288.146 304.62 299.406 318.14 C 310.666 331.66 326.266 338.42 346.206 338.42 L 355.536 337.82 L 387.986 367.48 L 410.386 346.9 L 386.046 325.1 C 401.792 311.86 409.666 290.67 409.666 261.53 L 409.666 231.98 C 409.259 208.327 403.406 189.96 392.106 176.88 Z M 366.976 297.31 C 362.416 304.937 355.492 308.75 346.206 308.75 C 336.686 308.75 329.602 304.917 324.956 297.25 C 320.316 289.583 317.996 277.677 317.996 261.53 L 317.996 232.34 C 318.156 217.087 320.496 205.727 325.016 198.26 C 329.536 190.787 336.519 187.05 345.966 187.05 C 355.412 187.05 362.436 190.887 367.036 198.56 C 371.642 206.227 373.946 218.093 373.946 234.16 L 373.946 262.37 C 373.859 278.037 371.536 289.683 366.976 297.31 Z" />
					</svg>
					<svg class="check__icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 512 512" aria-label="Camera" role="img">
						<path d="M 352 277.333 C 352 330.352 309.019 373.333 256 373.333 C 202.981 373.333 160 330.352 160 277.333 C 160 224.314 202.981 181.333 256 181.333 C 309.019 181.333 352 224.314 352 277.333 Z M 236 338.044 C 236 349.09 244.954 358.044 256 358.044 C 267.046 358.044 276 349.09 276 338.044 L 276 274.649 C 287.956 267.732 296 254.805 296 240 C 296 217.909 278.091 200 256 200 C 233.909 200 216 217.909 216 240 C 216 254.805 224.044 267.732 236 274.649 Z" />
						<path d="M 512.001 149.333 L 512.001 426.666 C 512.001 450.198 492.865 469.333 469.334 469.333 L 42.667 469.333 C 19.135 469.333 0 450.197 0 426.666 L 0 149.333 C 0 125.802 19.135 106.667 42.667 106.667 L 110.323 106.667 C 118.875 106.667 126.906 103.334 132.958 97.292 L 171.958 58.292 C 182.031 48.219 195.427 42.667 209.677 42.667 L 302.323 42.667 C 316.573 42.667 329.969 48.219 340.042 58.292 L 379.042 97.292 C 385.094 103.334 393.125 106.667 401.677 106.667 L 469.333 106.667 C 492.865 106.667 512 125.802 512.001 149.333 Z M 384 277.333 C 384 206.75 326.583 149.333 256 149.333 C 185.417 149.333 128 206.75 128 277.333 C 128 347.916 185.417 405.333 256 405.333 C 326.583 405.333 384 347.916 384 277.333 Z M 456 130 C 439.431 130 426 143.431 426 160 C 426 176.569 439.431 190 456 190 C 472.569 190 486 176.569 486 160 C 486 143.431 472.569 130 456 130 Z" />
					</svg>
					<div class="check__photo">
						<strong>Photo<br>Safe<br>Deposit&reg;</strong>
					</div>
					<svg class="check__icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 512 512" aria-label="Circle" role="img">
						<circle cx="256" cy="256" r="240"/>
					</svg>
				</div>
			</div>
			<div class="check__watermarks">
				<div class="check__watermark">Original Document</div>
				<div class="check__watermark">Original Document</div>
				<div class="check__watermark">Original Document</div>
				<div class="check__watermark">Original Document</div>
				<div class="check__watermark">Original Document</div>
				<div class="check__watermark">Original Document</div>
				<div class="check__watermark">Original Document</div>
				<div class="check__side-watermark">OriginalDocumentOriginalDocumentOriginalDocument</div>
			</div>
			<div class="check__deposit">
				<div class="check__deposit-box">
					<label class="check__label" for="endorsement"><small><strong>Endorse Here</strong></small></label>
					<strong class="check__sign-here">X</strong><input class="check__input check__endorsement" id="endorsement" type="text" name="endorsement">
					<label class="check__label check__signature" for="institution">Institution</label>
					<input class="check__input check__institution" id="institution" type="text" name="institution">
					<label class="check__label"><input class="check__input" type="checkbox" name="mobile_deposit"><small>Check box for mobile/remote deposit</small></label>
					<div class="check__deposit-tip">
						<small>Write name of financial institution on line above</small>
					</div>
				</div>
			</div>
		</div>
	</form>
</main>
<style>

input[type=checkbox], label {
	cursor: pointer;
}
input[type=checkbox] {
	margin-right: 0.25em;
}
/* Both sides */
.check {
	box-shadow:
		0 0.125rem 0.375rem #0007;
	font-size: 0.5em;
	line-height: 1;
	margin-top: 1.5em;
	position: relative;
	transition: transform 0.3s ease-in-out;
	transform-style: preserve-3d;
	width: 24rem;
	height: 11rem;
}
input[type=checkbox]:checked ~ .check {
	transform: translateY(6.5rem) rotateZ(90deg) rotateX(-180deg);
}
.check small {
	font-size: 0.75em;
}
.check code {
	display: inline-block;
	font-family: "Courier Prime", monospace;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	transform: translateY(0.1em);
}
.check__front, .check__back {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
}
/* Front */
.check__front, .check__input {
	color: #17181c;
}
.check__front {
	background:
		repeating-radial-gradient(2rem 1rem at 75% 0%,#ebecef00 0 0.7rem,#ebecef 0.71rem 0.75rem),
		repeating-radial-gradient(4rem 2rem at 0% 100%,#ebecef00 0 0.7rem,#ebecef 0.71rem 0.75rem),
		#dddfe3;
	background-repeat: no-repeat;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 1rem 1rem 0 1rem;
	transform: translateZ(1px);
}
.check__address, .check__date .check__label,  .check__order-of, .check__currency-name, .check__logo, .check__division, .check__memo {
	font-family: "Tinos", serif;
}
.check__address {
	font-style: normal;
}
.check__input {
	font-family: "Architects Daughter", sans-serif;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
}
.check__input[type=number] {
	background: #fff;
	padding: 0 0.25rem;
	width: 5.24rem;
}
.check__input[type=text], .check__mp {
	border-bottom: 1px solid;
}
.check__input[type=text] {
	background: transparent;
}
.check__label {
	display: block;
}
.check__person, .check__logo, .check__division {
	text-transform: uppercase;
}
.check__person {
	width: 11.75rem;
}
.check__date {
	margin: 1.25rem 0.5rem 0.75rem 0;
	width: 5.99rem;
}
.check__date .check__input {
	width: 100%;
}
.check__date .check__label, .check__order-of {
	text-align: right;
}
.check__no, .check__currency, .check__icon, .check__logo, .check__division {
	text-align: center;
}
.check__no {
	width: 3.75rem;
}
.check__no span, .check__currency, .check__icon {
	font-size: 1.5em;
}
.check__no span {
	display: inline-block;
	margin: 0 0 0.125rem 0;
}
.check__order-of {
	margin-right: 0.25rem;
	transform: translateY(-0.125rem);
	width: 2.25rem;
}
.check__order-of + .check__input {
	border-right: 1px solid;
	width: 13.25rem;
}
.check__currency {
	margin-left: 0.25rem;
	width: 0.75rem;
	transform: scaleX(1.25);
}
.check__currency + .check__input + .check__input {
	margin-right: 0.25rem;
	width: 16.5rem;
}
.check__currency-name {
	transform: translateY(0.25rem);
}
.check__icon {
	margin: 0 0.5em 0 0.625em;
	height: 0.75rem;
	width: 0.75rem;
}
.check__photo, .check__manufacturer, .check__payable {
	font-size: 0.5em;
}
.check__photo {
	width: 2rem;
}
.check__logo, .check__division {
	color: #fff;
	height: 1.5rem;
}
.check__logo {
	background: #0b46da;
	margin-right: 0.125rem;
	margin-bottom: 0.25rem;
	padding: 0.25rem 0;
	width: 1.5rem;
}
.check__division {
	background: #255ff4;
	margin-right: 0.5rem;
	padding: 0.5rem 0;
	width: 2.5rem;
}
.check__payable {
	margin-top: 0.875rem;
	width: 16.875rem;
}
.check__memo {
	margin-right: 0.125rem;
	transform: translateY(0.3rem);
}
.check__memo + .check__input {
	margin-right: 1.5rem;
	width: 9rem;
}
.check__memo + .check__input ~ .check__input, .check__endorsement {
	font-family: "Mr Dafoe", cursive;
}
.check__memo + .check__input ~ .check__input {
	font-size: 1.5em;
    transform: translateY(-0.5em);
	width: 10rem;
}
.check__signature {
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
}
.check__mp {
	font-size: 0.75em;
	letter-spacing: -0.25em;
	padding-top: 0.75em;
	width: 0.5rem;
	height: 0.75rem;
	transform: translateY(0rem);
}
.check__routing-no, .check__account-no, .check__bottom-no {
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}
.check__routing-no {
	margin-left: 0.25rem;
	width: 6.5rem;
}
.check__routing-no:before, .check__routing-no:after, .check__account-no:after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 0.5rem;
}
.check__routing-no:before, .check__routing-no:after {
	background:
		linear-gradient(#17181c00 15%,#17181c 15% 85%,#17181c00 85%) 0 0 / 25% 100% no-repeat,
		linear-gradient(#17181c 33%,#17181c00 33% 67%,#17181c 67%) 100% 0 / 50% 100% no-repeat;
	width: 0.4rem;
}
.check__routing-no:before {
	margin-right: 0.25rem;
}
.check__account-no {
	width: 6.75rem;
}
.check__account-no:after {
	background:
		linear-gradient(90deg,#17181c 33%,#17181c00 33% 67%,#17181c 67%) 0 50% / 40% 75% no-repeat,
		linear-gradient(#17181c 50%,#17181c00 50%) 100% 0 / 50% 100% no-repeat;
	width: 0.5rem;
}
.check__bottom-no {
	width: 8rem;
}
.check__manufacturer {
	transform: translateX(-0.375rem);
}
/* Back */
.check__input[type=checkbox] {
	box-shadow: 0 0 0 1px #c7cad1 inset;
	vertical-align: middle;
	width: 1em;
	height: 1em;
}
.check__input[type=checkbox]:before {
	content: "\2713";
	display: block;
	line-height: 1;
	text-align: center;
	visibility: hidden;
}
.check__input[type=checkbox]:checked:before {
	visibility: visible;
}
.check__input[type=checkbox] + small {
	display: inline-block;
	letter-spacing: 0.05em;
	transform: scaleY(1.25);
	word-spacing: 0.25em;
}
.check__back, .check__alter-area-body {
	background: #fff;
}
.check__back {
	background:
		repeating-linear-gradient(5deg,#fff 0 0.05rem,#fff0 0.07rem 0.38rem,#fff 0.4rem),
		repeating-linear-gradient(-50deg,#fff 0 0.05rem,#fff0 0.07rem 0.38rem,#fff 0.4rem),
		#ebecef;
	color: #c7cad1;
	transform: translateZ(0) rotateY(180deg);
}
.check__back .check__input[type=text] {
	border-bottom: 1px solid #c7cad1;
}
.check__info, .check__deposit {
	background: #fff;
}
.check__info {
	margin-left: 0.25rem;
	padding: 0.5rem 0.5rem 0.1rem 0.25rem;
	width: calc(50% - 0.25rem);
	height: calc(100% - 0.25rem);
}
.check__back-no, .check__alter-area, .check__icons, .check__side-watermark {
	position: absolute;
}
.check__back-no {
	top: 0.25rem;
	right: calc(50% + 0.75rem);
}
.check__back-person, .check__alter-area, .check__watermarks {
	text-transform: uppercase;
}
.check__back-person, .check__alter-area-head {
	letter-spacing: -0.05em;
}
.check__back-person {
	margin-bottom: 2rem;
}
.check__alter-area {
	color: #e3e4e8;
	top: 2.75rem;
	left: 0.5rem;
	z-index: 1;
}
.check__alter-area-head {
	margin-bottom: 0.25em;
	padding-left: 0.5rem;
}
.check__alter-area-body {
	border-radius: 0.5rem;
	box-shadow: 0 0 0 1px inset;
	padding: 0.25rem 0.25rem;
	position: relative;
	text-align: center;
	width: 17.65rem;
}
.check__alter-area-border, .check__alter-area-border:before, .check__alter-area-border:after {
	position: absolute;
}
.check__alter-area-border {
	/*<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><rect x='0' y='0' width='24' height='10' rx='5' ry='5' fill='#000' /><rect x='2' y='2' width='20' height='6' rx='3' ry='3' fill='#fff' /><rect x='0' y='50' width='24' height='10' rx='5' ry='5' fill='#000' /><rect x='2' y='52' width='20' height='6' rx='3' ry='3' fill='#fff' /></svg>*/
	background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3e%3crect x='0' y='0' width='24' height='10' rx='5' ry='5' fill='%23e3e4e8' /%3e%3crect x='2' y='2' width='20' height='6' rx='3' ry='3' fill='%23fff' /%3e%3crect x='0' y='50' width='24' height='10' rx='5' ry='5' fill='%23e3e4e8' /%3e%3crect x='2' y='52' width='20' height='6' rx='3' ry='3' fill='%23fff' /%3e%3c/svg%3e") 0 0 / 0.8rem 1.2rem;
	background-repeat: repeat-x;
	pointer-events: none;
	top: -0.1rem;
	left: 0.4rem;
	width: calc(100% - 0.8rem);
	height: calc(100% + 0.2rem);
}
.check__alter-area-border:before, .check__alter-area-border:after {
	content: "";
	display: block;
	top: 0;
	width: 0.5rem;
	height: 100%;
}
.check__alter-area-border:before {
	/*<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 60'><rect x='0' y='18' width='10' height='24' rx='5' ry='5' fill='#000' /><rect x='2' y='20' width='6' height='20' rx='3' ry='3' fill='#fff' /></svg>*/
	background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 60'%3e%3crect x='0' y='18' width='10' height='24' rx='5' ry='5' fill='%23e3e4e8' /%3e%3crect x='2' y='20' width='6' height='20' rx='3' ry='3' fill='%23fff' /%3e%3c/svg%3e") 0 0 / 0.4rem 1.2rem;
	background-repeat: no-repeat;
	left: -0.5rem;
}
.check__alter-area-border:after {
	/*<svg viewBox='0 0 20 60' xmlns='http://www.w3.org/2000/svg'><rect width='10' height='24' rx='5' ry='5' fill='#000' x='15' transform='matrix(0.707107, -0.707107, 0.707107, 0.707107, -12.60659, 17.677675)' /><rect x='17' y='2' width='6' height='20' rx='3' ry='3' fill='#fff' transform='matrix(0.707107, -0.707107, 0.707107, 0.707107, -12.60659, 17.677675)' /><rect width='10' height='24' rx='5' ry='5' fill='#000' x='15' y='36' transform='matrix(0.707107, 0.707107, -0.707107, 0.707107, 29.819815, -0.06244)' /><rect x='17' y='38' width='6' height='20' rx='3' ry='3' fill='#fff' transform='matrix(0.707107, 0.707107, -0.707107, 0.707107, 29.819815, -0.06244)' /></svg>*/
	background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 20 60' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='10' height='24' rx='5' ry='5' fill='%23e3e4e8' x='15' transform='matrix(0.707107, -0.707107, 0.707107, 0.707107, -12.60659, 17.677675)'%3e%3c/rect%3e%3crect x='17' y='2' width='6' height='20' rx='3' ry='3' fill='%23fff' transform='matrix(0.707107, -0.707107, 0.707107, 0.707107, -12.60659, 17.677675)'%3e%3c/rect%3e%3crect width='10' height='24' rx='5' ry='5' fill='%23e3e4e8' x='15' y='36' transform='matrix(0.707107, 0.707107, -0.707107, 0.707107, 29.819815, -0.06244)'%3e%3c/rect%3e%3crect x='17' y='38' width='6' height='20' rx='3' ry='3' fill='%23fff' transform='matrix(0.707107, 0.707107, -0.707107, 0.707107, 29.819815, -0.06244)'%3e%3c/rect%3e%3c/svg%3e") 0 0 / 0.4rem 1.2rem;
	background-repeat: no-repeat;
	right: -0.5rem;
}
.check__features {
	font-family: "Oswald", sans-serif;
	font-size: 0.8em;
	margin-left: 0;
	line-height: 1.2;
	transform: translateX(1.125rem);
}
.check__features-list {
	padding-left: 0.5rem;
}
.check__icons {
	display: flex;
	justify-content: space-between;
	top: 5.125rem;
	left: 0.5rem;
	width: 4.5rem;
	transform: rotate(90deg);
	transform-origin: 0 100%;
}
.check__icons .check__icon, .check__icons .check__photo {
	margin: 0;
}
.check__icons .check__icon circle, .check__icons .check__icon path {
	fill: #c7cad1;
}
.check__icons .check__photo {
	font-size: 0.5em;
	width: 1.25rem;
}
.check__watermarks {
	border-right: 0.1rem solid #c7cad1;
	overflow: hidden;
	padding-top: 0.25rem;
	white-space: nowrap;
	width: 26%;
}
.check__watermark {
	color: #dddfe3;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.1em;
	margin-bottom: 0.5em;
	word-spacing: 0.25em;
	transform: scaleX(1.25);
	transform-origin: 0 50%;
}
.check__watermark:first-child {
	transform: translateX(0.75rem) scaleX(1.25);
}
.check__watermark:nth-child(2) {
	transform: translateX(-2.875rem) scaleX(1.25);
}
.check__watermark:nth-child(3) {
	margin-bottom: 2.5em;
	transform: translateX(0.25rem) scaleX(1.25);
}
.check__watermark:nth-child(4) {
	transform: translateX(-0.75rem) scaleX(1.25);
}
.check__watermark:nth-child(5) {
	transform: translateX(-4.5rem) scaleX(1.25);
}
.check__watermark:nth-child(6) {
	transform: translateX(-1.5rem) scaleX(1.25);
}
.check__watermark:nth-child(7) {
	transform: translateX(0.5rem) scaleX(1.25);
}
.check__watermark:nth-child(n + 4) {
	margin-bottom: 0.7em;
}
.check__side-watermark {
	color: #abafba;
	font-size: 0.5em;
	top: 0;
	left: calc(50% + 0.5em);
	transform: rotate(90deg) scaleX(1.25) translateZ(0);
	transform-origin: 0 100%;
}
.check__deposit {
	width: 24%;
}
.check__deposit-box {
	padding: 0.125rem 0.325rem 0.5rem 0.325rem;
	position: absolute;
	top: 50%;
	left: 88%;
	transform: translate(-50%,-50%) rotate(90deg);
	width: 11rem;
	height: 5.75rem;
}
.check__deposit-box .check__label, .check__deposit-tip {
	text-transform: uppercase;
}
.check__deposit-box .check__label {
	margin-bottom: 0.25rem;
}
.check__sign-here {
	border-bottom: 1px solid;
	display: inline-block;
	line-height: 1.5;
	width: 1.25em;
}
.check__sign-here + .check__endorsement {
	margin-bottom: 1.125rem;
}
.check__sign-here + .check__endorsement, .check__institution, .check__deposit-tip {
	width: calc(100% - 1.25em);
}
.check__institution, .check__deposit-tip {
	margin-left: 1.25em;
}
.check__institution {
	margin-bottom: 0.5rem;
}
.check__deposit-tip {
	letter-spacing: -0.05em;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #17181c;
		--fg: #e3e4e8;
	}
}
</style>