body
{
	font-family: 'Exo 2', sans-serif;
	margin: 0;
	color: #b1b1b8;
	background-color: black;
}

.minecraft
{
	font-family: minecraft;
}

h2
{
	margin: 1em 0 0.5em;
	font-size: 2em;
	border-bottom: 1px solid #223;
}

h3
{
	border-bottom: 1px solid #223;
	padding-bottom: 4px;
}

footer
{
	text-align: center;
	padding: 1em;
	border-top: 1px solid #223;
}

main
{
	background: linear-gradient(to bottom, #06070c, transparent);
}

header
{
	background-color: black;
	border-bottom: 1px solid #223;
	padding: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

a
{
	text-decoration: none;
	color: #f5cb1d;
	cursor: pointer;
}

a:hover
{
	color: white;
	text-decoration: underline;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#leftbutton, #rightbutton
{
	font-size: 6em;
	text-decoration: none;
	color: #fffa;
	text-shadow: 0 0 4px black;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition-duration: 0.3s;
	padding: 4px;
}

#leftbutton
{
	left: 0;
}

#rightbutton
{
	right: 0;
}

#leftbutton:hover, #rightbutton:hover
{
	padding: 4px 12px;
	color: white;
}

.tabs
{
	display: flex;
	margin-bottom: 1em;
	border-bottom: 1px solid #223;
}

.tabs input[type=radio]
{
	display: none;
}

.tabs label
{
	cursor: pointer;
	padding: 1em;
	width: 5em;
	text-align: center;
}

.tabs input[type=radio]:checked + label
{
	background: #223;
	color: white;
	font-weight: bold;
}

input[type=text], input[type=password], input[type=email], input[type=number]
{
	background-color: #112;
	color: white;
	border: 1px solid #223;
}

input[type=submit]
{
	border: none;
	padding: 1em 2em;
	font-weight: bold;
	background-color: #A0522D;
	border-color: #A0522D;
}

input[type=submit]:hover
{
    background-color: #8B4513;
	border-color: #8B4513;
	cursor: pointer;
}

input[type=button]
{
	border-radius: 5px;
	height: 30px;
	background-color: #A0522D;
	border-color: #A0522D;

}

input[type=button]:hover
{
    background-color: #8B4513;
	border-color: #8B4513;
	cursor: pointer;
}

textarea
{
	width: 100%;
	height: 8em;
	/* resize: none; */
	background-color: #112;
	color: white;
	border: 1px solid #223;
}

::-webkit-input-placeholder { /* Chrome */
  color: #808080;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #808080;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #808080;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: #808080;
  opacity: 1;
}

.transparent
{
	background-color: transparent;
	border: transparent;
	cursor: pointer;
	overflow: hidden;
	outline:none;
}

.pnjtableGOLD td
{
	background-color: #c27c42;
	border: 2px #7e512b solid;
	padding-right : 5px;
	padding-left : 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 10px;
}

.pnjtableGOLD
{
	padding : 10px;
	border: 2px #ac8e15 solid;
	background-color: #f5cb1d;
	border-radius: 10px;
}

.pnjtableSILVER td
{
	background-color: #c27c42;
	border: 2px #7e512b solid;
	padding-right : 5px;
	padding-left : 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 10px;
}

.pnjtableSILVER
{
	padding : 10px;
	border: 2px #808080 solid;
	background-color: #C0C0C0;
	border-radius: 10px;
}

.imghover
{
	box-shadow: 0px 0px 20px black;
	transition: box-shadow 0.5s;
}

.imghover:hover
{
	box-shadow: 0px 0px 40px black;
}

.closebtn
{
    color: black;
    cursor: pointer;
}

.closebtn:hover
{
    color: white;
}

.bgchar td, .bgchar th
{
	background-image:
	repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	repeating-linear-gradient(60deg, rgba(225,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	linear-gradient(60deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
	linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 70px 120px;
	border: 1px solid black;
}

.blink:hover
{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  cursor : pointer;
}

.textover
{
  position: absolute;
  bottom: 7%;
  right: 3%;
  font-size: 13px;
  font-weight: bold;

}

.ping
{
  position: absolute;
  top: 7%;
  right: 3%;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: bold;
}

.addtable
{
	width: 100%; border-collapse: collapse;
}

.addtable td
{
	text-align: left;
	padding-bottom: 4px;
}

.tablelist
{
	border-collapse: collapse;
	width: 100%;
}

.tablelist tr
{
	border: 1px solid #223;
}

.tablelist th
{
	padding: 5px;
	background-color: black;
}

.tablelist td
{
	padding: 5px;
	background-color: #112;
}

img
{
	border-radius: 4px;
	display: block;
}

fieldset { border: 1px solid #223; font-family: monospace; margin-bottom: 1.5em; padding: 2em 1em; font-weight: normal; }
legend { font-family: 'Exo 2', sans-serif; font-size: 1.2em; font-weight: bold; }

.info { color: #f2f2f2; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #223; margin-bottom: 0.25em; }

.platformbutton { display: flex; justify-content: center; align-items: center; background: #431; border-radius: 4px; flex: 1; padding: 0.5em; gap: 0.5em; }

/* probably rename to charbutton */
.subbutton { position: relative; }
.subbutton img { width: 100%; }
.subbutton div { text-decoration: inherit; text-decoration-thickness: 2px; position: absolute; right: 3px; bottom: 0px; text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black; }
.subbutton.selected { filter: grayscale(100%); }

.glassbutton { backdrop-filter: blur(5px); background-color: #06070cbb; padding: 0.5em; color: #b1b1b8; display: flex; align-items: center; border-radius: 4px; gap: 0.5em; }

/* probably rename to gallery */
.flex-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5em; }

.flex-mobile { display: flex; }

@media only screen and (max-width: 720px) {
	.flex-mobile { flex-direction: column; }
}