:root {
  /* Colors */
  --body-bg: rgb(21, 13, 31);

  --device-bg: rgb(17, 17, 17);
  --device-border: rgba(252, 252, 252, 0.726);
  --outline-color: rgb(34, 34, 34);

  --display-font: "SevenSegment";
  --text-color: rgb(230, 230, 230);

  --keys-color: white;
  --keys-bg: #1f1e1e;
  --keys-shadow-on: rgba(18, 102, 25, 0.849);
  --keys-shadow-off: rgba(114, 114, 114, 0.473);
  --keys-hover: rgb(48, 48, 48);
  --keys-active: rgb(66, 66, 66);
  --keys-border: #202020;

  --display-text: rgb(108, 247, 66);
  --display-placeholder: rgb(53, 160, 53);
  --display-off: rgb(14, 22, 15);
  --display-on: rgb(7, 94, 13);

  --display-border-on: rgba(13, 179, 24, 0.534);
  --display-border-off: rgb(12, 37, 15);
  --display-outline: rgb(41, 41, 41);

  --BOX-SHADOW-COLOR: rgba(1, 68, 16, 0.795);
  --BOX-SHADOW-PROPS: 1px;
  --INTENS-1: 10px;
  --INTENS-2: 10px;
  --BOX-SHADOW: inset var(--BOX-SHADOW-PROPS) var(--BOX-SHADOW-PROPS)
      var(--INTENS-1) var(--BOX-SHADOW-COLOR),
    inset var(--BOX-SHADOW-PROPS) var(--BOX-SHADOW-PROPS) var(--INTENS-2)
      var(--BOX-SHADOW-COLOR);
}

.galaxy-item {
  display: block;
}

.classic-item {
  display: none;
}

.display {
  font-size: 2rem;
}

.display::placeholder {
  color: var(--display-placeholder);
}

h1.heading {
  font-family: "Tourney";
  font-weight: 100;
  font-size: clamp(1.2rem, 10dvw, 1.5rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to right, rgb(92, 1, 54), rgb(14, 53, 138));
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  width: 350px;
  color: rgba(255, 255, 255, 0.11);
  filter: brightness(2.4);
  z-index: 10;
  margin-bottom: 10px;
}

.background {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  height: auto;
  position: absolute;
  background: linear-gradient(
    to top,
    rgb(9, 5, 19),
    rgba(54, 44, 104, 0.952),
    40%,
    rgb(13, 13, 14)
  );
  z-index: 3;
}

.planet {
  background-color: rgb(1, 20, 46);
  border-radius: 50%;
  border-left: 5px solid rgba(56, 157, 224, 0.822);
  width: 90%;
  height: auto;
  aspect-ratio: 1 / 1;
  position: fixed;
  top: 0;
  right: 0;
  overflow: hidden;
  transform: translate(60dvw, 70dvh);
  box-shadow: 10px 50px 200px 200px rgba(5, 89, 95, 0.596),
    10px 50px 200px 200px rgba(4, 140, 158, 0.548),
    1px 1px 50px 50px rgba(44, 96, 126, 0.911),
    inset 10px -30px 15px 25px rgba(49, 179, 212, 0.411),
    inset 100px -80px 80px 80px rgba(33, 106, 175, 0.911);
  opacity: 0.5;
  filter: brightness(1.2);
  z-index: 3;
}

footer {
  color: rgb(224, 224, 224);
}