html {
  background-color: rgb(26, 5, 162);
}

body{
  display: flex;
  flex-direction: column;
  overflow-x: none;
  overflow-y: none;
  padding: 0;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  height: 25vh;
  background-color: rgb(26, 5, 162);
  border-top: 5px solid #031127;
}

#header_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 120px;
  background-color: rgb(143, 1, 119);
  border: 8px outset rgb(246, 125, 49);
  border-radius: 20px;
}

middle {
  display: flex;
  flex-direction: row;
  background-color:rgb(14, 1, 104);
}

menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-left: 0;
  width: 33%;
  background-color: rgb(47, 19, 225);
  border: 5px solid #031127;
  border-left: 0;
  border-right: 0;
  border-left: none;
  border-right: none;
  color: black;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
}

#menu_div, #right_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  width: 400px;
  height: 250px;
  color: rgb(246, 125, 49);
  background-color: rgb(26, 5, 162);;
  border: 8px outset rgb(246, 125, 49);
  border-radius: 20px;
}

p {
  color: white;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  background-color:rgb(14, 1, 104);
  border: 5px solid #031127;
  border-left: 0;
  border-right: 0;
}

right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-left: 0;
  width: 34%;
  background-color: rgb(47, 19, 225);
  border: 5px solid #031127;
  border-left: 0;
  border-right: 0;
  border-left: none;
  border-right: none;
  color: black;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
}

footer {
  display: flex;
  position: absolute;
  justify-items: center;
  align-items: center;
  margin: 0;
  padding: 18px;
  padding-left: 30%;
  padding-top: 30px;
  width: 100%;
  bottom: 0;
  background-color:rgb(47, 19, 225);
  border: 5px solid #031127;
  border-left: 0;
  border-right: 0;
  color: black;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
}

#canvas {
  border: 10px outset rgb(246, 125, 49);
  border-radius: 10px;
  background-color: rgb(0, 0, 0);
  z-index: 2;
}

.button_class {
  background-color: rgb(143, 1, 119);
  color: black;
  position: absolute;
  width: 15vw;
  height: 10vh;
  z-index: 3;
  font-size: 2vw;
  font-weight: bold;
  font-family: Georgia, 'Times New Roman', Times, serif;
  border: 3px outset rgb(246, 125, 49);
  border-radius: 20px;
}

.button_class:hover {
  width: 16vw;
  height: 11vh;
  color: rgb(47, 19, 225);
  font-size: 2.2vw;
}

#pauseGameButton {
  display: none;
  bottom: 20px;
  right: 20px;
}

#send_button {
  display: none;
  top: 60vh;
  left: 42vw;
}

#logo {
  position: absolute;
  left: 200;
  top: 100;
  z-index: 2;
}