*, *::before, *::after {
	box-sizing: border-box;
}

@media screen and (max-width: 800px) {
	body.default {
		font-size: .8em;
	}
	body.default.terminal {
		font-size: .65em;
	}
}

body.default {
	height: 100%;
	margin: 0;
	background: #111;
	color: #eee;
	font-family: 'Roboto Condensed', 'Helvetica Neu Condensed', 'Arial Nova Condensed', sans-serif;
	font-weight: 300;
}

	body.default ::selection {
		background: #444;
	}

	body.default.light {
		background: #eee;
		color: #111;
	}

		body.default.light ::selection {
			background: #ccc;
		}

	body.default.terminal {
		background: #000;
		color: #0a0;
		font-family: 'Noto Sans Mono', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	}

		body.default.terminal ::selection {
			background: #020;
		}

body.default #effects {
	position: fixed;
	width: 100%;
	height: 100%;
}

	body.default #effects video {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: .10;
		transform: scale(2);
		visibility: hidden;
	}

	@media (orientation: portrait) {
		body.default #effects video {
			transform: scale(3.5);
		}
	}

		body.default #effects video.visible {
			 visibility: visible;
		}

body.default #settings {
	position: absolute;
	right: 1em;
	bottom: 1em;
	line-height: 0;
}

	body.default #settings a.toggle {
		display: inline-block;
		height: 2em;
		width: 2em;
		margin-left: 1em;
		border: 1px solid #888;
		background: #111;
	}

	@media screen and (max-width: 800px) {
		body.default #settings a.toggle {
			height: 3em;
			width: 3em;
			margin-left: 1.5em;
		}
	}
		body.default #settings a.toggle:hover {
			cursor: pointer;
			opacity: .7;
		}

		body.default.light #settings a.toggle {
			background: #eee;
		}

		body.default.terminal #settings a.toggle {
			background: #0a0;
		}

		body.default #settings #effect-toggle {
			background: transparent;
		}

body.default section {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

	body.default section.visible {
		display: flex;
		align-items: center;
		justify-content: center;
	}

		body.default section.visible > div {
			max-height: 100%;
			max-width: 60%;
		}

		@media screen and (max-width: 800px) {
			body.default section.visible > div {
				max-width: 85%;
			}
		}

body.default a:hover {
	cursor: pointer;
	text-decoration: none;
}

body.default i.material-icons {
	font-size: 1.3em;
  	vertical-align: -30%;
	margin-right: .5em;
}

body.default h1,
body.default h2,
body.default h3,
body.default h4,
body.default h5,
body.default h6 {
	font-weight: 300;
}

body.default h1 {
	font-size: 6em;
}

body.default h2 {
	font-size: 4em;
}

body.default h3 {
	font-size: 3em;
}

body.default h4 {
	font-size: 2.2em;
}

body.default h5 {
	font-size: 1.7em;
}

body.default h6 {
	font-size: 1.4em;
}

body.default strong {
	font-weight: 700;
}

body.default em {
	font-style: italic;
}

body.default p,
body.default ul {
	font-size: 1.2em;
}

	body.default ul li {
		margin-bottom: .6em;
	}

	body.default ul.open-in-new {
		list-style-type: none;
	}

		body.default ul.open-in-new li:before {
            content: 'open_in_new'; 
            font-family: 'Material Icons';
			position: absolute;
			margin-left: -1.4em;
		}
	
	body.default p.flags {
		font-size: 3em;
		margin-top: .5em;
	}

body.default blockquote {
	font-size: 1.2em;
	font-style: italic;
	margin-left: 1em;
	padding-left: 1em;
	border-left: 1px solid #aaa;
}

	body.default.light blockquote {
		border-left: 1px solid #444;
	}

	body.default.terminal blockquote  {
		border-left: 1px solid #040;
	}

body.default .has-cursor::after {
	content: '';
	display: inline-block;
	position: relative;
	background: #eee;
	height: .84em;
	width: .5em;
	left: .2em;
	top: .03em;
	animation: cursorblink_default 1.2s linear infinite;
}

	body.default.light .has-cursor::after {
		background: #111;
	}

	body.default.terminal .has-cursor::after {
		background: #0a0;
	}
  
@keyframes cursorblink_default {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { opacity: 0; }
}

body.default #title {
	font-size: 3.6em;
	text-align: center;
	margin: 0 0 .8em 0;
}

body.default #nav {
	font-size: 1.5em;
	text-align: center;
	margin: 0 0 .6em 0;
	line-height: 1.8;
}

	body.default #nav a,
	body.default #contact a {
		text-decoration: none;
	}

	body.default #nav a:hover,
	body.default #contact a:hover {
			text-decoration: underline;
		}

	body.default #nav > span {
		display: inline-block;
		margin: 0 2em;
	}

	@media screen and (max-width: 800px) {
		body.default #nav > span  {
			margin: 0 .8em;
		}
	}

body.default .close a:hover {
	opacity: .7;
}

body.default #contact {
	font-size: 2em;
	text-align: center;
}

@media screen and (max-width: 640px) {
	body.default #contact {
		font-size: 1.5em;
	}
}

	body.default #contact .close {
		text-align: right;
	}

@media screen and (max-width: 640px) {
	body.default #misc {
		font-size: 1.2em;
	}
}
body.default #misc .spacer {
	height: 8em;
}

body.default #misc .close {
	padding-top: 1em;
	font-size: 2em;
	text-align: right;
}

body.default #misc > div > *:last-child {
	margin-bottom: 8em;
}

.transparent {
	opacity: 0;
}

.opaque {
	opacity: 1;
}

.fadable {
	transition: opacity .7s ease;
}

.transparent-text {
	color: transparent;
}