html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
canvas {  
  border-radius: 20px;
}
#p1 {
  color:red;
  position:absolute;
  left:100px;
  top:10px;
}
#p2 {
  color:red;
  position:absolute;
  left:100px;
  top:30px;
}
#score {
  color:black;
  position:absolute;
  left:200px;
  top:10px;
}
#high {
  color:black;
  position:absolute;
  left:200px;
  top:30px;
}
#end_msg {
  color:brown;
  position:absolute;
  left:100px;
  top:100px;
}
.hidden {
  display: none !important;
}

/* Buttons in Container */
#buttonContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#upButton {
  order: 1;
}
#leftRightButton {
  order: 2;
}
#leftButton {
  order: 1;
}
#rightButton {
  order: 2;
}
#downButton {
  order: 4;
}

/* Game Container */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
#game {
  width: 400px;
  height: 400px;
}
#buttonContainer {
  width: 400px;
  height: auto;
}
/* #scoreTab { } */