*, ::before, ::after {
  box-sizing: inherit;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-select: none;
  text-select: none;
  -moz-text-select: none; }

input {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-text-select: text;
  text-select: text;
  -moz-text-select: text; }

html {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  background-image: url("./bg.png");
  height: 100vh; }

body {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: auto; }

ome-grid-container {
  display: inline-block;
  position: relative;
  background-color: #f6e9d5;
  border-radius: 1rem;
  min-width: 690px;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-flex-order: 2;
  order: 2;
  padding: 90px; }
  ome-grid-container .colourInput {
    margin-left: 36px;
    display: inline-block; }

ome-grid {
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  border: 5px outset silver;
  width: 608px;
  min-width: 608px;
  line-height: 0px; }

small {
  margin-left: 160px; }

@-webkit-keyframes $animation-name {
  0% {
    color: red; }
  25% {
    color: #80ff00; }
  50% {
    color: cyan; }
  75% {
    color: #8000ff; }
  to {
    color: #ff0004; } }

@keyframes $animation-name {
  0% {
    color: red; }
  25% {
    color: #80ff00; }
  50% {
    color: cyan; }
  75% {
    color: #8000ff; }
  to {
    color: #ff0004; } }

@-webkit-keyframes $animation-name {
  0%, 51% {
    background-color: red; }
  50%, to {
    background-color: transparent; } }

@keyframes $animation-name {
  0%, 51% {
    background-color: red; }
  50%, to {
    background-color: transparent; } }

ome-shout-spacer {
  display: inline-block;
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
  text-align: center; }

ome-shout {
  z-index: 5;
  display: inline-block;
  background-color: inherit;
  padding: 0.5rem;
  font: 18pt sans-serif;
  -webkit-animation: colour-cycle 1s linear infinite;
  animation: colour-cycle 1s linear infinite; }

ome-cell {
  -webkit-flex-basis: 32px;
  -moz-flex-basis: 32px;
  -ms-flex-preferred-size: 32px;
  flex-basis: 32px;
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  box-sizing: content-box; }
  ome-cell.draggable[filled] {
    cursor: grab;
    cursor: -webkit-grab;
    cursor: -moz-grab; }
    ome-cell.draggable[filled]:hover:not(.dragged) {
      top: -2px;
      left: -2px;
      box-shadow: 2px 2px 2px darkgray;
      z-index: 5; }
    ome-cell.draggable[filled].dragged {
      cursor: grabbing;
      cursor: -webkit-grabbing;
      cursor: -moz-grabbing;
      box-shadow: 4px 4px 4px darkgray;
      background-color: #fff;
      z-index: 10; }
  ome-cell.pigment {
    border: 1px groove silver;
    background-color: white; }
  ome-cell.selected {
    box-sizing: border-box;
    outline: 3px solid #808;
    z-index: 2; }

h1 {
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.2rem; }

ome-navigation-h {
  display: inline-block;
  position: absolute;
  width: 608px;
  height: 20px;
  left: 96px;
  text-align: center;
  background-color: #ecd2ac;
  border: 1px groove silver;
  color: #674818;
  cursor: pointer; }
  ome-navigation-h:nth-of-type(1) {
    top: 64px; }
  ome-navigation-h:nth-of-type(2) {
    bottom: 64px; }
  ome-navigation-h[checked], ome-navigation-h:active:not([disabled]) {
    border: 1px inset silver; }
  ome-navigation-h:active:not([disabled]) {
    background-color: #daba8b; }
  ome-navigation-h[disabled] {
    color: #b9aa92;
    text-shadow: -1px -1px 1px white; }
  ome-navigation-h span {
    font-size: 80%; }

ome-navigation-v {
  display: inline-block;
  position: absolute;
  top: 96px;
  height: 608px;
  width: 20px;
  background-color: #ecd2ac;
  border: 1px groove silver;
  color: #674818;
  cursor: pointer; }
  ome-navigation-v:nth-of-type(1) {
    left: 64px; }
  ome-navigation-v:nth-of-type(2) {
    right: 64px; }
  ome-navigation-v[checked], ome-navigation-v:active:not([disabled]) {
    border: 1px inset silver; }
  ome-navigation-v:active:not([disabled]) {
    background-color: #daba8b; }
  ome-navigation-v[disabled] {
    color: #b9aa92;
    text-shadow: -1px -1px 1px white; }
  ome-navigation-v span {
    position: absolute;
    width: 608px;
    font-size: 80%;
    text-align: center;
    transform-origin: 0% 100% 0;
    -webkit-transform-origin: 0% 100% 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg); }