@font-face {
  font-family: 'AstroSpace';
  src: url('AstroSpace-eZ2Bg.ttf') format('truetype');
}

* {
  font-family: 'AstroSpace', sans-serif;
}

.game-info {
  padding-top: 10px;
  display: flex;
  /* justify-content: space-evenly; */
}

.game-info > * {
    padding-left: 10px;
}

.info-text {
  margin: 0 1vw;
  font-size: large;
}

.button {
  font-size: medium;
  margin: 0 1vw;
  background-color: beige;
}

/* make stuff centered horizontally */
.center {
  text-align: center;
}

.message-box {
  background-color:rgb(255, 255, 255, .95);
  border: 8px solid steelblue;
  padding: 16px;
  /* next line is so that we can float this message box over the canvas.
     Its position is set in the code.  */
  position: fixed;
  font-size: x-large;
}

.right-edge {
  margin-left: auto;
  margin-right: 0;
  display: table;
}