:root {
  --bg: black;

  --control-margin: 60px;
  --top-margin: var(--control-margin);

  --color-grey: #585858;
  --color-red: #ab4642;
  --color-orange: #dc9656;
  --color-yellow: #f7ca88;
  --color-green: #a1b56c;
  --color-blue: #86c1b9;
  --color-teal: #7cafc2;
  --color-purple: #ba8baf;

  --color-merveilles: #72dec2;
  --color-dark: #151515;

  --uxn-max-width: 1000px;
  --uxn-max-height: 640px;

  --border: var(--color-grey);
  --border-px: 1px;
}

body {
  margin-top: 0px;
  background-color: var(--bg);
  font-family: "Fira Mono";
}

button {
  margin: 2px;
  background-color: var(--bg);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

button:hover {
  font-weight: bold;
  cursor: pointer;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: black;
}

a:hover {
  filter: invert(100);
}

#noscript {
  top: 200px;
  background-color: white;
  color: black;
  font-size: 20px;
}

#noscript a {
  text-decoration: underline;
}

#uxnemu {
  width: 50vw;
  display: flex;
}

#uxnemu-iframe {
  width: 50%;
  border: var(--border-px) dotted var(--border);
  position: fixed;
}

#uxnasm-iframe {
  display: none;
}

#console-wrapper {
  margin-left: 10px;
  position: fixed;
  width: 100%;
  z-index: 10;
  color: white;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  bottom: 0px;
}

#console {
  color: var(--color-grey);
  font-size: 16px;
  margin-bottom: 5px;
}

#controls-wrap {
  position: absolute;
  top: 0px;
}

#controls {
  position: fixed;
  width: 100%;
  display: flex;
  z-index: 10;
}

.flex {
  display: flex;
  width: 100%;
  height: calc(100% - var(--top-margin) - 5px);
  position: absolute;
  top: var(--top-margin);
}

.hidden {
  display: none !important;
}

.comment {
  color: var(--color-grey);
}

.stack-opcode {
  color: var(--color-red);
}

.logic-opcode {
  color: var(--color-orange);
}

.memory-opcode {
  color: var(--color-yellow);
}

.arithmetic-opcode {
  color: var(--color-green);
}

.rune-sublabel {
  color: var(--color-teal);
}

.rune-hexliteral {
  color: var(--color-blue);
}

.rune-label {
  color: var(--color-purple);
}

/** Controls **/

.control {
  color: white;
  flex-grow: 1;
  text-align: center;
  transition: 0.3s;
}

.control:hover {
  cursor: pointer;
  filter: drop-shadow(0mm 1mm 0mm white);
}

#roms {
  background-color: var(--color-red);
}

#roms a {
  padding: 8px 8px;
}

#roms-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 200px));
}

#assemble {
  background-color: var(--color-orange);
}

#io {
  background-color: var(--color-yellow);
}

#fullscreen {
  background-color: var(--color-green);
}

#new {
  background-color: var(--color-blue);
}

#about {
  background-color: var(--color-purple);
}

/* The dropdown container */
.dropdown {
  z-index: 10;
}

.dropdown:hover {
  filter: invert(100);
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to .navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--color-low);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: inherit;
  filter: brightness(0.85);
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:active.dropdown-content {
  display: block;
}

/* keyframe bullshit */
.pulse {
  animation: pulse 5s infinite;
  background-color: white;
  animation-direction: alternate;
  transform-origin: 30% 5%;
  border: var(--border-px) solid black;
}

@keyframes pulse {
  0% {
    animation-timing-function: ease-in;
    filter: invert(0);
  }

  50% {
    animation-timing-function: ease-out;
    filter: invert(100);
  }
}

/* Works on Firefox */
* {
  scrollbar-color: white black;
  scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 14px;
}

*::-webkit-scrollbar-track {
  background: black;
}

*::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 20px;
  border: 3px solid black;
}

/** Editor **/
#editor-wrapper {
  width: 50vw;
}

#editor {
  background-color: black;
  float: left;
  border: var(--border-px) solid var(--border);
  width: 100%;
}

.cm-editor {
  color: #888888;
  background: black;
  width: 100%;
}

.cm-editor .cm-content {
  font-size: 18px;
  caret-color: white;
}

.cm-editor .cm-cursor {
  border-left-color: white;
}

.cm-editor .cm-focused .cm-selectionBackground,
.cm-selectionBackground,
::selection {
  background-color: #151515;
}

.cm-editor .cm-activeLine {
  background-color: #252525;
}

.cm-editor .cm-gutters {
  background-color: black;
  color: grey;
}

.cm-editor .cm-activeLineGutter {
  background-color: #707070;
}

.cm-editor .cm-scroller {
}

.cm-editor .cm-tooltip-hover {
  width: max-content;
}

/** UXNTAL Highlighting after parsing **/

.highlight-opcode {
  color: var(--color-blue);
}

.highlight-macro {
  color: var(--color-green);
}

.highlight-label {
  color: var(--color-orange);
}

.highlight-sublabel {
  color: var(--color-yellow);
}

.highlight-hexadecimal {
  color: var(--color-purple);
}

.highlight-comment {
  color: var(--color-grey);
}

.highlight-padrelative {
}

.highlight-padabsolute {
}

.highlight-rawcharacter {
}

.highlight-rawaddress {
}

.highlight-rawword {
}

.highlight-literaladdresszeropage {
}

.highlight-literaladdressrelative {
}

.highlight-literaladdressabsolute {
}

/** Modal **/

#about-modal {
  position: fixed;
  background-color: var(--color-blue);
  top: var(--top-margin);
  padding-left: 10px;
  height: calc(100vh - var(--top-margin));
  right: 0px;
  z-index: 11;
  overflow-y: scroll;
  font-size: 14px;
}