html {
	height: 100%;
	width: 100%;
}

body {
	background-color: white;
	color: black;
	font-family: Verdana;
	padding-bottom: 10px;
}

button {
	border: 1.5px outset #747474;
	border-radius: 2px;
	background-color: #EFEFEF;
	color: black;
	font-family: Verdana;
	padding: 3px 6px;
	margin: 2px 0;
}

button:hover {
	border-color: #212121;
	background-color: #E2E2E2;
}

button:active {
	border-style: inset;
	border-color: #929292;
	background-color: #F3F3F3;
}

@media (max-aspect-ratio: 1/1) {
	button {
		font-family: Verdana;
		padding: 6px 15px;
		margin: 4px 0;
	}
}

details {
	border: 1px solid black;
	padding: 5px 8px;
}
button.antibutton {
	background-color: #7F0000;
	color: red;
	border-color: #B00000;
}

button.antibutton:hover {
	background-color: #6E0000;
	border-color: #9D0000;
}

button.antibutton:active {
	background-color: #A10000;
	border-color: #CD0000;
}

#dim {
	background-color: #4C4C00;
	color: #B1B100;
	border-color: #DFDF00;
}

#dim:hover {
	background-color: #313100;
	border-color: #B2B200;
}

#dim:active {
	background-color: #6F6F00;
	border-color: yellow;
}

button.dmbutton {
	background-color: #0A0A0A;
	color: white;
	border-color: #B3B3B3;
}

button.dmbutton:hover {
	background-color: black;
	border-color: #9B9B9B;
}

button.dmbuton:active {
	background-color: #121212;
	border-color: #BFBFBF;
}

#achieveTable td {
	width: 120px;
	height: 120px;
	font-size: 12px;
	margin: 3px;
	border-radius: 10px;
	padding: 5px;
}

[tooltip] {
	position: relative;
	z-index: 2;
}

[tooltip]:before,
[tooltip]:after {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

[tooltip]:before {
	font-size: 12px;
	position: absolute;
	top: 10px;
	padding: 4px;
	width: 100px;
	background-color: rgb(0 0 0 / 60%);
	color: #fff;
	content: attr(tooltip);
	z-index: 4;
	text-align: center;
	left: calc(50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);
}

[tooltip]:hover:before {
	visibility: visible;
	opacity: 1;
	z-index: 5;
}