body {
	color: #858585;
	background-color: #1c1c1c;
	font-family: system-ui;
	font-size: 130%;
	cursor: default;
	margin-top: -16px;
}

p {
	position: relative;
	color: floralwhite;
	background: linear-gradient(190deg, #232c97, transparent);
	font-variant: oldstyle-nums;
	top: -22px;
	height: 90px;
	padding-top: 10px;
	padding-left: 10px;
	margin-bottom: -48px;
}

p1 {
	display: block;
	position: relative;
	color: floralwhite;
	background: linear-gradient(to bottom, maroon, #c30000);
	font-variant: oldstyle-nums;
	text-align: center;
	width: 100%;
	height: 45px;
	top: -24px;
	padding-top: 15px;
	border-radius: 0 0 15px 15px;
	cursor: pointer;
	z-index: 2;
}

p2 {
	float: right;
	font-size: medium;
	opacity: 50%;
}

p3 {
	color: chocolate;
}

p4 {
	color: #f8f8f8;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}
p4:hover {
	color: #5092ff;
}

p5 {
	font-size: medium;
	text-align: center;
	color: lightgray;
	top: 13px;
	display: block;
	position: relative;
	font-style: italic;
}

p6 {
	color: #f8f8f8;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}
p6:hover {
	color: #f8312f;
}

h1 {
	margin: 0;
}

h3 {
	color: #c5c5c5;
	background-color: #333;
	padding: 10px;
}

h4 {
	color: #c5c5c5;
	background-color: #333;
	padding: 10px;
}

a {
	color: #f8f8f8;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}
a:hover {
	color: darkorange;
}

hr {
	border: none;
	height: 1px;
	background-color: darkslategray;
}

i {
	opacity: 20%;
}

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}

#bottomright {
	position: fixed;
	background: linear-gradient(270deg, black, transparent);
	text-align: right;
	width: 100%;
	bottom: 0px;
	right: 0px;
	padding: 5px;
	opacity: 0%;
	transition: opacity 0.3s ease-in-out;
}
#bottomright:hover {
	opacity: 99%;
}

#DebugToggle {
	color: #f8f8f8;
	transition: color 0.3s ease-in-out;
}
#DebugToggle:hover {
	color: lawngreen;
}

.container {
	display: flex;
}

.deck {
	flex: 1;
	margin-bottom: 10px;
	padding: 10px;
}

.deck h2 {
	color: #c5c5c5;
	background-color: #333;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 15px 15px 0 0;
}

.divclass {
	display: inline-table;
	background-color: firebrick;
	text-align: center;
	padding: 10px;
	border-style: solid;
	border-color: black;
}

.divExraClass {
	background: linear-gradient(to bottom, #b11702, #cc4900);
}

.pExtra {
	background: linear-gradient(0deg, #b11702, #8c3535) !important;
}

.ToggleforDebug {
	display: block;
	position: relative;
	font-family: monospace;
	color: deepskyblue;
	background: linear-gradient(180deg, black, #333);
	top: -34px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 0 0 10px 10px;
	max-height: 150px;
	overflow: hidden;
}

.t40title {
	display: block;
	position: relative;
	background: linear-gradient(0deg, maroon, #8c3535);
	top: -24px;
	height: 35px;
}

.tiptekst {
	position: absolute;
	font-size: 14px;
	font-variant: small-caps;
	left: 25%;
	right: 25%;
	bottom: 42px;
}

.history {
	position: static;
    width: calc(100% - 20px);
    color: rgb(221, 221, 221);
    font-size: 12px;
    margin: 10px;
    margin-top: -70px;
}

.history h3 {
	margin-bottom: 0px;
    border-radius: 15px 15px 0 0;
}

.history h4 {
	position: relative;
	top: -16px;
	border-radius: 0 0 15px 15px;
}

.history table {
    width: 100%;
    border-collapse: collapse;
}

.history th,
.history td {
    padding: 3px 6px;
    text-align: left;
}

.history tr:nth-child(even) {
    background: rgba(255,255,255,0.03);
}

.zoeken {
    position: static;
    margin-top: -30px;
    color: rgb(221, 221, 221);
	font-size: medium;
}

.zoeken h3 {
	padding-left: 10px;
	margin-bottom: 0px;
    border-radius: 15px 15px 0 0;
	font-size: medium;
}

.zoeken h4 {
	position: relative;
	top: -28px;
	border-radius: 0 0 15px 15px;
}

.zoeksoorten {
	text-align: center;
	font-size: medium;
    background: linear-gradient(0deg, #010623, #000000);
    height: 35px;
    padding-top: 8px;
	opacity: 0.5;
	transition: opacity 0.3s ease-in-out;
}
.zoeksoorten:hover {
	opacity: 0.99;
}