@font-face {font-family: Morpheus; src: url(/Fonts/MORPHEUS.TTF);}
@font-face {font-family: Folkard; src: url(/Fonts/folkard.ttf);}
@font-face {font-family: FrizQuat; src: url(/Fonts/FrizQuaT.ttf);}

body {background-color: black; background-image: url('/Images/WoWScrnShot_122925_221300.jpg'); background-attachment: fixed; background-position: top center; text-align: justify; color: #EEE; margin: 0; padding: 0; font-family: 'FrizQuat'; text-shadow: 0 0 5px black;}
.list {padding-left: 0.6em; text-indent: -0.6em; color: #B8F0FB; margin: 0 0 0 0;}
.list2 {padding-left: 1.2em; text-indent: -0.6em; color: #B8F0FB; margin: 0 0 0 0;}
.list3 {padding-left: 1.8em; text-indent: -0.6em; color: #B8F0FB; margin: 0 0 0 0;}

em {color: #27D1F4;}
strong {color: #89512998; -webkit-text-stroke: 0.05px #EFBF04; font-fariant: small-caps;}
right {text-align: right;}
hideMe {opacity: 0.3;}

a.primary:link {color: #F8EF00; text-decoration: none; border-left: solid 1px; padding: 4px 10px 4px 8px; position: relative;}
a.primary:visited {color: #F8EF00;}
a.primary:hover {color: #000; text-decoration: none; border-color: #F8EF00; background-color: #F8EF00;}
a.primary:active {color: #000; text-decoration: none; border-color: #F8EF00; background-color: #F8EF00;}
a.secondary:link {color: #43DAFE; text-decoration: none; border-left: solid 1px; padding: 4px 10px 4px 8px; position: relative;}
a.secondary:visited {color: #43DAFE;}
a.secondary:hover {color: #000; text-decoration: none; border-color: #43DAFE; background-color: #43DAFE;}
a.secondary:active {color: #000; text-decoration: none; border-color: #43DAFE; background-color: #43DAFE;}

ul {padding: 0 0 0 0.5em; counter-reset: item; color: #B8F0FB;}
ul li {padding: 0 0 0 0; list-style-type: none;}
ul li:before {display: inline-block; width: 1.0em; font-size: 1.0em; content: "-"; color: #43DAFE; text-shadow: 0 0 0.2em #43DAFE;}
ul ul {padding: 0 0 0 1.5em; counter-reset: item; color: #B8F0FB;}
ul ul li:before {display: inline-block; width: 1.0em; font-size: 1.0em; content: "-"; color: #43DAFE; text-shadow: 0 0 0.2em #43DAFE;}

ol {padding: 0 0 0 0.7em; counter-reset: item; color: #43DAFE; list-style-type: none;}
ol li {padding: 0 0 0 0; counter-increment: item;}
ol li:before {font-family: 'RajdhaniBody'; display: inline-block; width: 1.5em; font-size: 0.8em; font-weight: bold; content: counter(item) "."; color: #43DAFE; text-shadow: 0 0 0.2em #43DAFE;}

/*.page {justify-self: center; margin: 0 0.5em 0 0.5em; display: grid; grid-template-rows: repeat(4, auto-fit); grid-template-columns: repeat(1, minmax(10em, 1fr));}*/
/*.element {justify-self: center; display: grid; grid-template-rows: repeat(4, auto-fit); grid-template-columns: repeat(auto-fit, minmax(19em, 1fr)); grid-gap: 0.5em 2em;}*/

.power {border: 2px outset #999; -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); border-radius: 6px; corner-shape: bevel; padding: 6px; background: #000000C4; font-size: 11pt; margin: 8px 0 8px 0; color: white; text-align: left; min-width: 300px;}
.power h5 {font-size: 13pt; font-family: 'FrizQuat'; padding: 0; margin: 0; font-weight: normal;}
.powerUsed {border: 2px outset #99999955; -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); border-radius: 6px; corner-shape: bevel; padding: 6px; background: #00000084; font-size: 11pt; margin: 8px 0 8px 0; color: #FFFFFF55; text-align: left; min-width: 300px;}
.powerUsed h5 {font-size: 13pt; font-family: 'FrizQuat'; padding: 0; margin: 0; font-weight: normal;}
.powerUsed gold {opacity: 0.35;}
line {display: flex;}
left {flex: 1; display: flex;}
gold {color: gold;}
green {color: #52CC00;}

.statBox {border: 2px outset #999; -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); border-radius: 6px; corner-shape: bevel; padding: 6px; background: #000000C4; margin: 8px 0 8px 0; text-align: left; color: #FFFFFF; font-size: 10pt;}
.statBox p {margin: 0;}
.statBox h5 {font-size: 13pt; font-family: 'FrizQuat'; padding: 0; margin: 0; font-weight: normal;}

.mainbody {border-collapse: collapse; max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 4em;}
.mainbody tr td {padding: 8px; vertical-align: top;}
.statTable {border-collapse: collapse; font-size: 10pt;}
.statTable tr:nth-child(even) {background: #46464668;}
.statTable tr td {padding: 0 4px 0 4px;}
.skillTable {border-collapse: collapse; font-size: 10pt; width: 100%;}
.skillTable tr:nth-child(even) {background: #46464635;}
.skillTable tr td {padding: 0 4px 0 4px;}
.center {text-align: center;}
.right {text-align: right;}
.classSkill {color: gold;}

h1, h2, h3, h4 {font-family: 'Morpheus'; text-align: left; font-variant: small-caps; color: #EFBF04;}
h1 {font-family: 'Folkard'; font-variant: none; font-size: 36pt; -webkit-text-stroke: 0.05px #89512998; margin-bottom: -45px;}
h2 {margin-bottom: -15px;}
h3 {font-size: 1.3em; margin-bottom: -0.5em;}
h4 {font-size: 1.3em; margin-bottom: -0.5em; color: #AAA;}