:root {
  --fb-bg: #000;
  --fb-fg: #ddd;

  --cyan: #33ccff;
  --pink: #cc33ff;

  --vga-b: #000;
  --vga-r: #d00;
  --vga-g: #0d0;
  --vga-y: #d50;
  --vga-a: #00d;
  --vga-m: #d0d;
  --vga-c: #0dd;
  --vga-w: #ddd; /* 0xD instead of 0xA, since standard VGA colors look horrid on a website */

  --vga-B: #555;
  --vga-R: #f55;
  --vga-G: #5f5;
  --vga-Y: #ff5;
  --vga-A: #55f;
  --vga-M: #f5f;
  --vga-C: #5ff;
  --vga-W: #fff;
}

/***  "hardware"  ***/
@font-face {
  font-family: custom-tty;
  src: url(/boot/Web437_IBM_Model3x_Alt4.woff);
  /* https://int10h.org */
}
body {
	width: 100%;
	height: 100%;

	font-family: custom-tty, monospace;
	font-size: 16px;
	line-height: 16px;

	margin: 0;
	padding: 0;
	overflow: hidden;

	color: var(--fb-fg);
	background-color: var(--fb-bg);
}

/***  bootloader  ***/
div.bootmenu {
	height: fit-content;
	min-width: fit-content;
	width: 35%;

	overflow: visible;
	margin: auto;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
div.bootmenu > ul {
	margin: 1em;
	text-align: center;
	white-space: nowrap;

	list-style-type: none;
	padding-left: 0;
}

.selected {
	color: var(--fb-bg);
	background-color: var(--fb-fg);
}

/***  kernel  ***/
div#framebuffer {
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
}
ul[id^='tty'], p#early-printk {
	overflow: hidden; /* TTYs don't scroll, sorry :c */
	overflow-wrap: anywhere;
	white-space: pre-wrap;

	font-family: custom-tty, monospace;
	font-size: 16px;
	line-height: 16px;

	list-style-type: none;
	padding: 0;
	margin: 0;
	box-sizing: border-box;

	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
}

#cursor {
	color: var(--fb-bg);
	background-color: var(--fb-fg);
}

input#dummy-input {
	position: fixed;
	left: -200vw;
}

/* color mappings so CSP doesn't complain about inline styles */
.color-b { color: var(--vga-b); }
.color-r { color: var(--vga-r); }
.color-g { color: var(--vga-g); }
.color-y { color: var(--vga-y); }
.color-a { color: var(--vga-a); }
.color-m { color: var(--vga-m); }
.color-c { color: var(--vga-c); }
.color-w { color: var(--vga-w); } /* 0xD instead of 0xA, since standard VGA colors look horrid on a website */
.color-B { color: var(--vga-B); }
.color-R { color: var(--vga-R); }
.color-G { color: var(--vga-G); }
.color-Y { color: var(--vga-Y); }
.color-A { color: var(--vga-A); }
.color-M { color: var(--vga-M); }
.color-C { color: var(--vga-C); }
.color-W { color: var(--vga-W); }
.background-color-b { background-color: var(--vga-b); }
.background-color-r { background-color: var(--vga-r); }
.background-color-g { background-color: var(--vga-g); }
.background-color-y { background-color: var(--vga-y); }
.background-color-a { background-color: var(--vga-a); }
.background-color-m { background-color: var(--vga-m); }
.background-color-c { background-color: var(--vga-c); }
.background-color-w { background-color: var(--vga-w); }
.background-color-B { background-color: var(--vga-B); }
.background-color-R { background-color: var(--vga-R); }
.background-color-G { background-color: var(--vga-G); }
.background-color-Y { background-color: var(--vga-Y); }
.background-color-A { background-color: var(--vga-A); }
.background-color-M { background-color: var(--vga-M); }
.background-color-C { background-color: var(--vga-C); }
.background-color-W { background-color: var(--vga-W); }


/***  userspace ***/
/* TODO: make a cssfs driver? */
#ui-root {
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;

	white-space: normal;

	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behavior: none;

	background-image: url(/www/img/bg.gif); 
	background-repeat: repeat;
	background-attachment: fixed;
	image-rendering: crisp-edges;
}

/* banners */
.under-construction-banner {
	background-image: url(/www/img/under_construction_moving.gif);
	background-repeat: repeat-x;
	background-size: contain;
	image-rendering: crisp-edges;

	width: 100%;
	height: 5%;

	position: fixed; 
	left: 0;
}

/* here instead of inline because CSP + I can't be bothered with nonces */
.top { top:0; }
.bottom { bottom:0; }

/* window stuff */
@media (orientation: portrait) {
	.floating {
		margin: 7vh auto;
		width: 80%; 
	}
	.drawer {
		width: 150px;
	}
	.left { left: calc(1em - 150px) !important }
	.right { right: calc(1em - 150px) !important }
	.left:hover, .left:focus, .left:active { left: 0 !important }
	.right:hover, .right:focus, .right:active { right: 0 !important }
}
@media (orientation: landscape) {
	.floating {
		margin: 10vh auto;
		width: 53%; 
	}
	.drawer-handle {
		visibility: hidden;
	}
}
.window {
	background: var(--fb-bg);

	padding: 1em 1em 0 1em;
	margin: 2em auto;

	outline: none;
	border: 1.5pt solid;
	border-image: linear-gradient(to bottom right, var(--cyan), var(--pink)) 1;
	box-shadow: 0 0 2pt #9ecaed;
	box-sizing: border-box;
}

.drawer {
	height: 80vh;
	z-index: 1;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;

	transition: 0.3s;
}
.drawer > .window {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	overflow-y: scroll;
}
.drawer > .window > article {
	background: var(--fb-bg);
	width: calc(100% - 2em);
	/*height: calc(100% - 2em);*/
	padding: 1em;

	display: flex;
	flex-direction: column;
}
.drawer > .window > article > header {
	margin-bottom: 0.5em;
}
.drawer-handle {
	min-width: 1em;
	width: 1em;
	max-height: 100%;
	margin: 0;
	padding: 0;
	background: var(--fb-bg);
}
.left { left: 0; }
.left > .window {
	border-left: 0;
}
.right { right: 0; }
.right > .window {
	border-right: 0;
}

/* main */
.cyan { color: var(--cyan); }
.pink { color: var(--pink); }
.center-evenly {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
.center-between {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.center-left {
	display: flex;
	flex-direction: row;
	justify-content: left;
}
.pre { white-space: pre; }
.hide-overflow { overflow: hidden; }
.left-overflow {
	display: flex;
	justify-content: flex-end;
}
.half-width { width: 50%; }


.link { color: var(--pink); }
.link:hover { color: var(--cyan); }

.list-none {
	list-style: none;
	padding: 0.5em;
}
.list-none > li { margin: 0.25em 0; }

article { padding: 0; margin: 0; }
article > p { padding-left: 0.5em; }

img {
	width: 88px;
	height: 31px;
}

/* footer */
footer.window {
	text-align: center;
	color: var(--fb-fg);
	height: auto;
	padding: 1em;
}

a.footer, .badge-link { text-decoration: none; }
p.badges {
	line-height: 0;
	font-size: 0;
}

p.footer {
	color: var(--fb-fg);
	padding: 0;
	margin: 0;
}