@media screen and (max-width: 768px) {
  html{
	max-width:90vw;
	padding:25px;
  }
  p{
    font-size: 24px;
  }
}
:root {
	--toggle-left: 340px;
	--sidebar-left: 0px;
}

[data-sidebar="visible"] {
	--toggle-left: 4px;
	--sidebar-left: -336px;
}

* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}

html {
	background: #363636;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
}

a,
a:visited {
	color: #EE983C;
	text-decoration: none;
}

a:hover {
	color: #FDB12D;
}

h1 {
	scroll-margin-top: 38px;
	color: #E7B477;
	text-align: center;
	border-left: 5px solid #C2A965;
	border-right: 5px solid #C2A965;
	border-top: 1px solid #C2A965;
	border-bottom: 1px solid #C2A965;
	background-color: #5d1515;
	margin-bottom: 0px;
	padding: 5px;
	position: relative;
	font-variant: small-caps;
}

h2 {
	color: #DADADA;
	text-align: center;
	margin: 4px 0px;
}

h3 {
	color: #875516;
	text-align: center;
	margin: 4px 0px;
}

body {
	color: rgb(230, 230, 210);
	margin: 0 0 20px;
	padding-bottom: 20px;
}

#contents {
	margin: auto;
	max-width: 800px;
	padding-top: 5px;
}

#disclaimer {
	margin: 30px auto 10px;
	max-width: 800px;
	font-size: 75%;
}

h2[id^="veryeasy"] {
	color: #00DA00
}

h2[id^="easy"] {
	color: #56C256
}

h2[id^="average"] {
	color: #A5B2C2
}

h2[id^="hard"] {
	color: #D96865
}

h2[id^="veryhard"] {
	color: #D81400
}

h3[id^="grindheavy"] {
	color: #00C6D8;
	font-size: 75%;
}

h3[id^="partiallybuyable"],
h3[id^="buyable"],
h3[id^="luckbased"] {
	color: #00C6D8;
	font-size: 75%;
	margin: 2px 0px;
}

em img,
li img {
	max-height: 18px;
	margin-bottom: -3px;
}

#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 40px;
	width: 100%;
	text-align: center;
	background: #292929;
	border-top: 1px solid black;
	padding-top: 4px;
	font-size: 80%;
}

#footer img {
	margin-bottom: -3px;
}

#navigation {
	position: fixed;
	left: var(--sidebar-left);
	top: 0px;
	height: 100vh;
	display: var(--sidebar-display);
	max-height: 100vh;
	overflow-y: scroll;
	background: rgb(40, 40, 40);
	padding-right: 10px;
	width: 336px;
	transition: all 0.2s linear;
	padding-bottom: 25px;
	z-index: 1;
}

#toggle {
	position: fixed;
	left: var(--toggle-left);
	top: 5px;
	cursor: pointer;
	transition: all 0.2s linear;
	font-size: 30px;
	padding-bottom: 20px;
	color: #ffff00;
	text-shadow: 2px 2px 4px rgb(0, 0, 0, 1);
	z-index: 9999;
}

#toggle:hover {
	color: #FFE28B
}

#togglecomplete {
	position: fixed;
	right: 5px;
	top: 5px;
	cursor: pointer;
	z-index: 9999;
	font-size: 75%;
}

#togglecomplete:hover {
	color: #FFE28B
}


.padtop{
	margin-top:26px;
}

.semismol {
	font-size: 65%;
}

.smol {
	font-size: 50%;
}

.smolcenter {
	font-size: 60%;
	text-align: center;
	margin: 0px;
}

.ggg,
.gggpad {
	color: #E7B477;
}

.compad,
.pad,
.gggpad {
	margin-bottom: 8px;
}

.com,
.compad,
.comstruck {
	color: rgb(230, 230, 210);
}

.req {
	color: #DC8515;
	font-size: 10px;
}

.struck,
.comstruck {
	text-decoration: line-through;
}

.div {
	color: rgb(200, 200, 180);
}

.div:before {
	content: "Card: ";
	color: rgb(230, 230, 210)
}

.center {
	margin: auto;
}

li {
	line-height: 120%;
}

.complete {
	position: absolute;
	right: 0;
	top: 0;
	cursor: hand;
	cursor: pointer;
	width: 48px;
	height: 48px;
}

div[data-complete="no"] {
	color: red;
}

div[data-complete="yes"] {
	color: rgb(0, 240, 0);
}

table {
	width: 140%;
	margin-left: -20%;
	font-size: 75%;
	padding: 0px;
	border-collapse: collapse;
	border: 2px solid black;
}

th {
	background-color: black;
	color: white;
	text-align: center;
}

td {
	border: 1px solid black;
}

td:nth-child(n+1) {
	width: 80px;
}

td:first-child {
	width: 120px;
	background-color: rgba(0, 0, 0, 0.2);
	border-right: 2px solid black;
}

td:last-child {
	border-left: 2px solid black;
}

td:empty {
	background-color: black;
}

tr:hover td {
	background-color: rgb(0, 60, 60)
}

code {
	color: #89bad2;
}

code.str {
	color: #D02316;
}

code.dex {
	color: #33C744;
}

code.int {
	color: #2A94AE;
}

#topbanner {
	text-align: center;
	background: #292929;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	z-index: 9999;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
}

#license {
	font-size: 8px;
}

#license img {
	margin-bottom: -1px;
}

h4 {
	margin-bottom: 8px;
	font-size: 125%;
}

h4+ul {
	margin: 0px;
}

code.mini {
	font-family: monospace;
	background-color: rgb(32, 32, 32);
	color: rgb(0, 200, 0);
	padding: 0px 2px;
	border-radius: 4px;
}

code.true {
	font-family: monospace;
	background-color: rgb(32, 32, 32);
	color: rgb(0, 200, 0);
	display: block;
	padding: 10px;
	border-radius: 4px;
	max-width: max-content;
	min-width: 360px;
	margin: auto;
}

.li-c a {
	color: #74CC3C;
}

.li-c a:hover {
	color: #74FF3C;
}

.li-c:after {
	content: "✓";
	color: green;
	float: right;
}

.li-i a {
	color: #DD4C4C;
}

.li-i a:hover {
	color: #FF6C6C;
}

.li-i:after {
	content: "✗";
	color: red;
	float: right;
}