@font-face {
	font-family: FrizQuadrata;
	src: url("FrizQuadrataStdMedium.otf");
}

body {
	background-image: url("bgres.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	font-family: FrizQuadrata;
	overflow: auto;
}

a, a:active, a:hover {
	color: #ffffff;
	text-decoration: none;
}

h1 {
	text-align: center;
	text-shadow: 1px 1px #000000;
}

#banner {
	font-size: 3vw;
	margin-left: 37%;
	margin-top: 0.5%;
	position: absolute;
	text-shadow: 1px 1px #000000;
}

#chat {
	background-color: rgba(0, 0, 0, 0.4);
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	font-size: 1vw;
	height: 72%;
	margin-left: 21.2%;
	margin-top: 11%;
	overflow: auto;
	padding: 3%;
	padding-bottom: 1%;
	padding-top: 0;
	position: absolute;
	text-shadow: 0.5px 0.5px #000000;
	width: 50%;
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;

}

#chat::-webkit-scrollbar {
  width: 11px;
}
#chat {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
#chat::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
#chat::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}


#menuAudio {
        background-color: rgba(0, 0, 0, 0.4);
        border: 2px solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
	display: inline;
	font-size: 1.5vw;
	height: 6%;
	margin-left: 49.6%;
	margin-top: 5%;
	padding-bottom: 1%;
	padding-top: 1%;
	position: absolute;
	text-align: center;
	width: 25%;
}

#menuChat {
        background-color: rgba(0, 0, 0, 0.4);
        border: 2px solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
	font-size: 1.5vw;
	height: 6%;
        margin-left: 23.6%;
	margin-top: 5%;
	padding-bottom: 1%;
	padding-top: 1%;
	position: absolute;
	text-align: center;
	width: 25%;

}


/* CHAT COLORS */

.channel {
	color: #d9bf8b;
}

.event {
	color: #f37709;
}

.guild {
	color: #27be2a;
}

.party {
	color: #5a5b8c;
}

.system {
	color: #e6e615;
}

.whisper {
	color: #c942db;
}

.yell {
	color: #9e292d;
}

/* CLASS COLORS */

.druid {
	color: #de6e22;
}

.hunter {
	color: #9fc16e;
}

.mage {
	color: #44bad9;
}

.paladin {
	color: #c982a2;
}

.priest {
	color: #e7e6e5;
}

.rogue {
	color: #dacf61;
}

.shaman {
	color: #1271d5;
}

.warlock {
	color: #6e68b3;
}

.warrior {
	color: #9e7c5a;
}