html {
	color-scheme: dark;
}

body {
  text-align: center;
  font-family: "MS PGothic", "VL PGothic", sans-serif;
  background-color: #1b1b1e;
  overflow-x: hidden;
}

.border {
  /*padding: 6px;*/
  padding: 1%;
  color: #A3AAB7;
  border-style: solid;
  border-radius: 4px;
  border-width: 0.1em;
  border-color: #1d2026;
  font-family: consolas;
  background-color: #282c34;
}

table, th, td {
  padding: 6px;
  border-style: solid;
  border-color; gray;
  border-collapse: collapse;
}

.opt {
	color: #f0f0f0;
	background-color: #212125;
	border: initial;
	display: flex;
	width: 100px;
	text-align: left;
}

.opt:hover {
	transition-duration: 0.2s;
	background-color: #1b1b1e;
}

a.menu:visited {
	color: #f0f0f0;
	text-decoration: none;
}
 
a.menu:hover {
	color: #f0f0f0;
	text-decoration: none;
}

a.menu:active {
	color: #f0f0f0;
	text-decoration: none;
}
 
a.menu:link {
	color: #f0f0f0;
	height: 100%;
	width: 100%;
	text-decoration: none;
}

.menu {
	display: inline-block;
	padding: 13px 13px;
}



#title {
	font-weight: bold;
	color: #00ace6;
	padding: 10px 10px;
	text-align: center;
}

div#footer {
	border-top: 1px solid #2c2d2d;
	text-align: center;
	color: #6b747c;
	margin: 10px 10px
}

div#contents {
	text-align: left;
	color: #f0f0f0;
	font-size: 1rem;
	padding: 10px 10px;
	background-color: #1b1b1e;
	display: block;
	left: 200px;
	min-height: 100%;
	max-width: calc(100vw - 250px);
	position: relative;
}

div#nav {
	position: fixed;
	left: 0;
	top: 0;
	text-align: center;
	background-color: #212125;
	display: block;
	width: 200px;
	height: 100%;
	font-size: 1rem;
	z-index: 99;
}

div#jukebox {
	text-align: left;
	color: #f0f0f0;
		display: flex;
	img {
		width: auto;
		height: auto;
		max-width: 65vw;
		max-height: 20vh;
		margin: 25px; 
	}
}


span.name {
	font-weight: bold;
	display: block;
}

span.link{
	color: #b0b0b0;
	display: block;
}

span.ico{
	color: #b0b0b0;
	display: inline;
}

div.resulttitle{
	display: block;
}

div.resulthead{
	display: block;
}

button#navtoggle {
	display: none;
}


.red{
  color: hsl(10,100%,50%);
}
.yellow{
  color: hsl(43,100%,50%);
}
.green{
  color: hsl(150,100%,50%);
}
.blue{
  color: hsl(200,100%,50%);
}
.mint{
  color: hsl(160,100%,50%);
}
.pink{
  color: hsl(320,100%,50%);
}
.orange{
  color: hsl(20,100%,60%);
}
.indigo{
  color: hsl(265,100%,70%);
}
.cyan{
  color: hsl(180,100%,40%);
}
.white {
  color: #A3AAB7;
}


@media all and (max-width: 849px) {
	div#contents {
		transition: transform 0.5s ease;
		transform: translateX(-200px);
		max-width: 100vw;
	}
	div#nav {
		transition: transform 0.5s ease;
		transform: translateX(-200px);
	}
	[toggled^="1"]#nav {
		transition: transform 0.5s ease;
		transform: translateX(0px);
	}

	[toggled^="1"]#nav + div#contents {
		transition: transform 0.5s ease;
		transform: translateX(0px);
	}

	button#navtoggle {
		display: inline;
	}


	div#jukebox {
		text-align: left;
		color: #f0f0f0;
		display: block;
		img {
			width: auto;
			height: auto;
			max-width: 60vw;
			max-height: 15vh;
			margin: 15px; 
		}
	}

}