@font-face {
    font-family: 'MD IO';
    src: url('../fonts/MDIO0.2-Regular.woff2') format('woff2'),
         url('../fonts/MDIO0.2-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'MD IO';
    src: url('../fonts/MDIO0.2-Bold.woff2') format('woff2'),
         url('../fonts/MDIO0.2-Bold.woff') format('woff');
    font-weight: 700;
}

@font-face {
    font-family: 'Meek Display';
    src:    url('../fonts/Meek_Display_v0.2-Black.woff') format('woff'),
            url('../fonts/Meek_Display_v0.2-Black.woff2') format('woff2'),
            url('../fonts/Meek_Display_v0.2-Black.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Meek Display';
    src:    url('../fonts/Meek_Display_v0.2-Bold.woff') format('woff'),
            url('../fonts/Meek_Display_v0.2-Bold.woff2') format('woff2'),
            url('../fonts/Meek_Display_v0.2-Bold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Meek Display';
    src:    url('../fonts/Meek_Display_v0.2-Medium.woff') format('woff'),
            url('../fonts/Meek_Display_v0.2-Medium.woff2') format('woff2'),
            url('../fonts/Meek_Display_v0.2-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}





* {
	margin:0;
	padding:0;
	line-height: 1.5em;
}

html, body {
	overflow-x: hidden;
	font-family: "MD IO", monospace;
	font-size:16px;
}

#classMark {
	top:1.5em;
	left:1.5em;
}
#pageMark {
	bottom:1.5em;
	left:1.5em;
}
#classMark, #pageMark {
	position: fixed;
	z-index: 1000000;
	font-weight: bold;
	color:white;
	background: rebeccapurple;
	font-size:0.75em;
	padding:0.25em 0.5em;
}


h1 {
	font-family:"Meek Display", Times;
	font-size: 5em;	
	color:rebeccapurple;
	margin-bottom:1.25rem;
}
h2 {
	font-family:"Meek Display", Times;
	font-size: 2.5em;
	margin-bottom:1.25rem;
}
h3 {
	/*font-family:"Meek Display", Times;*/
	font-size: 1.5em;
}
h4 {
	font-size: 1.5em;
	
}

* + h1,
* + h2,
* + h3,
* + h4 {
	margin-top:0.75rem;
}

p, li {
	
}
* + p {
	margin-top:0.75em;
}
* + li {
	margin-top:0.75em;
}

h3 + ul,
h4 + ul {
	margin-top:1.5em !important;
}

ul, ol {
    margin: 0.75em 0 0 1.75em;
	padding:0;
}
ol {
	list-style-position: outside;
	
}
li {
	
}


a {
	text-decoration: underline;
	font-weight: 700;
	color:rebeccapurple;
}
a:hover {
	color:#aaa;
}


pre {
	font-size:1.3em;
	text-align:left; display: inline-block; margin:0 auto; tab-size: 4;
}


.card {
	width:100vw;
	height:100vh;
	
	overflow: hidden;
	position: relative;
}
.title {
	background: black;
}
.card.center {
	display: grid;
	justify-items:center;
	align-items: center;
}

.tiles {
	display: grid;
	margin: 0 auto;
	width:80vw !important;
	grid-template-columns: repeat(auto-fit, calc(20vw - 3em));
	grid-auto-rows: max-content;
	/*grid-auto-flow: dense;*/
	grid-row-gap: 3em;
	grid-column-gap: 3em;
	text-align: left;
}
.markdown-container {
	width:80vw;
	max-width:700px;
	text-align:left;
}
	.markdown-container * {
		max-width: 100%;
		white-space: unset;
	}

.center {
	align-content: center;
    justify-content: center;
    text-align: center;
    width:100vw;
}

.black {
	background:rebeccapurple;
}
.black *, .black a {
	color:white;
}

.center>img{
	display: block;
}

figure div {
	max-width: 50vw;
	font-size:1.3em;
	text-align: left;
}
figcaption, .attribution {
	font-size:1em;
	margin-top: 1.25em;
	font-weight: 100;
}
.left {
	text-align: left;
}
.fill.center>img{
	width:100vw;
	height:100vh;
	object-fit: cover;
}
.window {
	box-shadow: 0 10px 25px #ccc;
}

.box ul {
	list-style: none;
	margin:0;
}
.tiles .box {
	height:100%;
	width:100%;
	text-align: left;
}
.tiles a {
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}





.small {
	font-size:0.5em;
}
.big {
	font-size:1.5em;
}
.hide {
	opacity: 0 !important;
	pointer-events: none;
}


.annotation {
	position: relative;
	display: inline-block;
	width:0;
	height:0;
	overflow:visible;
	font-size:.75em;
	transform:translate(-50%,0)
}

.annotation.up {
	top:-2em;
	color: cyan;
	filter: brightness(0.8);
}

.annotation.down {
	top:1.7em;
	color: hotpink;
}



.hljs-name, .hljs-params {
	color: darkslateblue;
}
.hljs-selector-tag, .hljs-title {
    color: deeppink;
}
.hljs-selector-id, .hljs-attr, .hljs-string {
    color: darkviolet;
}
.hljs-selector-class {
	color: chocolate;
}
.hljs-attribute {
	color: coral;
}
.hljs-built_in,.hljs-keyword {
	color: cornflowerblue;
}
.hljs-number {
	color: burlywood;
}
.hljs-comment {
	color:#999;
}

#loupe {
  position:absolute;
  height:300px;
  width:400px;
  display:none;
  background:url(https://cdn.glitch.com/25fbbe9d-a592-4d68-be08-579009dbd188%2FIMG_4727.jpg?v=1573779341842);
  pointer-events:none;
  cursor: none;
}
.hoverable.active {
	cursor: none;
}

#loupe.active {
  display:block;
}


@media print {
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
   @page {
      margin: 0;
      size: 144cm 90cm landscape;
   }
   .card {
	   	page-break-before: always;
   }
}