.topNav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.leftNav {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.rightNav {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.discordButton {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #7289da;
}

.active {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  font-weight: bold;
}

.leftNav:hover {
  background-color: #222222;
  color: white;
}
.rightNav:hover {
  background-color: #222222;
  color: white;
}

.discordButton:hover {
  background-color: #5865f2;
  color: white;
}

.active:hover {
  background-color: #222222;
  color: white;
}

.homeImage {
  position: relative;
}

.banner{
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
#banner1{
  width: 100%;
  position: absolute;
  z-index: 1;
}
#banner2{
  width: 100%;
  position: absolute;
  z-index: 2;
}
#banner3{
  width: 100%;
  position: absolute;
  z-index: 3;
}
#banner4{
  width: 100%;
  position: absolute;
  z-index: 4;
}



.welcomeTxt {
  position: absolute;
  bottom: 10px;
  color: white;
  font-family: Verdana;
  z-index: 5;
}

.containerIntro {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.logoLeft {
  width: 50px;
  margin-right: 10px;
}

.logoRight {
  width: 50px;
  margin-left: 10px;
}

.introTitle {
  text-align: center;
  margin-top: 25px;
}

.interiorText {
  margin-left: 10px;
  margin-right: 10px;
}

.serverLogo {
  width: 75px;
}




.containerImageLeft {
  width: 390px;
  background: #111;
  float: left;
}
.containerTextRight {
  width: 390px;
  background: #111;
  float: right;
  height: 227px;
}
.containerImageRight {
  width: 390px;
  background: white;
  float: right;
}
.containerTextLeft {
  width: 390px;
  background: white;
  float: left;
  height: 227px;
}



.interiorTextRight {
  color: white;
  margin-left: 10px;
  margin-right: 10px;
}
.interiorTitleRight {
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}
.interiorTextLeft {
  color: #111;
  margin-left: 10px;
  margin-right: 10px;
}
.interiorTitleLeft {
  color: #111;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

.interiorButton {
  font-weight: bold;
  background-color: #900C3F;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 12px;
}
.interiorButton:hover {
  background-color: #800000;
  color: white;
  box-shadow: 2px 2px black;
}

.interiorImage {
  width: 100%;
  max-width: 390px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.containerBlack {
  width: 100%;
  margin: 0 auto;
  background-color: #111;
}

.containerWhite {
  width: 100%;
  margin: 0 auto;
  background-color: white;
}

/* rules page */
.ruleTitles {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  font-size: 19px;
}
.ruleIcon {
  width: 35px;
  margin-right: 5px;
}
.ruleItem {
  margin-left: 40px;
  margin-right: 20px;
  margin-top: 0px;
}
.failureNote {
  margin-bottom: 0px;
  margin-top: 25px;
  margin-left: 10px;
  font-weight: bold;
}
.bottomNav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

/* departments page */
.allDepartments {
  max-width: 800px;
  margin: 0 auto;
}
.deptButton {
  height: 50px;
  width: 280px;
  margin-top: 35px;
}
.marginBox {
  height: 35px;
}
.deptTitle {
  text-align: center;
  font-size: 32px;
}
.deptSection {
  font-size: 22px;
  margin-left: 10px;
  margin-right: 10px;
}
.deptText {
  margin-left: 10px;
  margin-right: 10px;
}
.deptLeader {
  text-decoration: none;
  font-size: 20px;
  margin-left: 12px;
  color:#222222;
  font-weight: 500;
}
.deptLeader:hover {
  color:#800000;
  font-weight: bold;
}
.leaderHead {
  width: 30px;
  margin-right: 5px;
}
.memListDept {
  /* background-color: lightblue; */
  width: 266px;
  float: left;
}
.deptMember {
  margin-left: 10px;
  margin-bottom: 5px;
}
.allList {
  background-color: white;
}





/* houses page */
.allHouse {
  max-width: 1000px;
  margin: 0 auto;
  height: 500px;
}
.introHouse {
  margin-bottom: 0;
}
.house {
  width: 250px;
  float: left;
  overflow: auto;
}
.houseTitles {
  margin-left: 5px;
  color: black;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
}
.statement {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  font-style: italic;
}
.houseInfo {
  display: none;
}
.houseInfoText {
  font-weight: bolder;
  font-size: 32px;
  text-align: center;
}
.houseInfoLeft {
  width: 500px;
  float: left;
}
.houseInfoRight {
  width: 500px;
  float: left;
}
.index {
  font-size: 25px;
  margin-left: 10px;
}
.loreText {
  margin-left: 10px;
}
.houseImage {
  margin-left: 0px;
  width: 500px;
}
.indexMem {
  margin-left: 130px;
  font-size: 25px;
}
.houseMember {
  margin-left: 130px;
  margin-top: 5px;
}
.playerHead {
  width: 25px;
}
.playerLink {
  text-decoration: none;
  color: #222222;
  font-size: 16px;
  font-weight: 500;
}
.playerLink:hover {
  color: #800000;
  font-weight: bold;
  font-size: 16px;
}

/* members page */
#allMembers {
  width: 800px;
  margin: 0 auto;
  margin-bottom: 15px;
  min-height: 500px;
}
#memberBanner {
  z-index: 1;
}
#memberTitle {
  position: absolute;
  color: white;
  text-align: center; 
  font-size: 40px;
}
.memberCategory {
  text-align: center;
  margin-bottom: 20px;
}

.player {
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
}
.headpic{
  width:40px;
  height:40px;
  float: left;
}
.playername{
  margin: 0 auto;
  height: 40px;
  padding: 7px 15px 7px 15px;
  float: right;
  text-decoration: none;
  color: black;
  background-color: #e5e4e2;
}
.playername:hover {
  background-color: gainsboro;
  color: black;
}

nav ul{
  text-align: center;
  padding: 0;
}
nav li{
  display: inline-block;
  margin: 20px 0px 20px 0px;
}
.profileInfoCat {
  font-weight: bold;
  float: left;
  margin-right: 6px;
  margin-Left: 10px;
}
.profileDep {
  width: 160px;
  float: left;
}


form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #900C3F;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #800000;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}











.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: #222222;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  /* margin-left: 517px; */
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #222222;
  color: white;
}

.show {
  display: block;
}