* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/* :root {
  touch-action: pan-x pan-y;
  height: 100%;
} */

body {
  /* background-color: rgb(202, 202, 202); */
  caret-color: transparent;
  background: linear-gradient(to right, #3c3b3f, #605c3c);
}

header {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.status-bar {
  background-color: #fff;
  width: 260.1px;
  display: flex;
  justify-content: space-around;
  border-right: 2px solid #ffcd05;
  border-top: 2px solid #ffcd05;
  border-left: 2px solid #ffcd05;
  border-bottom: 1px solid #ffcd05;
  gap: 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

p {
  padding: 5px;
  font-weight: lighter;
}

#breakout {
  background-color: #fff;
  border-right: 2px solid #ffcd05;
  border-bottom: 2px solid #ffcd05;
  border-left: 2px solid #ffcd05;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0px 10px 15px rgb(56, 56, 56);
}

.game-board {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.controls {
  display: flex;
  justify-content: center;
  /* background-color: red; */
  height: 60px;
  gap: 25px;
  margin-bottom: 3px;
}

.btn {
  font-size: 2.7rem;
  padding: 0 2.54745rem;
  border: 3px solid #ffcd05;
  border-radius: 5px;
  align-self: flex-start;
  user-select: none;
}

.left-dummy {
  display: none;
}

.right-dummy {
  display: none;
}

.btn-again {
  font-size: 2rem;
  padding: 5px;
  display: none;
  align-self: flex-start;
}

.expansion {
  display: flex;
  justify-content: center;
}

.btn-back {
  font-size: 1.3rem;
  padding: 5px;
  display: none;
  background-color: #fff;
  text-decoration: none;
  color: black;
}


h2 {
  color: #fff;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}