body {
  background-color:rgb(32, 32, 32);
}

#header {
  height: 100px;
  background-color: rgb(18, 18, 18);
  margin: -8px;
  margin-bottom: 50px;
}

.logo {
  float: left;
  padding: 20px;
  padding-left: 50px
}

.header-button-left {
  float: left;
  height: 100px;
  width: 200px;
  background-color: rgb(18, 18, 18);
  border-style: none;
  color: rgb(200, 200, 200);
  font-size: 25px;
}


.header-button-left:hover {
  color:rgb(115, 115, 115);
  cursor: pointer;
}

.sign-up {
  float: right;
  border-style: none;
  margin-right: 50px;
  background-color: rgb(0, 174, 255);
  color: rgb(0, 0, 0);
  width: 100px;
  height: 50px;
  border-radius: 10px;
  margin-top: 25px;
}

.login {
  float: right;
  height: 100px;
  width: 100px;
  background-color: rgb(18, 18, 18);
  border-style: none;
  color: rgb(200, 200, 200);
  font-size: 15px;
}

.sign-up:hover {
  background-color: rgb(124, 213, 255);
  cursor: pointer;
}

.login:hover {
  color: rgb(115, 115, 115);
  cursor: pointer;
}

.normal-button {
  width: 500;
  height: 150;
  background-color:rgb(32, 32, 32);
  font-family: sans-serif;
  font-weight: 900;
  font-size: 35px;
  border-width: 5px;
  border-radius: 20px;
  border-style:solid;
  transition: background-color 0.5s ease;
  display: block;
  margin: 10px;
}

.normal-button:hover {
  cursor: pointer;
}

#practice {
  color: rgb(0, 143, 136);
  border-color: rgb(0, 143, 136);
}

#practice:hover {
  background-color: rgb(0, 63, 60);
}

#purchase-tokens {
  color: rgb(90, 0, 106);
  border-color: rgb(90, 0, 106);
}

#purchase-tokens:hover {
  background-color: rgb(25, 0, 30);
}

#duels {
  color: rgb(10, 10, 10);
  border-color: rgb(10, 10, 10);
}

#duels:hover {
  cursor:default;
}

#info {
  padding-top: 10;
}

.duels-info {
  font-size: 20px;
}

.num-highlight {
  color: rgb(255, 242, 0);
}


.leaderboards {
  color: rgb(120, 120, 120);
  font-family: sans-serif;
  font-weight: 900;
  font-size: 50px;
  padding: 50px;
}

.leaderboard-container {
  width: 300px;
  height: 500px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
}

.leaderboard-title {
  width: 300px;
  background-color: rgb(15, 15, 15);
  border-style:solid;
  border-width: 1px;
  border-color: rgb(100, 100, 100);
  color: rgb(150, 0, 0);
  font-family: sans-serif;
  font-weight: 900;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.light-slot {
  width: 300px;
  background-color: rgb(40, 40, 40);
  border-style:solid;
  border-top-style: none;
  border-bottom-style: none;
  border-width: 1px;
  border-color: rgb(100, 100, 100);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.dark-slot {
  width: 300px;
  background-color: rgb(25, 25, 25);
  border-style:solid;
  border-top-style: none;
  border-bottom-style: none;
  border-width: 1px;
  border-color: rgb(100, 100, 100);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.no-data {
  font-family: sans-serif;
  font-style: italic;
  color:rgb(200, 200, 200);
  padding: 10px;
  width: 300px;
}

.placement {
  font-family: sans-serif;
  color:rgb(0, 136, 11);
  font-size: 18px;
}

.username {
  padding: 10px;
  padding-left: 5px;
  padding-right: 5px;
  font-family: sans-serif;
  color:rgb(200, 200, 200);
  font-size: 18px;
  display: inline-block;
}

.value {
  padding: 10px;
  padding-left: 5px;
  padding-right: 5px;
  font-family: sans-serif;
  color:rgb(200, 207, 0);
  font-size: 18px;
  display: inline-block;
}