@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@1,260;1,320&display=swap');

@font-face {
  font-family: "Optician";
    src: url('../fonts/optician-sans-t.eot');
    src: url('../fonts/optician-sans-t.eot?#iefix') format('embedded-opentype'),
         url('../fonts/optician-sans-t.woff2') format('woff2'),
         url('../fonts/optician-sans-t.woff') format('woff'),
         url('../fonts/optician-sans-t.ttf') format('truetype'),
         url('../fonts/optician-sans-t.svg#optician_sans_tregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


:root {

/*--paper: 	hsla(48, 56%, 98%, 1);*/
--paper: 		hsla(40, 55%, 98%, 1);
--text:		hsla(20, 95%,  3%, 1);
--red: 		hsla(15, 95%, 45%, 1);
--red-text:	hsla(15, 97%, 47%, 1);
/*--petrol: 	hsla(195, 80%, 45%, 1);*/
--petrol: 	hsla(195, 95%, 35%, 1);

}


html {
	color: var(--text);
	font-size: 18px;
	line-height: 1.6;
	font-family: 'Literata', serif;
	background-color: var(--paper); /* #fdfcf8 */
	margin-left: 6px;
	margin-right: 6px;
}

body {
	margin-left: 0.65rem;
	margin-right: 0.6rem;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

p {
	hyphens: auto;
	max-width: 29.8rem;
	widows: 2;
	orphans: 2;
	margin-bottom: 1em;
}


header {
	cursor: default; 
	font-size: 3rem;
	margin-left: -0.05em;
}

.optician {
	font-family: 'Optician', sans-serif;
	text-transform: uppercase;
	font-kerning: none;
	text-rendering: geometricPrecision;
}

h1 {
	margin: 0;
	margin-top: 0.5em;
	margin-left: -0.03em;
	font-size: 1em;
	line-height: 1.25;
}

h1 span:nth-of-type(1) { letter-spacing:  0.00em; } /* T */
h1 span:nth-of-type(2) { letter-spacing: -0.08em; } /* Y */
h1 span:nth-of-type(3) { letter-spacing:  0.00em; } /* P */
h1 span:nth-of-type(4) { letter-spacing: -0.05em; } /* O */
h1 span:nth-of-type(5) { letter-spacing: -0.02em; } /* B */
h1 span:nth-of-type(6) { letter-spacing: -0.04em; } /* Ü */
h1 span:nth-of-type(7) { letter-spacing:  0.00em; } /* R */
h1 span:nth-of-type(8) { letter-spacing:  0.00em; } /* O */


.redbar /* ■ */ {
	/*margin-left: 0.025em;*/
	line-height: 0.35;
	letter-spacing: -0.102em;
	color: var(--red);
	}

h2.claim {
	margin: 0;
	margin-left: 0.2em;
	margin-top: 0.62em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.19em;
	word-spacing: 0.3em;
	font-size: 0.266em;
	line-height: 2.0;
}



@-moz-document url-prefix() {
    .redbar { letter-spacing: -0.087em; }
    h2.claim { letter-spacing: 0.22em; }
    }

@supports (-webkit-touch-callout: none) {
	h1 { font-size: 0.92em; }
	h2.claim { letter-spacing: 0.21em; }
	}




.schuster {
	margin-top: 2.9rem;
	margin-bottom: 3rem;
	}

.schuster span {
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: 320;
}

/*
.schuster span:nth-of-type(2):before {
	content: "\a";
	white-space: pre;
}*/


	
.schuster div {
	text-transform: uppercase;
	letter-spacing: 0.19em;
	color: var(--red-text);
	font-size: 0.8em;
	margin-top: 1em;
	margin-left: 6em;
}


.em {
	font-weight: 700;
	font-style: italic;
	color: var(--red-text);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.halfline {
	display: block;
	margin-top: 0.35em;
	margin-bottom: 0.35em;
	
}

img.signature {
	margin-top: 1rem;
}

span.signature {
	font-size: 1.35rem;
	font-style: italic;
	font-weight: 300;
	color: var(--petrol);
	line-height: 2.35;
}


footer {
	height: 2rem;
}



@media screen and (min-width: 390px) { 
	
	}



@media screen and (min-width: 480px) { 

	html { font-size: 18px; }
	
	.schuster span:nth-of-type(2) {
		margin-left: 3em;
		display: block;
		margin-top: 0.1em;
		}
	}



@media screen and (min-width: 640px) { 
	
	html { font-size: 18px; }
	body { 
		margin-right: 0;
    		margin-left: calc( ( 100vw - 30rem ) / 2.1 );
    		}
	
	.schuster {
		margin-left: -1em;
		}

	.schuster span { 
		font-size: 2rem; 
		}

	.schuster span:nth-of-type(2):before {
		content: unset;
		white-space: normal;
		}


	.schuster span:nth-of-type(2) {
		margin-left: 5em;
		display: block;
		margin-top: 0.1em;
		}
		
	.schuster div {
		margin-left: 21em;
		}
	}
	
@media screen and (min-width: 1200px) { 
	body {
    		margin-left: 15rem;
    		}
	}