body {
  text-align: center;
  background-color: #362c36;
  color: #f7f6f0;
  font: 100% Courier New, Courier, Verdana;
}

table {
  margin: auto;
  border-collapse: collapse;
  border: 1px solid #f7f6f0;
}
table th {
  background-color: #4c3a6e;
  font-size: 110%;
  padding: 5px 10px;
}
table td,
table th {
  border: 1px solid #f7f6f0;
}

table td {
  vertical-align: bottom;
}
table tr:nth-child(2n) {
  background-color: #8e8297;
}
table tr:nth-child(odd) {
  background-color: #4d4c59;
}
table tr:hover {
  background-color: #abaac9;
}
table a {
  float: left;
}
.table-list {
  counter-reset: serial-number;
}
.table-list td:first-child:before {
  counter-increment: serial-number;
  content: counter(serial-number);
}
.backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.menu-button {
  padding: 20px;
  margin-top: 30px;
  transition: all 0.4s ease;
}
.menu-button a {
  padding: 20px;
  color: #99b5e2;
  font-size: 1.2em;
  text-decoration: none;
  background-color: #1c458b;
  font-family: "Press Start 2P";

  box-shadow: -7px 7px 4px 4px #99a5e2;
}
.menu-button a:hover {
  padding: 20px;
  color: #cddbf1;
  text-decoration: none;
  background-color: #3265ba;

  box-shadow: 0px 2px 2px 2px #99a5e2;
}
