@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap");

html {

}

body {
      background-image: url("/static/images/BattleBN3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topSpacer {
  margin-top: 25%;
}

.customField {
  background-color: #201c1c;
  padding: 1em;
  border-radius: 5px;
  border: 1px solid #FFF;
}

.chatMessageStyle1 {
  background-color: #FFF;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 7px 10px;
}
.chatPosterStyle1 {
  background-color: #FFF;
  text-align: left;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right:1px solid #000;
  padding: 7px 10px;
}

.meChatMessageStyle1 {
  background-color: #FFF;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 7px 10px;
}
.meChatPosterStyle1 {
  background-color: #FFF;
  text-align: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left:1px solid #000;
  padding: 7px 10px;
}


.chatMessageStyle2 {
  background-color: #100f0f;
  color: gold;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 7px 10px;
}
.chatPosterStyle2 {
  background-color: #100f0f;
  color: gold;
  text-align: left;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right:1px solid gold;
  padding: 7px 10px;
}

.meChatMessageStyle2 {
  background-color: #100f0f;
  color: gold;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 7px 10px;
}
.meChatPosterStyle2 {
  background-color: #100f0f;
  color: gold;
  text-align: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left:1px solid gold;
  padding: 7px 10px;
}

.chatMessageStyle3 {
  background-color: #100f0f;
  color: #d70000;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 9px 10px;
}
.chatPosterStyle3 {
  background-color: #100f0f;
  color: #d70000;
  text-align: left;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right:1px solid red;
  padding: 9px 10px;
}

.meChatMessageStyle3 {
  background-color: #100f0f;
  color: #d70000;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 9px 10px;
}
.meChatPosterStyle3 {
  background-color: #100f0f;
  color: #d70000;
  text-align: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left:1px solid red;
  padding: 9px 10px;
}

.chatMessageStyle4 {
  background-color: #2a0000;
  color: gold;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 9px 10px;
}
.chatPosterStyle4 {
  background-color: #2a0000;
  color: gold;
  text-align: left;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right:1px solid red;
  padding: 9px 10px;
}

.meChatMessageStyle4 {
  background-color: #2a0000;
  color: gold;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 9px 10px;
}
.meChatPosterStyle4 {
  background-color: #2a0000;
  color: gold;
  text-align: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left:1px solid red;
  padding: 9px 10px;
}


.chatMessageStyle5 {
  background-color: #31466a;
  color: #cbcbcb;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 9px 10px;
}
.chatPosterStyle5 {
  background-color: #31466a;
  color: #cbcbcb;
  text-align: left;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right:1px solid #cbcbcb;
  padding: 9px 10px;
}
.meChatMessageStyle5 {
  background-color: #31466a;
  color: #cbcbcb;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 9px 10px;
}
.meChatPosterStyle5 {
  background-color: #31466a;
  color: #cbcbcb;
  text-align: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left:1px solid #cbcbcb;
  padding: 9px 10px;
}



/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #5c5c5c #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #5c5c5c;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }