:root {
	--default: #000;
	--antiDefault: #fff;

	--background: #f7f7f7;
	--highlight: #dadada;
	--bright: #ccc;
	--medium: #aaa;
	--dark: #bbb;
	--ultraDark: #777;
}

/*-----------GENERAL-----------*/
html {
	box-sizing: border-box;
	font-weight: 400;
	padding: 0;
	margin: 0;
	background-color: var(--default);
	scrollbar-width: thin;
	scrollbar-color: var(--dark) var(--background);
}

*,:before,:after {
	box-sizing: inherit;
	font-weight: inherit;
}

body {
	font-family: "Roboto";
	color: var(--default);
	background-color: var(--background);
	overflow-x: hidden;
}

p {
	font-size: 18px;
	font-family: "Merriweather";
	line-height: 36px;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0 0 40px 0;
}

h1 {
	font-size: 36px;
	margin: 0;
	padding: 0 0 40px 0;
}

a {
	display: inline;
	text-decoration: none;
	color: var(--default);
	font-weight: 700;
}

a:hover {
	background-color: var(--highlight);
}

a.external:after {
	content: " ⊷";
}

.neutral-link {
	display: inline-block;
	text-decoration: none;
	font-weight: 400;
}

.neutral-link:hover {
	font-weight: 400;
}

::-moz-selection {
	color: var(--default);
	background: var(--bright);
}

::selection {
	color: var(--default);
	background: var(--bright);
}

::-webkit-scrollbar {
	width: 6px;
	background-color: var(--background);
}

::-webkit-scrollbar-thumb {
	background-color: var(--dark);
}

/*-----------MEDIA-----------*/
#vCanvas {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.media {
	width: 100%;
	height: 500px;
	border-radius: 4px;
	border: solid 1px var(--bright);
}

/*-----------HEADER-----------*/
#header {
	position: relative;
	width: 100%;
	height: calc(100vh - 160px);
	z-index: 0;
	background-color: var(--background);
}

#header-bar {
	z-index: 1;
	position: fixed;
	width: calc(100% - 80px);
	height: 120px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#no-page-header {
	display: none;
	position: relative;
	width: 100%;
	height: 140px;
	z-index: 0;
	background-color: var(--default);
}

.header-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.header-title {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	white-space: nowrap;
}

.header-sector {
	position: absolute;
	width: 80px;
	height: 80px;
	top: 50%;
	right: 0;
	transform: translateY(-50%);  
}

/*-----------SIDEBAR-----------*/
#sidebar {
	display: inline-block;
	position: relative;
	width: 320px;
	padding: 40px;
	vertical-align: top;
	font-size: 13px;
}

#sidebar * {
	color: var(--ultraDark);
}

.path-container {
	width: 100%;
	margin-bottom: 40px;
}

.side-title {
	display: block;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.side-box {
	display: block;
	font-weight: 400;
	border-radius: 4px;
}

.side-box:hover {
	background-color: rgba(0,0,0,0);
}

.side-box:hover .log-bar {
	background-color: var(--default);
}

.side-divider {
	display: block;
	width: 100%;
	background-color: var(--bright);
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.sidebar-related-title {
	display: block;
	margin-bottom: 20px;
}

#sidebar .sidebar-related-same,
#sidebar .sidebar-related-same a {
	color: var(--medium);
}

.log-text {
	display: block;
	margin-bottom: 20px;
}

.log-stat {
	display: inline-block;
	vertical-align: top;
	width: 30px;
	margin-bottom: 20px;
}

.log-bar {
	display: inline-block;
	vertical-align: top;
	height: 15px;
	margin-bottom: 20px;
	background-color: var(--bright);;
	border-radius: 3px;
}

.sidelink:hover {
	background-color: rgba(0, 0, 0, 0);
}

.sidelink-holder {
	display: inline-block;
	padding: 6px;
	margin-right: 4px;
	margin-bottom: 4px;
	border-radius: 3px;
	border: solid 1px var(--bright);;
	color: var(--ultraDark);
}

/*-----------BODY-----------*/
#full-container {
	display: flex;
	max-width: calc(320px + 900px);
	margin-left: auto;
	margin-right: auto;
}

#body {
	position: relative;
	width: 100%;
	padding-right: 320px;
	background-color: var(--background);
	z-index: 1;
	border-top: solid 1px var(--bright);;
	border-bottom: solid 1px var(--bright);;
}

/*-----------LO-GUIDE-----------*/
#cli {
	font-family: "Roboto Mono";
	font-size: 13px;
	width: 100%;
}

#lo-cli-input {
	width: 85%;
	font-family: "Roboto Mono";
	background-color: var(--background);;
	color: var(--ultraDark);
	border: none;
	line-height: normal;
}

#lo-cli-input:focus {
	outline: none;
}

#cli-output {
	margin-bottom: 20px;
}

#lo-cli-output {
	line-height: normal;
}

#cli-symbol {
	margin-right: 12px;
	color: var(--ultraDark);
}

/*-----------CONTENT-----------*/
#content {
	width: 100%;
	padding: 0 40px 0 40px;
}

#body-content {
	display: inline-block;
	width: 100%;
	max-width: 900px;
	background-color: var(--background);;
	border-left: solid 1px var(--bright);;
}

#title {
	padding: 40px;
	overflow: auto;
}

#title h1 {
	padding: 0;
}

.divider {
	width: 10%;
	height: 1px;
	transform: translateX(-40px);
	margin-bottom: 40px;
	background-color: var(--bright);;
}

audio::-webkit-media-controls,
audio::-webkit-media-controls-panel {
	background: var(--highlight);
}

audio:focus,
video:focus {
	outline: none;
}

.text-image,
.text-image-annotated,
.video,
.video-annotated,
.audio,
.audio-annotated {
	width: 100%;
	border-radius: 4px;
	margin: 0 0 40px 0;
}

.text-image-annotated,
.video-annotated,
.audio-annotated {
	margin: 0 0px 5px 0px;
	border: none;
}

.image-annotation,
.video-annotation,
.audio-annotation {
	display: block;
	color: var(--ultraDark);
	font-size: 13px;
	padding: 0 0 40px 0;
}

.image-annotation:before,
.video-annotation:before,
.audio-annotation:before {
	content: "+ ";
}

li .text-image,
li .text-image-annotated {
	width: 100%;
	margin: 0 0 5px 0;
}

li .annotation {
	padding: 0;
}

.page-card {
	display: block;
	position: relative;
	width: 100%;
	height: 140px;
	margin: 0 0 40px 0;
	border-radius: 4px;
	border: solid 1px var(--bright);
	overflow: hidden;
}

.page-card-image {
	display: inline-block;
	height: 100%;
	width: 20%;
	max-width: 180px;
	min-width: 65px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: solid 1px var(--bright);
	background-size: cover;
	background-position: center;
}

.page-card-title {
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 40px 0 40px;
}

.note {
	width: 100%;
	padding: 40px 40px 40px 40px;
	margin: 0 0 40px 0;
	border-radius: 4px;
	font-family: "Roboto Mono";
	font-size: 13px;
	line-height: normal;
	background-color: var(--default);
	color: var(--antiDefault);
	white-space: pre-wrap;
}

.note a {
	color: var(--antiDefault);
}

.quote {
	width: 100%;
	margin: 0 0 40px 0;
	padding: 0 40px 0 40px;
	font-family: "Roboto";
	font-style: italic;
	font-size: 20px;
	line-height: 36px;
	border-left: solid 1px var(--bright);
}

/*-----------LISTS-----------*/
.condensed-list,
.spacious-list {
	width: 100%;
	padding: 0 0 40px 0;
	margin: 0;
	list-style-type: none;
	line-height: 24px;
	font-size: 16px;
}

.condensed-list {
	columns: 4;
	-webkit-columns: 4;
	-moz-columns: 4;
	line-height: 36px;
}

.spacious-list {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	padding-bottom: 30px;
}

.condensed-list li,
.spacious-list li {
	display: list-item;
}

.spacious-list li {
	margin-bottom: 10px;
}

.condensed-list li a {
	font-weight: 400;
}

/*-----------FOOTER-----------*/
#footer {
	width: 100%;
	height: 90px;
	background-color: var(--default);
}

#footer-content {
	max-width: 900px;
	height: 100%;
    position: relative;
    overflow: auto;
	margin: auto;
}

.footer-left,
.footer-right {
	display: inline-block;
	position: absolute;
	vertical-align: top;
	color: var(--antiDefault);
	font-size: 13px;
	top: 50%;
	transform: translateY(-50%);
}

.footer-left a,
.footer-right a {
	color: var(--antiDefault);
}

.footer-left a:hover,
.footer-right a:hover {
	background-color: var(--ultraDark);
}

.footer-left {
	left: 40px;
}

.footer-right {
	right: 40px;
	text-align: right;
}

.footer-center {
	position: absolute;
	height: 50px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.footer-center img {
	height: 30px;
}

.footer-center:hover {
	background-color: var(--default);
}

/*-----------MEDIA-----------*/
#mobile-path {
	display: none;
}

@media (max-width: 1620px) {
	#body {
		padding-right: 0;
	}

	#full-container {
		margin-left: 0;
	}
}

@media (max-width: 1200px) {
	.spacious-list {
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}
}

@media (max-width: 900px) {
	#sidebar {
		display: none;
	}

	#mobile-path {
		display: block;
		font-size: 13px;
		color: var(--ultraDark);
		padding: 20px 40px 20px 40px;
	}

	#mobile-path a {
		color: var(--ultraDark);
	}

	#title {
		border-top: solid 1px var(--bright);
	}

	.condensed-list {
		columns: 3;
		-webkit-columns: 3;
		-moz-columns: 3;
	}
}

@media (max-width: 540px) {
	.condensed-list {
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
	}
}