:root{
    --border-color1: #11bbba;
    --bg-color: #555755;
    --primary-font: HomeVideo-Regular;
    --secondary-font: HFHourglass;
}

@font-face{
    font-family: HomeVideo-Regular;
    src: url('../font/HomeVideo-Regular.ttf') format("truetype");
}

@font-face{
    font-family: HFHourglass;
    src: url('../font/HFHourglass.ttf') format("truetype"); 
}

*{
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color1) var(--bg-color);
}

::selection{
    background: #a2dda7;
    color: white;
}

body {
	background-color: #25282b;
	color: #EEE;
	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;
}

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

.left {
	border: 1px solid transparent;
	position: absolute;
	left: 0;
	right: 50%;
	top: 28px;
	bottom: 0;
}

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

.top {
	border: 1px solid #000;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 300px;
}

.bottom {
	border: 1px solid #000;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
}

.menu a {
	padding: 0 6px;
	color: white;
	text-decoration: none;
}
.menu a:hover {
	background: #303030;
}

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

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

.page {
	color: #D4FC5E;
	padding: 12px;
	box-sizing: border-box;
}

h1, h2 {
	color: #EE7F4F;
    font-family: var(--secondary-font);
	font-size: 32px;
	font-weight: normal;
}

h1:before {
	content: '==========================================';
	color: #50CFDF;
	display: block;
}

h1:after {
	content: '==========================================';
	color: #50CFDF;
	display: block;
}

h2:after {
	content: '------------------------------------------';
	color: #50CFDF;
	display: block;
}

a {
	color: #EE7F4F;
}

i {
	color: #976BB5;
}

p{
    font-family: var(--primary-font);
    font-weight: 1%;
    letter-spacing: 1px;
}

.window-header {
	background: #000;
	font-family: Arial, sans-serif;
	padding: 6px;
}

.window-header:after {
	content: "\25CF   \25CF";
	opacity: 0.7;
	float: right;
}

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

.log-date {
	color: #50CFDF;
	display: inline-block;
	margin-right: 24px;
}

.log-line {
	color: #D4FC5E;
	display: inline-block;
}

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

.info-table td:nth-child(2) {
	color: #CE6F40;
	padding-right: 24px;
}

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

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

.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 {
  background: #080808; 
}
 
::-webkit-scrollbar-thumb {
  background: #050505; 
}

::-webkit-scrollbar-thumb:hover {
  background: #080808; 
}

.menu {
	background: #1F2022;
	padding: 6px;
}

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