@font-face { font-family: "AvenirNext-regular"; src: url('AvenirNext-regular.ttf') format('truetype'); }
@font-face { font-family: "AvenirNext-demi"; src: url('AvenirNext-demi.ttf') format('truetype'); }
body {
	font-family: "AvenirNext-regular", sans-serif;
	font-size:   0.8rem;
	margin: 0em; 
}
.grid { display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2.5rem 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px; 
}
@media (min-width: 1600px) {
	.grid { display: grid;
		grid-template-columns: 1fr 1fr 3fr;
	}
}
.gridLive { display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2.5rem 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px; 
}
.col  { display: flex;
	flex-flow: column;
	align-items: center;
}
@media (max-width: 490px) {
    .col  { width: 100vw;
	    align-items: inherit;
    }
    html { scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding: 0; }
    .box { scroll-snap-align: start; scroll-margin: 0; }
}
.box  {
	display: inline-block;
	margin-top: 1em;
	margin-bottom: 2em;
	height: fit-content;
	padding: 1.5em;
	border-radius: 0.75em;
	background: #eee;
	margin-right: 2em;
}
.box h2 {
	color: #333;
	margin-top:   -0.7rem;
	margin-bottom: 0.2rem;
}
h1,h2,h3 { font-family: "AvenirNext-demi"; font-weight: 400; }
h1 { background: #eee;
    margin: 0.0em; 
    padding: 0.2em;
    text-align: center;
    height: 24pt; 
}
.grid h1 { width: 100%; }
.sub  h1 { background: #eee; }
h3 { margin: 0em; }
th       { font-family: "AvenirNext-regular"; font-weight: 600; }
th       { text-align: right; height: 2em; }
th.left  { text-align: left; }
th h3 { text-align: center; margin: 0em; }
table,tr,th,td { border: 1px solid black; border-collapse: collapse; }
th,td { padding: 0.0em 0.5em; }
input:read-only { background: #eee; }
input      { width: 7em; }
input.wide { width: 12em; }
input.em8  { width: 8em; }
span.unit1 { margin-left:-1.8rem; width: 1em; }
span.unit2 { margin-left:-3.0rem; width: 1em; }
span.unitOut { margin-left:0.5rem; width: 1em; }
canvas { display: block; }
.init-hide { display: none; }
ul { list-style-type: none; padding: 0px; }
ul.pointer { cursor: pointer; }
#preview-json code { white-space: pre-wrap; tab-size: 1rem; }
#preview-timing td { text-align: right; }
code .jsonkey { color: #000080; }
code .jsonstr { color: #008000; }
code .jsonnum { color: #800000; }
p.vspacing1  { font-size: 1rem; margin: 0px; }
.drueber     { z-index: 1; }
.menu        { cursor: pointer; }
.menu-links  { float: left; }
.menu-rechts { float: right; margin-right: 1em; }
.vonlinks    { position: absolute; left:  0px; background: white; width: 24em; max-width: 70vw; border-right: 1px solid black; }
.vonrechts   { position: absolute; right: 0px; background: white; width: 100%; max-width: 70vw; border-left:   1px solid black; }
.blur        { filter: blur(0.2em) brightness(1.05); }
#archive ul            { list-style-type: "▶ ";   padding-left: 2rem; line-height: 2rem; }
#archive .l1           { cursor: pointer; }
#archive .l1.closed    { list-style-type: "▷ "; }
#archive .l1.closed ul { display: none; }
#archive .l2.closed    { list-style-type: "▷ "; }
#archive .l2.closed ul { display: none; }
#archive .l3.closed    { list-style-type: "▷ "; }
#archive .l3.finger    { list-style-type: "👉 "; }
#archive .l3.open      { list-style-type: "📄 "; }

#pattern           { width: 100vw; text-align: center; }
#pattern label     { font-size: 1.5rem; margin-right: 1rem; }
#pattern output    { font-size: 1.5rem; }
#pattern .done     { color: #009900; }
#pattern .todo     { color: #cccccc; }
#pattern .current  { color: #009900; font-weight: bold; }
#pattern .current  { animation: blinker 2s linear infinite; }
@keyframes blinker { 50% { color: #cccccc; } }
body.finished      { background: rgba(0,153,0,0.3); }
/*
body.finished      { animation: gruen 2s linear infinite; }
@keyframes gruen   { 50% { background: rgba(0,153,0,1.0); } }
*/