* { box-sizing: border-box; }
a { text-decoration: none; color: #15c; }
ul { list-style-type: square; }
li { line-height: 22px; margin: 5px 0 0; }
img { max-width: 100% }
h1, h2, h3 { margin: 0 }
hr { border-color: #ccc; }
pre { padding: 10px; border-radius: 3px; background: #def; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }

body { margin: auto; font: 14px/22px arial, helvetica, sans serif; max-width: 1200px; padding: 30px 20px 0; min-width: 490px; background: #444; }
body.large { max-width: 1900px; }
header { text-align: center; }
header .logo { width: 490px; padding: 0 0; overflow: hidden; margin: 0 auto 20px; }
header span { font-size: 10px; display: inline-block; transform: scale(1.5,1); color: #fff; }
header menu { padding: 0; margin: 0 0 25px 0; }
header h2 { font-size: 90px; line-height: 70px; margin: 20px 0 0; transform: perspective(130px)rotateX(-60deg); transform-origin: bottom center; color: #fff; }
header h3 { font-size: 13px; line-height: 20px; margin: 0 0 10px; transform: scale(1,1.5); color: #fff; background: -webkit-linear-gradient(#ddd, #fff); -webkit-background-clip: text; }
header a { background: #d1d2d3; min-width: 100px; height: 30px; line-height: 30px; border-radius: 3px; display: inline-block; margin: 0 3px 5px 0; padding: 0 10px; font-weight: bold; }
header a.home { min-width: 40px }
header a:hover, header a.active { background: #38c; color: #fff }
.wrapper { min-height: calc(100vh - 85px) }

main { padding-left: 250px; }
main.home { padding-left: 0 }
main.techwatch { padding-left: 0 }
main.techwatch li { line-height: 20px; }
main a { font-weight: bold }
/*#menu { margin: 0 auto 30px; columns: 4; vertical-align: top; background: #f3f3f3; border-radius: 5px; padding: 15px 0 15px 30px; }
*/
#menu ul { margin: 0; padding: 0 0 0 20px; }
#menu li { margin: 0; line-height: 21px; font-weight: bold }
#menu .active { color: #000; font-weight: bold }
#menu.techwatch { display: none; }
#menu { z-index: 10; position: sticky; top: 10px; left: 0; float: left; width: 240px; height: 100vh; max-height: calc(100vh - 90px); overflow: auto; background: #ededed; padding: 15px 0 15px 10px; border-radius: 5px; font-size: 13.5px; }
#menusearch { border: 1px solid #aaa; margin: 10px 0 10px 5px; }
.section { padding: 30px 20px; margin: 0 0 20px; max-width: 100%; overflow: hidden; border: 2px solid #ddd; border-radius: 5px; min-height: 90vh; background: #ededed; }
.section#intro { padding-bottom: 10px; }
.section.games a { width: 15%; display: inline-block; vertical-align: top; margin: 1% 1% 1% 0; }
.section.games a img { width: 100%; }
.section iframe { width: 100%; }
.iframe-wrapper { position: relative; width: 100%; height: 0; margin: 0 0 50px; }
.iframe-wrapper iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

footer { text-align: center; margin: 0 0 20px; color: #fff; font-weight: bold; }
footer a { text-decoration: none; color: #5ae;  }
footer .backtotop { position: fixed; right: 0; bottom: 10px; width: 25px; height: 30px; background: #ededed; border: 2px solid #555; border-radius: 5px 0 0 5px; text-align: center; line-height: 26px; font-size: 25px; cursor: pointer; color: #246; }

.utterances { background: #ddd; border-radius: 5px; padding: 0 10px;max-width: 100%; } 
.utterances-frame { left: 5px; min-width: calc(100% - 10px);
max-width: calc(100% - 10px); }

.mobileonly { display: none }

#menu2 ul { margin: 0; }


@media (max-width: 999px){
  #hamburger { position: fixed; left: 0; top: 5px; width: 25px; height: 25px; background: #def; border-radius: 0 5px 5px 0; text-align: center; font-size: 20px; line-height: 25px; cursor: pointer; box-shadow: 0 0 5px #000; }
  #menu { position: fixed; left: -300px; max-height: calc(100% - 10px); top: 5px; border-radius: 0; transition: left .25s; }
  main { padding-left: 0 }
  .mobileonly { display: block }
  #hidemenu { display: none; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background: rgba(0,0,0,.5); cursor: pointer; }
}


/*body.large #hamburger { position: fixed; left: 0; top: 5px; width: 45px; height: 40px; background: #def; border-radius: 0 5px 5px 0; text-align: center; font-size: 30px; line-height: 40px; cursor: pointer }
body.large #menu { position: fixed; left: -1000px; max-height: calc(100% - 10px); top: 5px; border-radius: 0; transition: left .25s; }
body.large main { padding-left: 0 }
body.large .mobileonly { display: block }
body.large br.mobileonly { display: none }
body.large #hidemenu { display: none; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background: rgba(0,0,0,.5); cursor: pointer; }
body.large header a { min-width: 162px; margin: 0 7px 10px 0; }*/


/* PrismJS 1.16.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+css-extras */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre-wrap;
	word-spacing: normal;
	word-break: break-all;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}