/* Colors */
:root {
  --lightgray: #e0e0e0;
  --gray: #999;
  --darkgray: #020202;
  --purple: #a8d;
  --white: #fff;
  --black: #000;
}

/* Fonts */
@font-face {
	font-family: 'vt323';
	src: url('/assets/fonts/VT323-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'ShareTechMono';
	src: url('/assets/fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'RobotoMono';
	src: url('/assets/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

/* Global stylesheet */
* {
  box-sizing: border-box;
}
::-webkit-scrollbar {
	width: 5vw;
	max-width: 20px;
}
::-webkit-scrollbar-track {
	background-color: var(--darkgray);
}
::-webkit-scrollbar-thumb {
	background-color: var(--gray);
	border-radius: 0;
}
::selection {
	background-color: var(--gray);
	color: var(--black);
}
pre::selection {
	background-color: var(--gray);
}
code::selection {
	background-color: var(--gray);
}

/* Elements */
html {
  margin: 0;
  color: var(--gray);
  background-color: var(--darkgray);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--purple);
  width: fit-content;
  font-family: 'ShareTechMono', monospace;
}
pre, code, a { color: var(--lightgray); }
body {
  margin: 0;
	font-size: calc(.7em + .7vw);
  background: url('/assets/img/space.webp') repeat-y fixed 0 0/100%;
  background-color: #111;
}
main {
  max-width: calc(100vh + 10vw);
	padding: calc(.3rem + 2vw);
  /*padding: 4vw calc(1em + 2vw);*/
	margin: 0 auto;
	line-height: 1.5;
  font-family: 'RobotoMono', monospace;
}
main, h1, h2, h3, h4, h5, h6, pre, ul, ol, p, table, input, button {
  background-color: rgba(2,2,2,.6);
  box-shadow: 0 0 calc(.5vh + .5vw) calc(.5vh + .5vw) rgba(2,2,2,.6);
}
.header-anchor {
  text-decoration: none;
  color: rgba(255,255,255,.75);
}
.header-anchor:hover {
  color: rgba(255,255,255,1)
}
input, button {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid var(--gray);
  color: var(--purple);
}
img {
	max-width: 100%;
	max-height: 90vh;
	height: auto;
	width: auto;
	display: block;
	margin: auto;
}
hr {
  border: 1px solid var(--gray);
}
input {
  border: 0;
  border-bottom: 1px solid var(--gray);
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: inherit;
}
table {
  /* https://stackoverflow.com/a/10040881/3006854 */
  border-collapse: collapse;
  margin: auto;
  width: 100%;
}
tbody:first-child {
  text-align: left;
  border-bottom: 1px solid var(--gray);
}

/* Fort */
body::after {
  display: block;
  content: "";
  background: url('/assets/img/fort.webp') no-repeat 0 0/100%;
  width: 100%;
  height: 57.2052vw; /* Ratio of image */
}

/* Websearch */
form.websearch {
  display: flex;
  justify-content: space-between;
}
form.websearch input {
  flex: 1;
}