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

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


/* Page structure */

/* Hide scrollbar globally */

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

html {
	-ms-overflow-style: none;
	scrollbar-width: none;
}


/* email */

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

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




/* SCHRIFTLABOR LOGO */

a.logo {
	padding-left: 4vw;
}

.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: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	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: transparent;
}

.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;
	background-color: transparent;
}

.menu div {
	background-color: transparent;
	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 {
	background-color: transparent;
	/*color: #FA7A7B;	*/
}

.menu-button2 {
	background-color: #FA7A7B;
	color: white;
}


/* menu icon */

.header .menu-icon {
	cursor: pointer;
	float: right;
	padding: 28px 4vw;
	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;
	align-items: center;
	position: relative;
	padding: 15px 4vw;
	z-index: 5;
	background-color: white;
	font: 9pt/15pt strokeWeight;
	font-variation-settings: "wght" 100, "slnt" 0;
}

.footer-eula {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

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

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

@media (max-width: 899px) {
	.footer-gmbh {
		display: none;
	}
}

.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 {
	transition: background-color 0.3s ease;
	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: 10.8pt/18pt strokeWeight;
	font-variation-settings: "wght" 100, "slnt" 0;
	display: flex;
	align-items: baseline;
	gap: 0 2em;
	padding: 0 10px;
	position: relative;
	color: black;
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 7;
}

.font-info div {
	padding-left: 0;
}
.font-caption-name {
	order: 1;
}
.font-caption-year {
	order: 2;
}
.font-caption-styles {
	order: 3;
}
.font-caption-shops {
	order: 4;
	margin-left: auto;
}
.font-caption-shops a {
	text-decoration: underline;
}
.font-caption-shops a:hover {
	color: #FA7A7B;
	transition: 0.2s;
}

@media (hover: hover) {
	.font-info {
		display: none;
	}

	/* Uniform height + optical centering for all font displays */
	.font-display,
	.font-display-bottombox {
		height: 16rem;
		min-height: unset;
		padding: 0 !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	/* Hover: instant bg + text colour change on the section div itself,
	   1s ease transition back on mouse-out.
	   overflow: hidden clips font overflow between sections so pointer
	   events don't bleed into adjacent hover areas. */
	.container > div {
		overflow: hidden;
		transition: filter 1s ease;
		will-change: filter;
	}

	.container > div:hover {
		filter: brightness(0.85);
		transition: none;
	}

	.fontname {
		padding-top: 0;
		padding-bottom: 0;
		line-height: 0.75;
		color: inherit;
	}

	/* Global north offset: 5% of 20rem container = 1rem */
	.font-display > a,
	.font-display-bottombox > a {
		margin-top: var(--fontname-offset, -1rem);
	}

	/* Per-font optical adjustments — tune these individually */
	.ammer	{ --fontname-offset: 0.6rem; }
	.grimmig  { --fontname-offset: -1.5rem; }
	.junepro  { --fontname-offset: -0.5rem; }
	.neonlove  { --fontname-offset: -4.8rem; }
	.bussi	  { --fontname-offset: 1.5rem; }
	.modal	  { --fontname-offset: 0.8rem; }
	.modal-stencil { --fontname-offset: 0.8rem; }	
	.ordina    { --fontname-offset: -3rem; }
	.poly      { --fontname-offset: -1.8rem; }
	.salomsans { --fontname-offset: -1.5rem; }
	.strokeweight { --fontname-offset: -2.5rem; }	
	.traction  { --fontname-offset: -2.5rem; }

	/* Shop links pinned to bottom of the box */
	.font-display-links {
		font: 10.8pt/18pt strokeWeight;
		font-variation-settings: "wght" 100, "slnt" 0;
		position: absolute;
		bottom: 1.25rem;
		left: 0;
		right: 0;
		text-align: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.font-display-links a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}

	.font-display-links a:hover {
		color: #FA7A7B;
	}

	.container > div:hover .font-display-links {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (hover: none) {
	.container > div {
		position: relative;
	}
	.font-display-links {
		position: absolute;
		bottom: 1em;
		left: 0;
		right: 0;
		text-align: center;
		opacity: 1;
		pointer-events: auto;
	}
}

.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;
	  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
*/

/* SMALL: buying options only in infobar */
@media (max-width: 599px) {
	.font-caption-name,
	.font-caption-year,
	.font-caption-styles {
		display: none;
	}
	.font-caption-shops {
		margin-left: 0;
	}
}

/* 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 4vw;
	}
}

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

	.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: transparent;
		color: #FA7A7B;
	}
	.mail-link {
		display: block;
	}
}

/* HEADER DESKTOP NAV */
@media (min-width: 900px) {
	.header {
		padding-bottom: 0.5rem;
	}
	.header li {
		float: left;
	}
	.header .menu {
		clear: none;
		float: right;
		max-height: none;
		display: flex;
		padding: 20px 4vw;
	}
	.header .menu-icon {
		display: none;
	}
	.menu div {
		background-color: transparent;
		font-size: 1.0em;
		color: black;
		text-align: center;
	}
	.index, .custom, .digitalpunchcutting {
		border-top: none;
		border-bottom: none;
	}
}

/* 4 COLUMNS */
@media (min-width: 1100px) {
}

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

		.menu div {
			background-color: transparent;
		}

		.header {
			background-color: rgba(0, 0, 0, 0.7);
		}

		.header ul {
			background-color: transparent;
		}

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

		.font-info div {
			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;
		}

}