:root {
	--pixel-size: 2px;
	--window-edge-dark: #5B5B5B;
	--window-edge-light: #7A7A7A;
	--window-main: #C4C4C4;
	--window-light: #DBDBDB;
	--window-dark: #A8A8A8;
	--background: #096B72;
    --code-background: #171738;
    --code-text: #92c97b;
    --wincontent-background: white;
    --text-color: black;
    --corner-image: url('corner.png');
    --header-file: url("header.webp");
    --title-bar-file: url('titlebar.webp');
}

:root[data-theme="dark"] {
	--pixel-size: 2px;
	--window-edge-dark: #5B5B5B;
	--window-edge-light: #7A7A7A;
	--window-main: #232327;
	--window-light: #DBDBDB;
	--window-dark: #A8A8A8;
	--background: #096B72;
    --code-background: #171738;
    --code-text: #92c97b;
    --wincontent-background: #18181A;
    --text-color: white;
    --corner-image: url('corner-dark.png');
}


:root[data-theme="christmas"] {
	--pixel-size: 2px;
	--window-edge-dark: #5B5B5B;
	--window-edge-light: #7A7A7A;
	--window-main: #C4C4C4;
	--window-light: #DBDBDB;
	--window-dark: #A8A8A8;
	--background: #096B72;
    --code-background: #171738;
    --code-text: #92c97b;
    --wincontent-background: white;
}

:root[typeface="default"] {
	font-family: Main;
    font-size: 100%;
}

:root[typeface="smooth"] {
    font-family: monospace;
    font-size: 133%;
}

@font-face {
  font-family: "Main";
  src: url(fonts/PixelCode.ttf);
  font-weight: 400;
  font-style: normal;
}

* {
    box-sizing: border-box;
}

body {
	background-color: var(--background);
	margin-top: 0px;
	margin-left: 25%;
	margin-right: 25%;
	font-size: 100%;
	line-height: 110%;
}

@media (max-width: 1200px) {
    body {
    margin-left: 20%;
    margin-right: 20%;
    font-size: 100%;
    line-height: 110%;
    }
}

@media (max-width: 1000px) {
    body {
    margin-left: 15%;
    margin-right: 15%;
    font-size: 100%;
    line-height: 110%;
    }
}

@media (max-width: 800px) {
    body {
    margin-left: 0%;
    margin-right: 0%;
    font-size: 100%;
    line-height: 110%;
    }
}

.window {
	border-left: solid var(--window-edge-light) var(--pixel-size);
	border-top: solid var(--window-edge-light) var(--pixel-size);
	border-right: solid var(--window-edge-dark) var(--pixel-size);
	border-bottom: solid var(--window-edge-dark) var(--pixel-size);
	background-color: var(--window-main);
	padding: calc(var(--pixel-size));
	box-shadow: var(--pixel-size) var(--pixel-size) black, 
				calc(var(--pixel-size)*2) calc(var(--pixel-size)*2) black;
}

.wintitle {
	max-height: 30px;
	border-left: solid var(--window-edge-light) var(--pixel-size);
	border-top: solid var(--window-edge-light) var(--pixel-size);
	border-right: solid var(--window-edge-dark) var(--pixel-size);
	border-bottom: solid var(--window-edge-dark) var(--pixel-size);
	margin-bottom: calc(var(--pixel-size)*2);
	margin-left: calc(var(--pixel-size)*1);
	margin-right: calc(var(--pixel-size)*1);
	background: #E8C252;
    image-rendering: pixelated;
	background: var(--title-bar-file);
}

.wintitletext {
	display: flex;
	text-transform: uppercase;
	color: white;
	text-shadow: 2px 2px black;
	transform: translateY(calc(-1*var(--pixel-size)));
	margin-left: 4px;
}

.pagetitle {
	justify-content: center;
	text-transform: lowercase;
	margin-left: 0px;
}

.wincontent {
	border-left: solid var(--window-edge-light) var(--pixel-size);
	border-top: solid var(--window-edge-light) var(--pixel-size);
	border-right: solid var(--window-edge-dark) var(--pixel-size);
	border-bottom: solid var(--window-edge-dark) var(--pixel-size);
	background-color: var(--wincontent-background);
	overflow: hidden;
	position: relative;
    color: var(--text-color);
    margin: var(--pixel-size);
}

.wintitle .wincontent {
	box-shadow: 
	calc(-1*var(--pixel-size)) calc(-1*var(--pixel-size)) var(--window-dark),
	calc(+1*var(--pixel-size)) calc(+1*var(--pixel-size)) var(--window-light);
}

.wincontent:not(.banner):not(.motdcont):not(.code-block)::after {
    image-rendering: pixelated;
    content: "";
    display: block;             
    width: calc(7*var(--pixel-size));
    height: calc(7*var(--pixel-size));
    background: var(--corner-image) no-repeat center;
    background-size: contain;
	float: right;
}

p {
	padding: calc(2 * var(--pixel-size));
	margin-top: 0px;
	margin-bottom: 0px;
}

img:not(.plain-pics) {
	margin: var(--pixel-size);
	padding: calc(1 * var(--pixel-size));
	background-color: var(--window-main);
    border-left: solid var(--window-edge-light) var(--pixel-size);
	border-top: solid var(--window-edge-light) var(--pixel-size);
	border-right: solid var(--window-edge-dark) var(--pixel-size);
	border-bottom: solid var(--window-edge-dark) var(--pixel-size);
}

.imgsmall {
  width: 10%;
  height: auto;
}

.profile-stamp {
    max-width: 64px;
    max-height: 64px;
}

.imgquarter {
    width: 25%;
    height: auto;
}

.imghalf {
    width: 50%;
    height: auto;
}

.imgmid {
    width: 75%;
    height: auto;
}

.imgfull {
    width: 100%;
    height: auto;
}


.imgafull {
    width: 99%;
    height: auto;
}
.banner {
	min-height: 128px;
	background: var(--header-file);
	background-size: cover;
	background-position: center;
}

.imginlineleft {
	margin-right: 10px !important;
	float: left;
	display: inline-block;
}

.maingrid {
	display: grid;
	grid-template-columns: 4fr 2fr;
	grid-auto-flow: row dense;
    grid-template-columns: 1fr 200px;
}

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

a:hover {
	background-color: background-color: var(--window-main);
	color: var(--background);
	box-shadow: var(--pixel-size) var(--pixel-size) var(--background), 
				calc(var(--pixel-size)*2) calc(var(--pixel-size)*2) var(--background);
}

.reduced-size-text {
    font-size: 75%;
}

.no-tail-shadow {
    box-shadow: var(--pixel-size) 0 black, 
				calc(var(--pixel-size)*2) 0 black;
}

.full-side-shadow {
    box-shadow: var(--pixel-size) 0 black, 
				calc(var(--pixel-size)*2) 1 black;
}

.motd {
    max-height: 34px;
}

.code-block {
    white-space: pre-line;
    background-color: var(--code-background);
    color: var(--code-text);
}

hr {
    width: 98%;
    text-align: center;
    border: none;
    border-top: var(--pixel-size) dashed var(--window-main);
    overflow: hidden;
    height: var(--pixel-size);
}

.link-button {
    display: block;
    margin: calc(2*var(--pixel-size));
    padding: calc(2*var(--pixel-size));
    border-left: solid var(--window-edge-light) var(--pixel-size);
	border-top: solid var(--window-edge-light) var(--pixel-size);
	border-right: solid var(--window-edge-dark) var(--pixel-size);
	border-bottom: solid var(--window-edge-dark) var(--pixel-size);
	background-color: var(--wincontent-background);
    color: var(--text-color);
}

input {
    margin-left: calc(4*var(--pixel-size));
}

label {
    margin-left: calc(4*var(--pixel-size));
}

.text-no-wrap {
    white-space: nowrap;
}

.pixelated {
    image-rendering: pixelated;
}