:root {
  --window-background-colour: #2a2514; /*this is how you do variables*/
  --window-label-colour: #eee9dd;
  --top-bar-colour: #E4CA23;
  --window-border-colour: #8d2525;
  --primary-text-colour: #eee9dd;
  --heading-accessory-colour: #52ad58;/*also used for log date*/
  --link-colour: #e96f49; /*also used for h2*/
}

body {
	background-color: var(--window-background-colour);
	color: var(--window-label-colour);
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background-repeat: repeat-x;
	overflow: hidden;
}

body, html {
	position: relative;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.left {
	position: absolute;
	left: 0;
	right: 60%;
	top: 28px;
	bottom: 0;
}

.right {
	position: absolute;
	left: 40%;
	right: 0;
	top: 28px;
	bottom: 0;
	border: 1px solid var(--window-border-colour);
}

.top {
	border: 1px solid var(--window-border-colour);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 300px;
}

.bottom {
	border: 1px solid var(--window-border-colour);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
}

iframe {
	width: 100%;
	height: 100%;
	border: 0;
	overflow: auto;
}

.page img {
	max-width: 100%;
}

.page {
	color: var(--primary-text-colour);
	padding: 12px;
	box-sizing: border-box;
	max-width: 800px;
}

h1 {
	color: var(--primary-text-colour);
	font-size: 12px;
	font-weight: normal;
}

h1:before {
	content: '==========================================';
	color: var(--heading-accessory-colour);
	display: block;
}

h1:after {
	content: '==========================================';
	color: var(--heading-accessory-colour);
	display: block;
}

h2 {
	color: var(--link-colour);
	font-size: 12px;
	font-weight: normal;
}

h2:after {
	content: '------------------------------------------';
	color: var(--heading-accessory-colour);
	display: block;
}

a {
	color: var(--link-colour);
}

i { /*i cant figure out what this is or how i can even test it out*/
	color: #F5E466;
}

.window-header {
	background: var(--window-border-colour);
	font-family: Arial, sans-serif;
	padding: 6px;
}

.window-header:after {
	content: "\25A2  \25A2";
	opacity: 0.3;
	font-size: 18px;
	line-height: 14px;
	float: right;
}

.window-content {
	padding: 12px;
	height: calc(100% - 50px);
	overflow: auto;
}

/* This is for the iframe window - we don't want the outside window to scroll, only the iframe */
.right .window-content {
	padding: 0;
	overflow: hidden;
}

.log-date {
	color: var(--heading-accessory-colour);
	display: inline-block;
	margin-right: 24px;
}

.log-line {
	color: var(--primary-text-colour);
	display: inline-block;
}

.info-table td:nth-child(1) {
	color: var(--heading-accessory-colour);
	padding-right: 12px;
}

.info-table td:nth-child(2) {
	color: var(--link-colour);
	padding-right: 24px;
}
/*i cant quite wrap my head aorund this fancy alternating table bs yet*/
.info-table tr:nth-child(odd) td:nth-child(3) {
	color: #867cb6;
}

.info-table tr:nth-child(even) td:nth-child(3) {
	color: var(--top-bar-colour);
}

.info-table-2 td:nth-child(1) {
	color: #EEE;
	padding-right: 12px;
}

.info-table-2 td:nth-child(2) {
	color: #4CC2D2;
	margin-right: 24px;
	background: #343A47;
	display: inline-block;
}

.info-table-2 tr:nth-child(odd) td:nth-child(3) {
	color: #D4FC5E;
}

.info-table-2 tr:nth-child(even) td:nth-child(3) {
	color: #CE6F40;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track { /*the part of the scrollbar that moves*/
	background: #080808; 
}

::-webkit-scrollbar-thumb {/*the background of the scrollbar*/
	background: #050505; 
}

::-webkit-scrollbar-thumb:hover {/*what the scrollbar does when you hover over it. duh*/
	background: #080808; 
}

.menu {
	background: var(--top-bar-colour);
	padding: 6px;
}

.menu a {
	padding: 6px;
	color: var(--window-border-colour);
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.menu a:hover {
	background: var(--window-border-colour);
	color: var(--top-bar-colour);
}


.profile-img {
	margin-right: 24px;
}

* {
	scrollbar-width: none; 
}

::-webkit-scrollbar {
	width: 10px;
}