* {
  box-sizing: border-box;
}

html,body{
  padding: 0;
  margin: 0;
  position: relative;
  background-color: black;
  font-family: "Verdana", "Geneva", "Tahoma", "sans-serif";
}

body {
  background-image: url('../public/assets/img/stars.png');
}

.bar {
  width: 100%;
  background-color: aqua;
  width: 800px;
  margin: auto;
  margin-bottom: 10px;
  text-align: center;
}

.key {
  font-family: 'Courier New', Courier, monospace;
}

#gameBox {
  display: block;
  width: 800px;
  margin: auto;
  box-shadow: 0 0 35px rgba(0,255,255,0.3);
  position: relative;
}

.records {
  display: block;
  position: absolute;
  background-color: yellow;
  width: 250px;
  right: -270px;
  padding: 20px;
}

h4 {
  margin: 0;
  margin-bottom: 10px;
  text-align: center;
}

@media screen and (max-width: 1350px) {
  .bar {
    margin-left: 20px;
  }

  #gameBox {
    margin-left: 20px;
  }
}
