:root {
	--yellow: #eed202;
	--purple: #401c3c;
	--red:    #9b2423;
	--light:  #f2f0e4;
	--grey:   #848c8e;
	--dark:   #3f373a;
	--darker: #1e1e24;
	--black:  #130f17;
}

/* CSS RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body {
	background: var(--black);
	color: var(--light);
	margin: 0;
	padding: 0;
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	line-height: calc(1em + 0.5rem);
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* SKRONTCH GENERAL STLYE */
a {
	color: var(--yellow);
}
.mono {
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
}
.dragover {
	background: var(--yellow);
}
#containment {
	height: 100%;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: auto 280px;
	grid-template-rows: 64px auto auto 44px;
	gap: 8px;
}
#containment header, #containment footer {
	grid-column-start: 1;
	grid-column-end: 3;
	padding: 8px 16px;
	background: var(--purple);
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
}
footer { font-style: italic; }
#output {
	background: var(--black);
	margin: 1em;
	margin-bottom: 2em;
}
main, nav, aside {
	background: var(--darker);
	border-radius: 16px;
	padding: 8px;
}
main {
	grid-row-start: 2;
	grid-row-end: 4;
	margin-left: 8px;
}
nav, aside {
	margin-right: 8px;
}
table {
	border: 2px solid var(--dark);
	border-radius: 12px;
}
td {
	border: 1px solid var(--dark);
	border-radius: 8px;
	padding: 4px;
	text-align: center;
}
input, select {
	background: var(--black);
	color: var(--light);
	border-radius: 4px;
	margin: 2px;
	padding: 2px 5px;
}
#anim_table input {
	font-family: 'Lucida Console', monospace;
}
canvas {
	image-rendering: pixelated;
}
.data {
	font-family: monospace;
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 0 2em 1em 2em;
}
.highlight {
	background: var(--black);
}
input::placeholder {
	font-size: 0.75em;
}
input.dec_in {
	width: 64px;
}
input.hex_in {
	width: 32px;
}
input.error, input.error:focus {
	outline: none;
	border: 2px solid var(--red);
}
#anim_controls {
	font-size: 1.5em;
	user-select: none;
}
#anim_controls div {
	display: inline-block;
}
#anim_controls div:hover {
	cursor: pointer;
}
#anim_output {
	overflow-x: auto;
	white-space: pre-wrap;
	font-family: monospace;
	font-size: 0.5em;
	background: var(--black);
	border-radius: 8px;
	padding: 4px 8px;
}

#droptarg {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9001;
}

.error_msg { 
	color: var(--red); 
	background-color: var(--black);
	font-weight: bold;
	border-radius: 8px;
	padding: 4px 8px;
}
.h_space { height: 8px; }
.hidden { display:none; }