html {
	background: #000;
	color: #ba9;
	font-family: "Economica", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	height: 100%;
}

body {
	align-items: center;
	display: flex;
	margin: 0;
	min-height: 100vh;
}

header, footer {
	align-items: center;
	background: #222;
	flex-shrink: 0;
}

header {
	font-weight: 700;
	height: 30px;
}

footer {
	height: 20px;
}

aside {
	background: #111;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 180px;
}

main {
	background: repeating-linear-gradient(
		45deg,
		rgba(0,0,0,0),
		rgba(0,0,0,0) 10px,
		rgba(102,85,34,0.1) 10px,
		rgba(102,85,34,0.1) 12px
	);
	border-left: 1px solid #652;
	border-right: 1px solid #652;
	flex: 1;
	flex-direction: column;
}

button {
	background: #222;
	border: none;
	border-radius: 8px;
	box-shadow: 0 1px 0 0 #888 inset, 0 0 0 1px #000, 0 -1px 0 0 #000 inset, 0 1px 2px 1px #000;
	color: #fff;
	cursor: pointer;
	font-family: "Economica", sans-serif;
	font-size: 16px;
	padding: 5px 10px;
	transition: 250ms ease-out;
}

button:hover {
	background: #111;
	box-shadow: 0 1px 0 0 #652 inset, 0 0 0 1px #000, 0 -1px 0 0 #000 inset, 0 1px 2px 1px #000;
}

button:active {
	background: #000;
}

.box {
	border: 1px solid #652;
	display: flex;
	flex-direction: column;
	height: 768px;
	margin: 0 auto;
	width: 1024px;
}

.content {
	background: #000;
	flex: 1;
}

.level, .race {
	flex: 1;
	justify-content: end;
}

.deity {
	align-items: center;
}

.bar-label {
	align-items: center;
	width: 22px;
}

.bar {
	flex: 1;
	height: 20px;
	position: relative;
}

.now, .max, .pct {
	position: absolute;
	top: 2px;
}

.now {
	left: 5px;
}

.max {
	right: 5px;
}

.pct {
	left: 0;
	margin-inline: auto;
	right: 0;
	width: fit-content;
}

.hp {
	background: #300;
	border: 1px solid #fcc;
	color: #fcc;
}

.hp-fill {
	background: #800;
}

.mp {
	background: #003;
	border: 1px solid #ccf;
	color: #ccf;
}

.mp-fill {
	background: #008;
}

.en {
	background: #222;
	border: 1px solid #eee;
	color: #eee;
}

.en-fill {
	background: #888;
}

.xp {
	background: #320;
	border: 1px solid #ffc;
	color: #ffc;
}

.xp-fill {
	background: #a80;
}

.aa {
	background: #033;
	border: 1px solid #cff;
	color: #cff;
}

.aa-fill {
	background: #088;
}

.stat-label {
	width: 50px;
}

.stat-value {
	align-items: center;
	flex: 1;
	justify-content: end;
}

.coin {
	border-radius: 50%;
	display: inline-block;
	height: 14px;
	width: 14px;
}

.pp {
	background: #ccc;
	border: 1px solid #fff;
}

.gp {
	background: #ba0;
	border: 1px solid #fd2;
}

.sp {
	background: #777;
	border: 1px solid #bbb;
}

.cp {
	background: #830;
	border: 1px solid #f60;
}

.wt {
	background: #310;
	border: 1px solid #fec;
	color: #fec;
}

.wt-fill {
	background: #c60;
}

.viewport {
	flex: 1;
}

.hotbar, .chat {
	flex-shrink: 0;
}

.hotbar {
	background: #000;
	border-top: 1px solid #652;
	border-bottom: 1px solid #652;
	height: 40px;
}

.chat {
	height: 190px;
}

.map {
	flex-wrap: wrap;
}

.map-cell {
	align-items: center;
	background: #444;
	height: 28px;
	justify-content: center;
	margin: 2px;
	width: 28px;
}

.zone-btn {
	width: 46px;
}

.buffs {
	flex: 1;
}

.buff {
	background: #666;
	border: 1px solid #fff;
	color: #fff;
	padding: 3px 5px;
}

.buff-value {
	align-items: center;
	flex: 1;
	justify-content: end;
}

.config {
	justify-content: center;
}

.flex {
	display: flex;
}

.bb-1 {
	border-bottom: 1px solid #652;
}

.bt-1 {
	border-top: 1px solid #652;
}

.f-16 {
	font-size: 16px;
}

.f-18 {
	font-size: 18px;
}

.mr-11 {
	margin-right: 11px;
}

.mt-3 {
	margin-top: 3px;
}

.mt-5 {
	margin-top: 5px;
}

.mt-8 {
	margin-top: 8px;
}

.mt-9 {
	margin-top: 9px;
}

.mt-10 {
	margin-top: 10px;
}

.p-10 {
	padding: 10px;
}

.pe-15 {
	padding-right: 15px;
}