html, body {
	height: 100%;
	width: 100%;
}
body, button, input, select {
	font-size: 20px;
	font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
}
body {
	background-color: rgb(1,6,0);
	color: white;
	margin: 0;
	padding: 1%;
	height: 96%;
	width: 98%;
}

div.section-content {
	margin: 0 auto;
	max-width: 1200px;
}

h2 {
	width: 100%;
	margin: 0 0 16px 0;
	text-align: center;
	color: yellow;
	text-transform: uppercase;
	font-size: 1.6em;
}
ol {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
ol>li {
	box-sizing: border-box;
	border: 1px solid gray;
	border-radius: 5%;
	margin: 8px 2%;
	width: 26%;
  background: rgb(23,37,28);
  padding: 15px 4px;
  display: flex;
  flex-flow: column;
}
h5 {
	margin: 8px 0;
	color: rgb(183,255,168);
	font-size: 1.1em;
	display: flex;
	flex-flow: row;
	align-items: center;
}
img.hlp-class-icon {
	height: 2.1em;
	width: auto;
	margin: auto 1em;
}
img.hlp-class-icon-smaller {
	height: 1.2em;
	width: auto;
	margin: 0 .4em 0 0;
}
ul {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
ul>li {
	box-sizing: border-box;
	width: 50%;
	flex: 1 0 auto;
	padding: 0 0 0 .3em;
}
div.hlp-ability {
	margin: 16px 0;
	display: flex;
	flex-flow: column nowrap;
}
div.hlp-ability-basic {
	flex: 1 0 auto;
	height: 2.7em;
	display: flex;
	flex-flow: row nowrap;
	padding: 0 .3em;
}
img.hlp-ability-icon {
	height: 100%;
	width: auto;
	flex: 0 auto;
	margin-right: .5em;
	border: 2px ridge gray;
	box-sizing: border-box;
}
div.hlp-ability-description {
	flex: 1 0 auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
}
span.hlp-ability-name {
	color: rgb(207,255,189);
	font-weight: bold;
}
span.hlp-ability-cooldown {
	color: rgb(173,175,172);
	font-size: 75%;
}
p.hlp-ability-text {
	color: rgb(249,255,226);
	font-size: 80%;
	margin: 4px 0 0 0;
	padding: 1% .3em;
}
span.hlp-ability-cooldown::before {
	content: "⏱️";
}
li.hlp-stat-na {
	opacity: 0.68;
}
li.hlp-stat-hp::before {
	content: "💗";
}
li.hlp-stat-dmg::before {
	content: "⚔️";
}
li.hlp-stat-speed::before {
	content: "🥾";
}
li.hlp-stat-jumpspeed::before {
	content: "🦘";
}
li.hlp-stat-hpregen::before {
	content: "❤️‍🩹";
}
li.hlp-stat-atkspeed::before {
	content: "♻️";
}
li.hlp-stat-atkrange::before {
	content: "🔫";
}

div.emotes {
  margin: auto 2% 4px 2%;
  display: flex;
  flex-flow: row nowrap;
}
div.emotes-block {
  flex: 1 0 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
div.emotes-block small {
  color: silver;
  font-size: 60%;
}
div.emotes-block code {
  font-face: monospace;
  font-size: 99%;
  margin-top: 8px;
}
div.emote {
  align-self: flex-start;
  margin: 4px 0;
  display: flex;
  flex-flow: row nowrap;
  align-content: flex-start;
  justify-content: center;
}
div.emote a, div.emote a:visited, div.emote a:hover, div.emote a:active {
  color: rgb(253,255,117);
  font-weight: normal;
  font-size: 95%;
  text-decoration: none;
}
div.emote img {
  vertical-align: top;
}

@media all and (orientation:portrait) {
  ol>li {
    width: 46%;
  }
}