:root {
  --cells: 10;

  --Gap: 4px;
  --gap: calc(var(--Gap) / 2);
  --rad: 5px;

  --cell-size: calc((100vw - var(--Gap) * (var(--cells) + 1)) / var(--cells));
  --value-font-size: calc(var(--cell-size) / 2.15);

  --line-color: yellow;
  --cell-color: black;
  --text-color: white;
  --scrolbar-color: white;

  --data-color: 180;
}

/* ------ Tags ------ */
html,
body {
  display: flex;
  flex-flow: column;
  height: 100%;
}

header {
  flex: 0 1 auto;
}
main {
  flex: 1 1 auto;
  overflow: overlay;
}
footer {
  flex: 0 1 40px;
}

/* ------ Data Types ------ */
.bool {
  --data-color: 300;
}

.bool .value {
  font-size: 2rem;
}

.int {
  --data-color: 240;
}

.long {
  --data-color: 200;
}

.float {
  --data-color: 120;
}

.double {
  --data-color: 80;
}

.string {
  --data-color: 0;
}

.char {
  --data-color: 40;
}

.pointer {
  --data-color: 270;
}
.pointer.datatype {
  color: black;
}

/* ------ Global ------ */
.datatype {
  color: hsl(var(--data-color), 50%, 50%);
}

/* ------ Global ------ */
body {
  width: 100vw;
  overflow-x: hidden;
}

/* ------ Scrollbar ------ */
::-webkit-scrollbar {
  width: 0;
  background-color: var(--line-color);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrolbar-color);
}

:hover::-webkit-scrollbar {
  width: var(--Gap);
}

/* ------ Sizes ------ */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  :root {
    --cells: 4;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  :root {
    --cells: 4;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  :root {
    --cells: 6;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  :root {
    --cells: 10;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  :root {
    --cells: 12;
  }
}

/* ------ Structure ------ */
#memory {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;

  color: var(--text-color);
  background: var(--line-color);
  border: var(--line-color) solid var(--gap);
  font-family: "Consolas";

  outline: var(--Gap) solid var(--line-color);
  outline-offset: calc(-1 * var(--Gap));
}

.byte {
  width: var(--cell-size);
  height: var(--cell-size);

  margin: var(--gap);
  background: var(--cell-color);

  box-sizing: content-box;
  display: grid;
  align-items: center;
  text-align: center;
}

#memory input[type="radio"] {
  display: none;
  cursor: pointer;
}

#memory input[type="radio"]:hover + .byte {
  filter: contrast(0.6);
}

#memory input[type="radio"]:checked + .byte {
  filter: contrast(0.4);
}

/* ------ Data ------ */
.data {
  background-color: hsl(var(--data-color), 100%, 5%);
  border: solid hsl(var(--data-color), 50%, 10%);
  border-width: 0 var(--gap);
  margin: var(--gap) 0;
}

.begin {
  margin-left: var(--gap);
  border-left: 0;
  border-top-left-radius: var(--rad);
  border-bottom-left-radius: var(--rad);
}

.end {
  margin-right: var(--gap);
  border-right: 0;
  border-top-right-radius: var(--rad);
  border-bottom-right-radius: var(--rad);
}

/* ------ Data ------ */
.garbage {
  background: repeating-linear-gradient(
    45deg,
    #222,
    #222 10px,
    #333 10px,
    #333 20px
  );
  color: #555;
}

/* ------ Outputs ------ */
.bits {
  font-size: 1rem;
  margin-bottom: auto;
}

.value {
  font-size: var(--value-font-size);
  line-height: 0;
  margin: auto;
  z-index: 1;
}

.value.right {
  margin: 0 0 0 auto;
}

.value.left {
  margin: 0 auto 0 0;
}

.address {
  font-size: 0.75rem;
  margin-top: auto;
}

.data .address {
  color: hsl(var(--data-color), 25%, 30%);
}

/* ------ Variable ------ */
#variables {
  background-color: rgba(255, 255, 255, 0.2);
  text-align: left;
}

.variable {
  background-color: hsl(var(--data-color), 100%, 8%);

  display: inline-block;
  vertical-align: middle;

  border-radius: 9999px;
  padding: 0.1rem 0.25rem 0.1rem 0.5rem;
  margin: 0.25rem;

  font-family: sans-serif;
}

.variable:hover {
  filter: brightness(130%);
}

.close {
  background-color: hsl(var(--data-color), 50%, 30%);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  margin-left: 0.5rem;
  border: 0;
  display: inline;
  font-weight: bold;

  line-height: 1rem;
  padding: 0;
}

.close:hover {
  filter: brightness(150%);
}