/*warcraft*/

:root {
 --style-minimum-width: 430px;
 --style-maximum-width: 1400px;
 --theme-font-primary: Segoe UI, sans-serif;
 --theme-font-secondary: Segoe UI, sans-serif;
 --theme-font-tertiary: Arial, sans-serif;
 --theme-font-monospace: Consolas, serif;
 --theme-color-primary: Gold;
 --theme-color-secondary: #F0F9FF;
 --theme-color-tertiary: #E0F2FE;
 --theme-color-bright: #FE1;
 --theme-color-dark: #000;
 --theme-lines: 2px;
 --font-color: #FFFEFC;
 --title-align: center;
 --title-weight: bold;
 --header-align: left;
 --header-weight: bold;
 --body-background-color: #0A0A0D;
 --body-background-url: url('/system/img/body-alt.jpg');
 --box-padding: 2rem;
 --box-background-color: #072F4A;
 --box-radius: 0.75rem;
}

@font-face {
 font-family: Lifecraft;
 font-style: normal;
 font-weight: 400;
 src: url('/system/lib/Lifecraft.ttf');
}

@font-face{
  font-family:"Segoe UI";
  src: url("/system/lib/segoeui-normal.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Segoe UI";
  src: url("/system/lib/segoeui-italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:"Segoe UI";
  src: url("/system/lib/segoeui-bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Segoe UI";
  src: url("/system/lib/segoeui-bolditalic.ttf") format("truetype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

body > * { background: var(--body-background-color) }

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: max(500px,98vh);
  padding: max(10px,20vh) 0;
  background: transparent var(--body-background-url) no-repeat top center / cover;
}

#logo {
  width: 85vw;
  max-width: 1000px;
}

#servers {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  margin: 50px 0 0;
}

#realmlist {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 50px 0 0;
}

#realmlist .container {
  display: flex;
  gap: 1rem;
  border: 2px solid var(--theme-color-primary);
  padding: 1rem 1rem 1.2rem;
  border-radius: 8px;
  background-color: var(--box-background-color);
}

@media (max-width: 800px) {
  #servers { gap: 1rem }
}

#characters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 50px;
}

#realm, #world {
  font-size: 1.25rem;
  text-transform: capitalize;
}

h1 { color: white }
h2,h3,h4,h5 { color: var(--theme-color-primary) }
h2 {
  padding-bottom: 15px;
  border-bottom: 2px solid Gold;
  margin-bottom: 2rem;
}
h2 span { color: inherit }
@media (max-width: 600px) {
  h2 { clear: right }
}


h3 { border: 0 }

input, select, option, button { width: 100%; }
input, select, option, button, .code, blockquote {
  background: rgba(255,255,255,.1);
  border-color: White
}
input::placeholder { color: #FFF }
input:focus { border-color: Gold }
input:not(:placeholder-shown) { border-color: Gold }

ul.square li::before { color: #FFF }

a.linkbutton, span.linkbutton {
  float: right;
  background: rgba(0,0,0,.25);
  color: #FFF;
  padding: 5px 10px;
  border-radius: 3px;
  font-weight: bold;
}
a.linkbutton:hover, span.linkbutton:hover {
  background: #ffd700;
  color: #0a0a0d;
  cursor: pointer;
}

a, .link {
 color: var(--theme-color-secondary);
 border-color: var(--theme-color-primary);
}

a:hover, a.selected, a.selected img {
  color: var(--theme-color-primary);
  border-color: var(--theme-color-secondary);
}

img[src*="classname"] {
  opacity: 0;
  display: none !important;
}

#recaptcha, #status { display: none }

div.box {
  box-shadow: 0 1rem .5rem -.5rem rgba(255,215,0,.2);
  border-bottom: var(--theme-lines) solid var(--theme-color-primary)
}

div.hero {
  border-top: 5px solid #451d02;
  border-bottom: 5px solid #451d02;
  border-radius: 0;
  padding: 4vw;
  box-shadow: none;
  background-color: #130903;
}

#body {
 grid-gap: max(50px,5vw);
 margin: max(50px,5vw) auto;
 width: 85vw;
}

.grid {
  width: 100%;
  max-width: 1800px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
  margin: 0 auto;
}

.grid > div {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.grid > div > img {
  width: 125px;
  height: 125px;
  margin: 5px 0 0;
}

@media (max-width: 1200px) {
  .grid { grid-template-columns: 1fr; }
  .grid > div > img {
	width: 60px;
	height: 60px;
  }
}

.icon, .bigicon {
 height: 2em;
 border-radius: 7px;
 vertical-align: middle;
}
.icon.small { height: .9rem }

.bigicon {
 float: left;
 margin-right: 1em;
}

.character {
 display: flex;
 border: 2px solid #FFF;
 padding: .5rem;
 text-transform: capitalize;
 font-size: .5rem;
 font-family: var(--theme-font-secondary);
 white-space: nowrap;
 border-radius: 0.5rem;
}

.playericon {
 height: 3.5rem;
 width: 3.5rem;
 border: 2px solid #666;
 border-radius: 0.5rem;
 margin-right: .5rem;
}

.name {
 font-size: 1.25rem;
 font-family: var(--theme-font-primary);
 font-weight: bold;
}
.level {
 font-size: 0.8rem;
 font-family: var(--theme-color-secondary);
}

.brightbox { background: #065A86 }
.brightbox:hover { background: #016AA3 }
.darkbox { background: rgba(0,0,0,.2) }
.darkbox:hover { background: rgba(0,0,0,.33) }

.brightbox p, .brightbox li { padding-bottom: 0 }

.brightbox a:hover, .brightbox a.selected, .brightbox a.selected img {
 color: var(--theme-color-tertiary);
}

.brightbox a, .darkbox a {
 color: #F0F9FF;
 border: 0;
 text-decoration: underline;
}
.brightbox a:hover, .darkbox a:hover {
  cursor: pointer;
  color: Gold;
}

.flexform {	
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
}
.flexform .form-control { width: calc(50% - .5rem) }

@media (max-width: 600px) {
  .flexform .form-control { width: 100% }
}

#formLogin, #formRecover { display: none }

.classmenu {
 display: grid;
 gap: 1rem;
 grid-template-columns: repeat(10,1fr);
}
@media (max-width: 800px) {
  .classmenu { grid-template-columns: repeat(5,1fr) }
}


.classmenu a {
 border: 0;
 font-size: 0;
}

.classmenu img {
 width: 100%;
 border: 3px solid #444;
 border-radius: 10px;
}

.classmenu img:hover {
  border-color: var(--theme-color-primary);
  cursor: pointer;
}

.deathknight { color: #C41F3B }
a.selected .deathknight, .deathknight:hover { border-color: #C41F3B !important }
.deathknight-bg { background-color: rgba(196, 31, 59, 0.5) }
.character.deathknight-bg { border: 2px solid #C41F3B }

.druid { color: #FF7D0A }
a.selected .druid, .druid:hover { border-color: #FF7D0A !important }
.druid-bg { background-color: rgba(255, 125, 10, 0.5) }
.character.druid-bg { border: 2px solid #FF7D0A }

.hunter { color: #ABD473 }
a.selected .hunter, .hunter:hover { border-color: #ABD473 !important }
.hunter-bg { background-color: rgba(171, 212, 115, 0.5) }
.character.hunter-bg { border: 2px solid #ABD473 }

.mage { color: #69CCF0 }
a.selected .mage, .mage:hover { border-color: #69CCF0 !important }
.mage-bg { background-color: rgba(105, 204, 240, 0.5) }
.character.mage-bg { border: 2px solid #69CCF0 }

.paladin { color: #F58CBA }
a.selected .paladin, .paladin:hover { border-color: #F58CBA !important }
.paladin-bg { background-color: rgba(245, 140, 186, 0.5) }
.character.paladin-bg { border: 2px solid #F58CBA }

.priest { color: #FFFFFF }
a.selected .priest, .priest:hover { border-color: #FFFFFF !important }
.priest-bg { background-color: rgba(255, 255, 255, 0.5) }
.character.priest-bg { border: 2px solid #FFFFFF }

.rogue { color: #FFF569 }
a.selected .rogue, .rogue:hover { border-color: #FFF569 !important }
.rogue-bg { background-color: rgba(255, 245, 105, 0.5) }
.character.rogue-bg { border: 2px solid #FFF569 }

.shaman { color: #0070DE }
a.selected .shaman, .shaman:hover { border-color: #0070DE !important }
.shaman-bg { background-color: rgba(0, 112, 222, 0.5) }
.character.shaman-bg { border: 2px solid #0070DE }

.warlock { color: #9482C9 }
a.selected .warlock, .warlock:hover { border-color: #9482C9 !important }
.warlock-bg { background-color: rgba(148, 130, 201, 0.5) }
.character.warlock-bg { border: 2px solid #9482C9 }

.warrior { color: #C79C6E }
a.selected .warrior, .warrior:hover { border-color: #C79C6E !important }
.warrior-bg { background-color: rgba(199, 156, 110, 0.5) }
.character.warrior-bg { border: 2px solid #C79C6E }

.online, .offline { text-transform: capitalize }
.online { color: #7BD900 }
.offline { color: #CA0000 }
img.offline { animation: blink 3s infinite }
img.online { animation: blinkLinear 3s infinite }

.help { display: none }
.eluna { display: none }
.toggle_eluna, .toggle_help { color: var(--theme-color-primary) }
.toggle_eluna:hover, .toggle_help:hover { color: var(--theme-color-bright) }

@keyframes blink {
 0%, 100% { opacity: 1 }
 33.333% { opacity: .25 }
}
@keyframes blinkLinear {
 0% { opacity: 1 }
 50% { opacity: .75 }
 100% { opacity: 1 }
}