@font-face { 
	/* koe.berlin/variablefont/ */
	font-family: 'Gingham'; 
	src: url('https://cdn.glitch.com/2e5be060-12b2-4bd2-b2c7-09fce4abe158%2FGingham.woff?1519298603872') format('woff'); 
	font-weight: normal; 
	font-style: normal; 
}
@font-face { 
	/* https://github.com/TypeNetwork/fb-Decovar */
	font-family: 'Decovar'; 
	src: url('https://cdn.glitch.com/2e5be060-12b2-4bd2-b2c7-09fce4abe158%2FDecovarAlpha-VF.ttf?1519298606992'); 
	font-weight: normal; 
	font-style: normal; 
}
@font-face { 
	/* https://github.com/TypeNetwork/Amstelvar */
	font-family: 'AmstelvarAlpha'; 
	src: url('https://cdn.glitch.com/2e5be060-12b2-4bd2-b2c7-09fce4abe158%2FAmstelvarAlpha-VF.ttf?1519298605572'); 
	font-weight: normal; 
	font-style: normal; 
}

:root {
	font-family: system-ui, san-serif;
	line-height: 1.32;
	padding: 0;
	margin: 0;
	/* https://webgradients.com/ */
	background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 	background-blend-mode: screen;
}

h1, h2, h3, p {
	margin: 1px 0;
}

p {
	margin: 0.5em 0;
}

a {
  color: #860000;
}

label {
	font-size: 14px;
	display: block;
}

input {
	display: inline-block;
}

input[type=range] {
	cursor: pointer;
}

input[type=number] {
	max-width: 48px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    padding: 0;
    height: 19px;
		font-weight: bold;
		box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.33);
    border: 0;
}

input[type=range].slider {
	-webkit-appearance: none;
	background-color: transparent;
	width: 100%;
	margin: 5.15px 0;
	z-index: 1;
	position: relative;
  }
  input[type=range].slider:focus {
	outline: none;
  }


/* This is the track */
  input[type=range].slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 12px;
	cursor: pointer;
	box-shadow: 1.8px 1.8px 2px rgba(175, 64, 64, 0.22), 0px 0px 1.8px rgba(189, 75, 75, 0.22);
	background: #dc6262;
	border-radius: 25px;
	border: 3.2px solid #ef9090;
  }

/* this is the thumb */
  input[type=range].slider::-webkit-slider-thumb {
	box-shadow: inset 0px 1px 3px #af4040, 0px 0px 1.1px #bd4b4b;
	border: 1px solid #e20000;
	height: 18px;
	width: 18px;
	border-radius: 50px;
	background: radial-gradient(ellipse at center, #ff0202 0%, #EF9090 30%, #ffffff 40%,#ffffff 100%);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -7.05px;
  }
  input[type=range].slider:focus::-webkit-slider-runnable-track {
	background: #f1c2c2;
  }

  input[type=range].slider::-moz-range-track {
	width: 100%;
	height: 12px;
	cursor: pointer;
	box-shadow: 1.8px 1.8px 2px rgba(175, 64, 64, 0.22), 0px 0px 1.8px rgba(189, 75, 75, 0.22);
	background: #dc6262;
	border-radius: 25px;
	border: 3.2px solid #ef9090;
  }
  input[type=range].slider::-moz-range-thumb {
	box-shadow: inset 0px 1px 3px #af4040, 0px 0px 1.1px #bd4b4b;
	border: 1px solid #e20000;
	height: 18px;
	width: 18px;
	border-radius: 50px;
	background: radial-gradient(ellipse at center, #ff0202 0%, #EF9090 30%, #ffffff 40%,#ffffff 100%);
	cursor: pointer;
  }
  input[type=range].slider::-ms-track {
	width: 100%;
	height: 12px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
  }
  input[type=range].slider::-ms-fill-lower {
	background: #a42525;
	border: 3.9px solid #ef9090;
	border-radius: 50px;
	box-shadow: 1.8px 1.8px 2px rgba(175, 64, 64, 0.22), 0px 0px 1.8px rgba(189, 75, 75, 0.22);
  }
  input[type=range].slider::-ms-fill-upper {
	background: #dc6262;
	border: 3.9px solid #ef9090;
	border-radius: 50px;
	box-shadow: 1.8px 1.8px 2px rgba(175, 64, 64, 0.22), 0px 0px 1.8px rgba(189, 75, 75, 0.22);
  }
  input[type=range].slider::-ms-thumb {
	box-shadow: inset 0px 1px 3px #af4040, 0px 0px 1.1px #bd4b4b;
	border: 1px solid #e20000;
	height: 18px;
	width: 18px;
	border-radius: 50px;
	background: radial-gradient(ellipse at center, #ff0202 0%, #EF9090 30%, #ffffff 40%,#ffffff 100%);
	cursor: pointer;
  }
  input[type=range].slider:focus::-ms-fill-lower {
	background: #dc6262;
  }
  input[type=range].slider:focus::-ms-fill-upper {
	background: #f1c2c2;
  }
  

.form-row {
	position: relative;
	margin: 8px 16px;
}

.clickable {
	cursor: pointer;
	user-select: none;
	margin-bottom: 20px;
	border-radius: 3px;
	background-color: #fff;
	padding: 8px 16px;
}

.clickable p {
	font-size: 1.5em;
	position: relative;
}

.clickable p:before, .clickable p:after  {
	width: auto;
	position: relative;
	font-size: 4rem;
	height: 10px;
	top: 15px;
	line-height: 0;
}
.clickable p:before {
	content: '\201C';
}

.clickable p:after {
	content:'\201D';
}


#grid {
	display: grid;
	grid-template-columns: 214px 3fr;
	grid-column-gap: 10px;
	grid-template-rows: 1fr;
	height: 100%;
	max-width: 960px;
	margin: auto;
}

#rightcol {
	grid-column: 1;
	grid-row: 1;
}

#formcontainer {
	font-family: "Avenir Next";
	position: relative;
	z-index: 1;
	color: #4A4A4A;
	font-weight: 300;	
	background:rgba(255, 255, 255, 0.51);
	padding-bottom: 1px;
}

#formcontainer h2 {
	font-weight: 600;
	font-size: 14px;

	text-transform: uppercase;
	color: #860000;
	background: radial-gradient(100% 100%,#a777778f -3%,#ece2df80 100%);
	padding: 12px;
	overflow: auto;

}

#textcontainer {
	font-size: 1.5em;
	grid-column: 2;
	grid-row: 1;
	overflow: auto;
}

#font-gingham {
	font-family: 'Gingham';
	--wdth: 10;
	--wght: 100;
	font-variation-settings: 'wdth' var(--wdth), 'wght' var(--wght);
}

#font-decorvar {
	font-family: 'Decovar';
	--BLDA: 0;
	--BLDB: 0;
	--WMX2: 0;
	--SKLA: 0;
	--SKLB: 0;
	--SKLD: 0;
	--TRMA: 0;
	--TRMB: 0;
	--TRMC: 0;
	--TRMD: 0;
	--TRME: 0;
	--TRMF: 0;
	--TRMG: 0;
	--TRMK: 0;
	--TRML: 0;
	
	font-variation-settings: 'BLDA' var(--BLDB), 'BLDB' var(--BLDA), 'WMX2' var(--WMX2), 'SKLA' var(--SKLA), 'SKLB' var(--SKLB), 'SKLD' var(--SKLD), 'TRMA' var(--TRMA), 'TRMB' var(--TRMB), 'TRMC' var(--TRMC), 'TRMD' var(--TRMD), 'TRME' var(--TRME), 'TRMF' var(--TRMF), 'TRMG' var(--TRMG), 'TRMK' var(--TRMK), 'TRML' var(--TRML);
}

#font-amstelvar {
	font-family: 'AmstelvarAlpha';
	--wdth: 500;
	--wght: 100;
	--opsz: 19;
	--GRAD: 88;
	font-variation-settings: 'wdth' var(--wdth), 'wght' var(--wght), 'opsz' var(--opsz), 'GRAD' var(--GRAD);
}

.unselected {
	box-shadow: #670000 0 0 0;
	border: 1px solid #fff;
	opacity: 0.5;
}

.selected {
	box-shadow: #670000 1px 1px 9px; 
	border: 1px solid #670000;
	opacity: 1;
}

.disabled {
	display: none;
}
.enabled {
	display: block;
}

#footer {
  display:block;
  background: radial-gradient(100% 100%,#ffffff -3%,#d0c5c1 100%);
  text-align: center;
  padding: 10px; 
}