/* color variables defaults, will be overrided by palette menu */
:root {
	--color1: #cacaca;
	--color2: #f76700;
	--color3: #4a3553;
	--color4: #000000cc;
	--color5: #3e2239;
	--textshadow: #666666;
	--color34:#251a29;
	--color45:#1f111c;
}

html, body {
	background-color: var(--color5);
	background-image: url(https://battleofthebits.com/disk/debris/botb_bg.png);
	background-attachment: fixed;
	color: var(--color1);
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
	height: 100%;
	text-rendering: optimizeLegibility;
	text-shadow: 0px 1px 1px var(--textshadow);
}

body {
  background: var(--color4);
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 1px;
  width: 960px;
  height:auto;
}
.inner {
	margin-left: 10px;
	margin-right: 10px;
}

#status {
	color: var(--color1);
	font-family: monospace;
	margin-top: 14px;
	margin-left: 3px;
	margin-bottom: 0px;
}

#LOGO {
	position: relative;
}
.logo {
	display: block;
	font-size: 51px;
	font-family: Arial Black, Arial, sans-serif;
	font-weight: 900;
	letter-spacing: -5px;
	white-space: nowrap;
	line-height: 30px;
	height: 40px;
}
.logo0 {
	position: absolute;
	top: 0px;
	color: var(--color4);
	z-index: 10;
	text-shadow: none;
}
.logo1 {
	position: absolute;
	top: 5px;
	color: var(--color3);
	z-index: 20;
	text-shadow: none;
}
.logo2 {
	position: absolute;
	top: 10px;
	color: var(--color1);
	z-index: 30;
}


a {
	text-decoration: none;
	color: var(--color2);
	overflow-wrap: anywhere;
}



#PALETTE_MENU {
	position: relative;
	float: right;
}
input {
	background-color: var(--color5);
	color: var(--color1);
	border: 2px solid;
	border-color: rgb(from var(--color4) r g b / 255);
	border-radius: 5px;
}

#maindiv {
	position:absolute;
	width: 940px;
	height: 800px;
	top: 70px;
}

/* icon */
.battle .battleicon {
	margin-right: 3px;
}
/* small is only used in the battle divs for the timestamp */
.battle small {
	font-size: 9px;
	float: right;
	margin-left: 2px;
}
/* this is host and format */
.battle .smalldiv {
	font-size: 9px;
	visibility: hidden;
}
.battle:hover .smalldiv {
	visibility: visible;
}
.battle .smalldivspacer {
	margin-top: 9px;
}

/* these are the fixed divs that represent battles. */
.fixed {
	position:absolute;
}
.battle{
	font-size: 11px;
	hyphens: auto;
	overflow: hidden;
	padding: 3px 4px;
	line-height: 11px;
	border-radius: 4px;
	background-image: url(https://battleofthebits.com/styles/img/topNoiseShade.png);
	background-repeat: repeat-x;
	height: 0px;
}
.battle:hover {
	border: 1px var(--color4) solid;	
	color: var(--color4);
	background-color: var(--color1);
	
	height: fit-content !important; /* has to override element style */
	z-index: 10;
}
.oldbattle1{
	border: 1px var(--color1) solid;
	color: var(--color1);
	background-color: var(--color5);
}
.oldbattle2{
	border: 1px var(--color1) solid;
	color: var(--color1);
	background-color: var(--color45);
}
.newbattle1{
	border: 1px var(--color2) solid;
	color: var(--color2);
	background-color: var(--color3);
}
.newbattle2{
	border: 1px var(--color2) solid;
	color: var(--color2);
	background-color: var(--color34);
}

canvas {
	padding-top: 15px;
}
/* second canvas for drawing on top of the divs, needs clickthrough */
#top {
	z-index: 20;
	position:absolute;
	top:55px;
	pointer-events: none;
}

footer {
	width: 928px;
}
#textdisplay {
	margin-right: 4px;
	padding: 4px 6px;
	border-radius: 4px;
	background: var(--color4) url(https://battleofthebits.com/styles/img/topNoiseShade.png);
	background-repeat: repeat-x;
	color: var(--color1);
	width: 928px;
}
#shiftnote {
	float: right;
	font-style: italic;
	color: var(--color14);
}

/* mobile styling */
@media screen and (max-width: 750px) {
	.logo {
		font-size: 24px !important;
		letter-spacing: -3px !important;
	}
	#PALETTE_MENU {
		float: left;
		margin-left: calc( max( 100vw - 220px , 250px) );
	}
	#top {
		left:20px;
	}
	#shiftnote {
		display: none;
	}
}