body {
	display:flex;
	height:calc(100vh - 37px);
	overflow:hidden;
	padding:0;
	margin:0;
	line-height:1;
}

notebook {
	flex:1;
	border-right:1px solid black;
}

css {
	flex:2;
	border-right:1px solid black;
}

coda {
	flex:4;
	border-right:1px solid black;
	background:yellow;
}

iframe {
	height:calc(100vh - 37px);
	overflow:scroll;
	width:100%;
	border:0;
}

zer0 {
	position:fixed;
	top:5px;
	left:5px;
	z-index:10;
	height: calc(100vh - 52px);
	width: calc(100vw - 12px);
	background-color: none;
	border:2px solid blue;
	border-radius: 50%;
	display: inline-block;
	pointer-events: none;
	filter:blur(2px)
}

zo0o0o0o0m {
	background:black;
	color:white;
	display:flex;
	flex:4;
	flex-direction:column;
	height:calc(100vh - 37px);
	overflow:scroll;
}

an-announcement, an-invitation {
	display:none;
}


quote {
	font-size:2.2vw;
}

stack img {
	width:100%;
}

grant {
	display:flex;
	flex-direction:column;
	margin-bottom:20px;
}

grant img {
	width:50%;
	max-width:300px;
}

sadieplant {
	position:fixed;
	bottom:0;
	height:37px;
	overflow:hidden;
	white-space: nowrap;
	font-size:2rem;
	color:blue;
	background-color: rgb(225, 225, 225);
	border-top: 1px solid black;
	font-family: Arial, Helvetica, sans-serif;
	width:100%;
	animation: marquee 100s linear infinite;
	text-shadow: 0 0 1px blue;
}

d0cumentation {
	position: fixed;
	z-index:7;
	left:50px;
	bottom:100px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.7rem;
	height:auto;
	width:auto;
	display: flex;
	background:blue;
	color:white;
	font-weight: bold;
	border:0.1px solid black;
}

d0cumentation-header {
	position: absolute;
	top:0;
	padding-top:3px;
	padding-bottom:3px;
	width:100%;
	left:0;
	background:blue;
	border-bottom:1px solid black;
}

d0cumentation-header span {
	padding-top:3px;
	padding-left:5px;
}

d0cumentation-cl0se {
	position: absolute;
	top:3px;
	cursor:pointer;
	padding-right:5px;
	right:0;
} 

d0cumentation-vide0 img {
	max-width:90vw;
	max-height:73vh;
}


d0cumentation-vide0 a {
	display:flex;
}

play {
	color:blue;
	filter:blur(3px);
	font-size: 160px;
	position: absolute;
	font-weight: normal;
	letter-spacing: 3px;
	right:0;
	left:0;
	text-align: center;
	vertical-align: middle;
	align-self: center;
	justify-self:center;
	width:200px;
	margin:auto;
	display:flex;
	opacity:0.8;
}

.t00ltip {
	position: absolute;
	display: block;
	z-index: 2000;
	pointer-events: none;
	mix-blend-mode: difference;
	color:white;
	letter-spacing: 0.1px;
}

@keyframes marquee {
    0%   { text-indent: 100vw }
    100% { text-indent: -16000px }
}

::-moz-selection { 
    background: white;
    color: black;
}

::selection { 
    background: white;
    color: black;
}


@media only screen and (max-width: 1200px) {

	notebook {
		display:none
	}

	css {
		display:none
	}

	iframe {
		transform: scale(0.85);
		transform-origin: top left;
		width:118%;
	}

	gathering {
		width:48vw;
	}

	quote {
		font-size:3vw;
	}
}

@media only screen and (max-width: 700px) {

	body {
		flex-direction: column;
		height:100vh;
		overflow-y:scroll;
		font-size: 1rem;
		overflow-x:hidden;
	}

	gathering {
		width:96vw;
	}

	iframe {
		padding-top:0;
		width:120%;
		height:120vh;
	}
	
	zo0o0o0o0m {
		height:unset;
		overflow:visible
	}

	quote {
		font-size:6vw;
	}

	d0cumentation {
		top: 48%;
		left: 50%;
		bottom:unset;
		transform:translateX(-50%) translateY(-52%)
	}
}