.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.device {
  align-self: center;
  height: 800px;
  width: 800px;
  margin-top: 30px;
  background-image: url("../assets/gameboy.png");
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center;
}

.screen {
  position: relative;
  margin-top: 104px;
  margin-bottom: 145px;
  width: 372px;
  height: 265px;
  border-radius: 1% 1% 55px 1%;
  /* background: linear-gradient(-45deg, #a6e7f0 50%, #d4f2f6); */
  background: linear-gradient(
    -10deg,
    rgba(15, 56, 15, 1) 0%,
    rgba(15, 56, 15, 1) 12%,
    rgba(48, 98, 48, 1) 55%,
    rgba(139, 172, 15, 1) 98%,
    rgba(155, 188, 15, 1) 99%
  );
}

.controls {
  flex: 1;
  width: 100%;
  position: relative;
}

.dpad {
  position: absolute;
  width: 130px;
  height: 130px;
  top: -47px;
  left: 200px;
  border: 1px solid black;
}

#button-one,
#button-two {
  text-align: center;
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 90%;
  font-size: 18px;
  font-family: sans-serif;
  border: 1px solid black;
}

#button-one:hover,
#button-two:hover {
  color: white;
  background-color: black;
  opacity: 0.1;
}

#button-one {
  bottom: 216px;
  right: 286px;
}

#button-two {
  bottom: 273px;
  right: 212px;
}

.unselectable {
  user-select: none;
}

/*? z-index 2rd layer in screen*/
#game-paused-text {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  text-align: center;
  font: 2.25em bold sans-serif;
  color: tomato;
  background-color: rgba(128, 128, 128, 0.85);
  z-index: 2;
}

/* elements that go in the screen */
.screen-element {
  position: absolute;
  border-radius: 1% 1% 15% 1%;
}

.game-paused-red {
  padding-top: 60px;
}

.todo {
  flex: 1;
  color: azure;
  font-size: 30px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.todo .done {
  text-decoration: line-through;
}