/* FONTS */
@font-face {
	font-family: 'Ammer';
	src: url(/css/fonts/Ammer.subset.woff2);
}
@font-face {
	font-family: 'Attorney';
	src: url(/css/fonts/Attorney-Variable-Roman-subset.woff2)
}
@font-face {
	font-family: 'Bajazzo';
	src: url(/css/fonts/Bajazzo.subset.woff2)
}
@font-face {
	font-family: 'BajazzoRounded';
	src: url(/css/fonts/BajazzoRounded.subset.woff2)
}
@font-face {
	font-family: 'Bussi';
	src: url(/css/fonts/Bussi-Regular.subset.woff2)
}
@font-face {
	font-family: 'CaroleSerif';
	src: url(/css/fonts/Carole-Serif-Variable-Italic-subset.woff2);
}
@font-face {
	font-family: 'CaroleSans';
	src: url(/css/fonts/Carole-Sans-Variable-Roman-subset.woff2);
}
@font-face {
	font-family: 'Galata';
	src: url(/css/fonts/Galata-Bold-subset.woff);
}
@font-face {
	font-family: 'Gallensis';
	src: url(/css/fonts/Gallensis.subset.woff2);
}
@font-face {
	font-family: 'Grimmig';
	src: url(/css/fonts/Grimmig.subset.woff2);
}
@font-face {
	font-family: 'June';
	src: url(/css/fonts/June-Pro-Variable-subset.woff2);
}
@font-face {
	font-family: 'Lawabo';
	src: url(/css/fonts/Lawabo-Bold-subset.woff);
}
@font-face {
	font-family: 'Margit';
	src: url(/css/fonts/Margit.subset.woff2);
}
@font-face {
	font-family: 'Modal';
	src: url(/css/fonts/Modal.subset.woff2);
}
@font-face {
	font-family: 'ModalStencil';
	src: url(/css/fonts/Modal-Stencil.subset.woff2);
}
@font-face {
	font-family: 'NeonLove';
	src: url(/css/fonts/NeonLove-Cutout.subset.woff2);
}
@font-face {
	font-family: 'Ordina';
	src: url(/css/fonts/Ordina.subset.woff2);
}
@font-face {
	font-family: 'Plantago';
	src: url(/css/fonts/PlantagoVF-subset.woff2);
}
@font-face {
	font-family: 'Poly';
	src: url(/css/fonts/Poly-Bold.subset.woff2);
}
@font-face {
	font-family: 'Salom';
	src: url(/css/fonts/Salom-Bold.subset.woff2);
}
@font-face {
	font-family: 'SalomSans';
	src: url(/css/fonts/Salom-Sans-Variable-Roman-subset.woff2);
}
@font-face {
	font-family: 'strokeWeight';
	src: url(/css/fonts/strokeWeight.woff);
}
@font-face {
	font-family: 'Traction';
	src: url(/css/fonts/Traction-Variable-Roman-sunset.woff2);
}
@font-face {
	font-family: 'Schriftlabor-Corrections';
	src: url(/css/fonts/Schriftlabor-Corrections.woff);
}
@font-face {
	font-family: 'Schriftlabor-Letters';
	src: url(/css/fonts/Schriftlabor-Letters.woff);
}

::selection {
	background: #2E89C5;
	color: white;
}


/* Page structure */

/* Hide scrollbar for Chrome, Safari and Opera */

.example::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}


/* email */

a.email::after {
	content: attr(data-domain);
}

a.email::before {
	content: attr(data-user);
}




/* SCHRIFTLABOR LOGO */

.SCHRIFTLABOR {
	font-family: 'Schriftlabor-Letters';
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	z-index: -1;
}

.SCHRIFTLABORcorrections {
	font-family: 'Schriftlabor-Corrections';
	color: #FA7A7B;
	vertical-align: middle;
	position: relative;
	z-index: 0;
	opacity: 100%;
}

.SCHRIFTLABOR, .SCHRIFTLABORcorrections {
	font-size: 50pt;
	line-height: 40pt;
	margin: auto 0.5rem;
}

a:hover .SCHRIFTLABORcorrections {
	color: #2E89C5;
	transition: .3s ease-out;
}


/* HEADER */

.header {
	background-color: #fff;
	background-color: white;
	border-bottom: 1px solid black;
	display: block;
	font-size: 1.0em;
	position: fixed;
	text-decoration: none;
	width: 100%;
	z-index: 10;
	position: sticky;
	top: 0;
}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background-color: #fff;
}

.menu {
	clear: both;
	display: block;
	font-size: 1.0em;
	max-height: 0;
	text-decoration: none;
	padding: 70px;
}

.header .menu a:hover,
.header .menu-btn:hover {
	color:  #FA7A7B;
}

.menu div {
	background-color: white;
	font-size: calc(14px + 1.5vw);
	color: black;
	text-align: center;
}

.menu-button {
	padding: 20px 20px 20px 20px;
}

.menu-button2 {
	padding: 60px 20px 60px 20px;
}

.menu-button:hover, .menu-button2 {
	background-color: #FA7A7B;
}

.digitalpunchcutting {
	border-bottom: 1px solid black;
}

.custom {
	border-bottom: 1px solid black;
}

.index {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

/* menu icon */

.header .menu-icon {
	cursor: pointer;
	float: right;
	padding: 28px 20px;
	position: relative;
	user-select: none;
}

.menu-icon .nav-icon {
	background: black;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 28px;
}

.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
	background: black;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.header .menu-icon .nav-icon:before {
	top: 8px;
}

.header .menu-icon .nav-icon:after {
	top: -8px;
}

/* menu btn */

.header .menu-btn {
	display: none;
}

.header .menu-btn:checked ~ .menu {
	max-height: 100vh;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon {
	background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
	transform: rotate(-45deg);
	top: 0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
	transform: rotate(45deg);
	top: 0;
}




/* CONTENT */

.container {
	position: relative;
	clear: both;
}

* {
	box-sizing: border-box;
}




/* Footer */

footer {
	display: flex;
	text-decoration: none;
	justify-content: space-between;
	padding: 15px;
	border-top: 1px solid black;
	z-index: 5;
	background-color: white;
	font: 9pt/15pt strokeWeight;
	font-variation-settings: "wght" 100, "slnt" 0;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto!important;
}

.mail-link {
	display: none;
	transition: 0.2s;
}

.mail-link:hover {
	color: #FA7A7B;
}

.maillink-section {
	transition: 0.2s;
	color: black;
}

.maillink-section:hover {
	font-variation-settings: "wght" 120, "slnt" -12;
	color: black;
	transition: 0.2s ease-out;
}

body {
	font: 12pt/16pt strokeWeight;
	font-variation-settings: "wght" 100, "slnt" 0;
	color: black;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-font-kerning: normal;
	font-kerning: normal;
	font-feature-settings: "kern","liga","clig","calt";
	margin: 0px auto 0px auto;
	background-color: #ffffff;
}

a {
	color: inherit;
	text-decoration: none;
	transition: inherit;
}

p {
	width: 95%;
	margin: 1em auto;
	list-style: none;
}


/* Section styles */

a.links {
	transition: 0.3s;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

a.links:hover {
	color: #FA7A7B;
	font-variation-settings: "wght" 120, "slnt" -12;
}

a.links-text {
	transition: 0.3s;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a.links-text:hover {
	font-variation-settings: "wght" 180, "slnt" 0;
}

/*
FONT BOXES
CONTENT
*/


/*
FONT BOXES
INDIVIDUAL FONT FAMILIES
*/

.font-info {
	font: 9pt/15pt strokeWeight;
	font-variation-settings: "wght" 100, "slnt" 0;
	grid-template-columns: repeat(3, 1fr);
	display: grid;
	justify-content: space-between;
	padding-left: 10px;
	position: relative;
	color: black;
	background-color: rgb(255,255,255, 0.45);
	z-index: 7;
}

.font-info div {
	border-left: 1px solid black;
	padding-left: 10px;
}
.font-info .font-caption-name {
	border-left: none;
}
.font-caption-styles {
	grid-column: 2 / span 1;
	display: none;
}
.font-caption-shops {
	grid-column: 2 / span 3;
}
.font-caption-shops a {
	text-decoration: underline;
}
.font-caption-shops a:hover {
	font-variation-settings: "wght" 180, "slnt" 0;
	transition: 0.2s;
}
.font-caption-year {
	grid-column: 2 / span 1;
	display: none;
}
.fontname {
	box-sizing: content-box;
	font-size: 70%;
	color: black;
	padding-top: 3rem;
	padding-bottom: 2rem;
}


.ammer {
	background-color: #fecd5f;
}

.attorney {
	background-color: #8ca2b3;
}
.bajazzo {
	background-color: #f3765d;
}
.bajazzorounded {
	background-color: #24bd7a;
}
.bussi {
	background-color: #FFA2BC;
}
.carole {
	background-color: #9380FF; /*763aff*/
}
.carolesans {
	background-color: #E7A23C;
}
.galata {
	background-color: #FFB55E;
}
.gallensis {
	background-color: #D96436;
}
.grimmig {
	background-color: #7a9b9c;
}
.junepro {
	background-color: #82D755;
}
.lawabo {
	background-color: #60d1ff;
}
.margit {
	background-color: #BBA3FF;
	font-variation-settings: "wght" 400, "ital" 0;
}
.modal {
	background-color: #FF9F72;
	font-variation-settings: "wght" 400, "ital" 0;
}
.modal-stencil {
	background-color: #A5FFAC;
}
.neonlove {
	background-color: #EE8CC6;
}
.ordina {
	background-color: #ffd76d;
}
.plantago {
	background-color: #9abd80;
}
.poly {
	background-color: #c58fff;
}
.salom {
	background-color: #f3a7c1;
}
.salomsans {
	background-color: #BFBFBF;
}
.strokeweight {
	background-color: #73ebd9;
}
.traction {
	background-color: #fa896f;
}

.font-display {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	text-align: center;
	border-bottom: 1px solid black;

	  min-height: 16rem;
}

.font-display-bottombox {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	text-align: center;
	border-bottom: none;
}

.ammer .font-display {
	padding: 20px 0 20px 0;	
	font: 10rem/8rem Ammer;
}
.attorney .font-display {
	padding: 30px 0 60px 0px;
	font: 4rem/4rem Attorney;
}
.bajazzo .font-display {
	padding: 30px 0 60px 0px;
	font: 6rem/5rem Bajazzo;
}
.bajazzorounded .font-display {
	/*padding: 30px 0 60px 0px;
	font: 2rem/2rem BajazzoRounded; here the right one */
	padding: 30px 0 60px 0px;
	font: 5.1rem/3rem BajazzoRounded;
}
.bussi .font-display {
	padding: 30px 0 25px 0px;
	font: 8rem/8rem Bussi;
}
.carole .font-display {
	padding: 45px 0 65px 0px;
	font: 5rem/3.5rem CaroleSerif;
}
.carolesans .font-display {
	padding: 45px 0 65px 0px;
	font: 6rem/3.5rem CaroleSans;
}
.galata .font-display {
	padding: 20px 0 30px 0px;
	font: 7rem/7rem Galata;
}
.gallensis .font-display {
	padding: 25px 0 45px 0px;
	font: 6rem/7rem Gallensis;
}
.grimmig .font-display {
	padding: 30px 0 50px 0px;
	font: 6rem/6rem Grimmig;
}
.junepro .font-display {
	padding: 30px 0 55px 0px;
	font: 5rem/5rem June;
}
.lawabo .font-display {
	padding: 45px 0 50px 0px;
	font: 7rem/7rem Lawabo;
}
.margit .font-display {
	padding: 20px 0 60px 0px;
	font: 8rem/8rem Margit;
}
.modal .font-display {
	padding: 40px 0 40px 0px;
	font: 6.5rem/6rem Modal;
}
.modal-stencil .font-display {
	padding: 60px 0 60px 0px;
	font: 5rem/3.1rem ModalStencil;
}
.neonlove .font-display {
	padding: 20px 0 100px 0px;
	font: 10rem/5rem NeonLove;
}
.ordina .font-display {
	padding: 50px 0 85px 0px;
	font: 5rem/4rem Ordina;
	font-variation-settings: "wdth" 50, "wght" 100, "ital" 0;
}
.plantago .font-display {
	padding: 40px 0 60px 0;
	font: 6rem/6rem Plantago;
}
.poly .font-display {
	padding: 45px 0 70px 0;
	font: 7rem/5rem Poly;
}
.salom .font-display {
	padding: 40px 0 65px 0;
	font: 6rem/6rem Salom;
}
.salomsans .font-display {
	padding: 65px 0 95px 0;
	font: 4.5rem/3rem SalomSans;
}
.strokeweight .font-display {
	padding: 60px 0px 85px 0px;
	font: 4rem/5rem strokeWeight;
}
.traction .font-display-bottombox {
	padding: 40px 0 90px 0px;
	font: 5rem/5rem Traction;
}

/*
BROWSER WINDOW WIDTHS
*/

/* LIQUID 2 COLUMNS */
@media (min-width: 400px) {
	.ammer .font-display {
		font-size: calc(7rem + 20vw);
	}
	.attorney .font-display {
		font-size: calc(1rem + 20vw);
	}
	.bajazzo .font-display {
		font-size: calc(3rem + 20vw);
	}
	.bajazzorounded .font-display {
		font-size: calc(5.1rem + 4vw);
		line-height: 5rem; /* 7/11 of fontsize */
		/*font-size: calc(3.5rem + 15vw);
		line-height: calc(1.5rem + 10vw);*/
	}
	.bussi .font-display {
		font-size: calc(4.5rem + 20vw);
	}
	.carole .font-display {
		font-size: calc(1.0rem + 18vw);
	}
	.carolesans .font-display {
		font-size: calc(1.1rem + 20vw);
	}
	.galata .font-display {
		font-size: calc(3rem + 20vw);
	}
	.gallensis .font-display {
		font-size: calc(5rem + 6vw);
	}
	.grimmig .font-display {
		font-size: calc(1.1rem + 20vw);
	}
	.junepro .font-display {
		font-size: calc(1.1rem + 20vw);
	}
	.lawabo .font-display {
		font-size: calc(3rem + 20vw);
	}
	.margit .font-display {
		font-size: calc(4rem + 20vw);
	}
	.modal .font-display {
		font-size: calc(3rem + 14vw);
	}
	.modal-stencil .font-display {
		font-size: calc(1.6rem + 14vw);
	}
	.neonlove .font-display {
		font-size: calc(10rem + 12vw);
	}
	.ordina .font-display {
		font-size: calc(2rem + 20vw);
	}
	.plantago .font-display {
		font-size: calc(2rem + 20vw);
	}
	.poly .font-display {
		font-size: calc(2rem + 17vw);
	}
	.salom .font-display {
		font-size: calc(1.7rem + 17vw);
	}
	.salomsans .font-display {
		font-size: calc(1.5rem + 17vw);
	}
	.strokeweight .font-display {
		font-size: calc(2rem + 11vw);
	}
	.traction .font-display-bottombox {
		font-size: calc(1.5rem + 15vw);
	}
	footer {
		font-size: 12pt/15pt;
		padding: 30px;
	}
}

/* 3 COLUMNS */
@media (min-width: 760px) {

	.font-caption-styles {
		grid-column: 2 / span 1;
		display: block;
	}
	.font-caption-shops {
		grid-column: 3 / span 3;
	}
	.font-info {
		grid-template-columns: 0.7fr 1fr 1.3fr;
	}

	.ammer .font-display {
		padding: 70px 0 70px 25px;
		font-size: 18rem;
		line-height: 2.4rem;
	}
	.attorney .font-display {
		padding: 60px 0 95px 0px;
		font-size: 10rem;
		line-height: 2rem;
	}
	.bajazzo .font-display {
		padding: 65px 0 110px 0px;
		font-size: 11rem;
		line-height: 2rem;
	}
	.bajazzorounded .font-display {
		padding: 65px 0 110px 0px;
		font-size: calc(5.1rem + 4vw);
		line-height: 2rem; /* 7/11 of fontsize */
	}
	.bussi .font-display {
		padding: 75px 0 75px 0px;
		font-size: 14rem;
		line-height: 2rem;
	}
	.carole .font-display {
		padding: 45px 0 90px 0px;
		font-size: 10.6rem;
		line-height: 2.6rem;
	}
	.carolesans .font-display {
		padding: 45px 0 90px 0px;
		font-size: 11rem;
		line-height: 2.6rem;
	}
	.galata .font-display {
		padding: 15px 0 45px 0px;
		font-size: 11rem;
		line-height: 8rem;
	}
	.gallensis .font-display {
		padding: 15px 0 45px 0px;
		font-size: 10.5rem;
		line-height: 8rem;
	}
	.grimmig .font-display {
		padding: 45px 0 90px 0px;
		font-size: 11rem;
		line-height: 2.4rem;
	}
	.junepro .font-display {
		padding: 55px 0 85px 0px;
		font-size: 10rem;
		line-height: 2.1rem;
	}
	.lawabo .font-display {
		padding: 55px 0 90px 0px;
		font-size: 12rem;
		line-height: 2rem;
	}
	.margit .font-display {
		padding: 0px 0 30px 0px;
		font-size: 10rem;
		line-height: 9rem;
	}
	.modal .font-display {
		padding: 19px 0 24px 0px;
		font-size: 9rem;
		line-height: 9rem;
	}
	.modal-stencil .font-display {
		padding: 19px 0 24px 0px;
		font-size: 9rem;
		line-height: 9rem;
	}
	.neonlove .font-display {
		padding: 45px 0 145px 0px;
		font-size: 18rem;
		line-height: 3rem;
	}
	.ordina .font-display {
		padding: 60px 0 115px 0px;
		font-size: 10rem;
		line-height: 2rem;
	}
	.plantago .font-display {
		padding: 60px 0 90px 0px;
		font-size: 12rem;
		line-height: 2rem;
	}
	.poly .font-display {
		padding: 0 0 35px 0;
		font-size: 11rem;
		line-height: 9rem;
	}
	.salom .font-display {
		padding: 60px 0 85px 0px;
		font-size: 10.7rem;
		line-height: 2rem;
	}
	.salomsans .font-display {
		padding: 60px 0 85px 0px;
		font-size: 9.7rem;
		line-height: 2rem;
	}
	.strokeweight .font-display {
		padding: 5px 0px 50px 0px;
		font-size: 8rem;
		line-height: 8rem;
	}
	.traction .font-display-bottombox {
		padding: 50px 0 90px 0px;
		font-size: 9rem;
		line-height: 2rem;
	}

	.fontname {
		box-sizing: content-box;
		font-size: 80%;
	}
	.menu-button {
		padding: 0px 0px 0px 20px;
	}
	.menu-button:hover {
		background-color: white;
		color: #FA7A7B;
	}
	.header {
		padding-bottom: 0.5rem;
	}
	.header li {
		float: left;
	}
	.header .menu {
		clear: none;
		float: right;
		max-height: none;
		display: flex;
		padding: 20px;
	}
	.header .menu-icon {
		display: none;
	}
	.menu div {
		background-color: white;
		font-size: 1.0em;
		color: black;
		text-align: center;
	}
	.index, .custom, .digitalpunchcutting {
		border-top: none;
		border-bottom: none;
	}
	.mail-link {
		display: block;
	}
}

/* 4 COLUMNS */
@media (min-width: 1100px) {
	.font-caption-styles {
		grid-column: 2 / span 1;
		display: block;
	}

	.font-caption-shops {
		grid-column: 3 / span 1;
	}

	.font-caption-year {
		grid-column: 4 / span 1;
		display: block;
	}

	.font-info {
		grid-template-columns: 0.7fr 0.9fr 2fr 0.4fr;
	}
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
		.menu div:hover {
			background-color: #FA7A7B;
		}
		
		body, footer, .header, .menu div:hover, .menu-button:hover, .header ul, .menu div {
			background-color: black;
		}

		body, .fontname, .font-info, a, a.links-text, a.links-text:hover, .menu div {
			color: white;
		}

		body {
			opacity: 95%;
		}

		.header .menu-icon .nav-icon,
		.header .menu-icon .nav-icon:before,
		.header .menu-icon .nav-icon:after {
			background: white;
		}

		footer {
			border-top: 1px solid white;
		}

		.custom,
		.index,
		.digitalpunchcutting,
		.font-display,
		.font-info div,
		.header {
			border-color: white;
		}

		.font-info {
			background-color: rgb(0,0,0, 0.3);
		}

		.ammer {
			background-color: #8F6F28;
		}
		.attorney {
			background-color: #4A5964;
		}
		.bajazzo {
			background-color: #903C2D;
		}
		.bajazzorounded {
			background-color: #207246;
		}
		.bussi {
			background-color: #963442;
		}
		.carole {
			background-color: #4A3E94;
		}
		.carolesans {
			background-color: #865718;
		}
		.galata {
			background-color: #90612A;
		}
		.gallensis {
		  background-color: #84361A;
		}
		.grimmig {
			background-color: #435959;
		}
		.junepro {
			background-color: #294D18;
		}
		.lawabo {
			background-color: #297293;
		}
		.margit {
			background-color: #635392;
		}
		.modal {
			background-color: #945235;
		}
		.modal-stencil {
			background-color: #5C9254;
		}
		.neonlove {
			background-color: #624068;
		}
		.neonlove .fontname {
			text-shadow:
				0 0 7px #fff,
				0 0 21px #fff,
				0 0 82px #f05,
				0 0 102px #f05,
				0 0 151px #f05;
		}
		.ordina {
			background-color: #907631;
		}
		.plantago {
			background-color: #546B43;
		}
		.poly {
			background-color: #694692;
		}
		.salom {
			background-color: #885465;
		}
		.salomsans {
			background-color: #656565;
		}
		.strokeweight {
			background-color: #358477;
		}
		.traction {
			background-color: #904635;
		}
	
}