alessandrocuzzocrea/chip-8-emulator-js

$accent-color: #1abc9c;
$background-color: #2c3e50;
$text-color: #bdc3c7;
$font: monospace;

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus {
  outline: none;
}

body {
  color: $text-color;
  background-color: $background-color;
  font-family: $font;
}

button {
  color: $text-color;
  font-family: $font;
  background-color: $background-color;
  border: 1px solid $accent-color;

  &:active {
    background-color: $accent-color;
  }
}

#rom-select {
  font-family: $font;
  color: $text-color;
  background-color: $background-color;
  border: 1px solid $accent-color;
}

.container {
  margin: 0 auto;
  display: grid;
  max-width: 1024px;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.header {
  text-align: center;
  grid-column: span 3;
  border: 1px solid $accent-color;
}

.current-instruction {
  background-color: $accent-color;
}

.controls {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  border: 1px solid $accent-color;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid $accent-color;
}

.instructions {
  grid-column: span 2;
  border: 1px solid $accent-color;
}

.registers {
  border: 1px solid $accent-color;
}

.footer {
  text-align: center;
  grid-column: span 3;
  a {
    color: $text-color;
    text-decoration: none;
    &:hover {
      color: $accent-color;
    }
  }
}