body {
	background-color:white;
	color: #41352d;
    font-family: "IBM Plex Serif";
	font-family: serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background-repeat: repeat-x;
	overflow: hidden;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url(/assets/fonts/ibmplexserif/IBMPlexSerif-Thin.woff2) format("woff2");
    font-weight: 100;
    font-style: normal;
}

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 #ffb2bc;
}

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

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

img {height:200px;}

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

.page {
	color: #D4FC5E;
	padding: 12px;
	box-sizing: border-box;
	max-width: 800px;
	overflow: auto;
}

h1 {
	color: #e240a4;
	font-size: 17px;
	font-weight:normal;
	font-style: oblique;
}

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

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

h2 {
	color: #682525;
	font-size: 15px;
	font-weight:lighter;
	font-style: italic;
}

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

a {

    color:#e240a4;

}

a img:hover {
	filter:grayscale(50%);
  transition: filter 0.8s ease;
  filter:blur(50%)
}

i {
	color: #b93754;
}

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


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

.bottom .window-content {

	overflow-y:scroll;
}

/* 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;
  width: inherit;
  overflow: hidden;
}

.right .window-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* Scales down large images perfectly without cropping them */
}

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

::-webkit-scrollbar-track {
	background: #080808; 
}

::-webkit-scrollbar-thumb {
	background: #050505; 
}

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

.menu {
	background: #DF7126;
	padding: 6px;
}

.menu a {
	padding: 6px;
	color: black;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.menu a:hover {
	background: #303030;
	color: #DF7126;
}


* {
	scrollbar-width: thin; 
}

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

.credit {
	border: 1px solid #ffb2bc;
	position: absolute;
	display: grid;
	align-content: center;
	place-items: center;
  height: 100vh;
}