@import "/defs.css";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');

body { font-family: Alegreya Sans; font-weight: 300; background-color: #ccd; -border: 1px solid var(--line); margin: 0; padding: 1rem }

.memory, .instructions { white-space: nowrap; overflow-x: scroll; margin-bottom: 1rem }
.address { font-size: 1rem; color: var(--color) }
.cell, .instruction, .single { font-size: 1.5rem; color: var(--text); display: inline-block; margin-right: 1px; background-color: var(--background) }
.instruction { width: calc(11rem + 1px); padding: .5rem }
.cell, .single { width: 5rem; padding: .5rem }

.registers { margin-bottom: 0rem; padding-right: .5rem }
.registers > div { display: inline-block; padding: .5rem; margin-right: 1px; background-color: #aab; width: 3rem }
.registers .name { font-size: .8rem; color: #556; padding-right: .2rem }
.registers .value { color: #eee }

.active { background-color: #ffc; }

@media (prefers-color-scheme: dark) {
  body { background-color: #556 }
  .registers > div { background-color: var(--color) }
  .registers .name { color: var(--background) }
  .registers .value { color: var(--initial) }

  .active { background-color: rgb(19, 42, 63) }
}

button { float: right; width: 2rem; padding: 0; border: 0; background-color: transparent; vertical-align: middle; cursor: pointer }
button:hover img { filter: brightness(2.0) ; }
button:active img { transform: scale(0.95) }

.hidden { display: none }