body {
  background: #fafafa;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
  padding: 40px; }

#display {
  clear: both; }

.settings {
  background-color: #eee;
  padding: 40px 40px 0;
  margin-bottom: 20px; }

clock-display {
  display: flex; }

fieldset {
  margin-bottom: 40px; }

.matrixes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

custom-matrix {
  flex: 1;
  display: flex;
  min-width: 200px;
  max-width: 300px;
  flex-direction: column;
  margin: auto;
  margin: 20px;
  border: 2px solid #ccc; }
  custom-matrix .pixels-row {
    display: flex; }
  custom-matrix matrix-pixel {
    flex: 1;
    padding: 3px;
    position: relative;
    background-color: #eee;
    border: 2px solid #ccc; }
    custom-matrix matrix-pixel .selector {
      position: absolute;
      z-index: 10;
      width: 400%;
      height: 300%;
      top: 0;
      left: 0; }
      custom-matrix matrix-pixel .selector div {
        float: left;
        width: 25%;
        background-color: #ecc;
        text-align: center; }
        custom-matrix matrix-pixel .selector div:hover {
          background-color: orange; }
        custom-matrix matrix-pixel .selector div:before {
          content: "";
          float: left;
          padding-top: 100%; }
        custom-matrix matrix-pixel .selector div:first-child {
          background-color: white; }
    custom-matrix matrix-pixel .text {
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      font-size: 20px;
      line-height: 20px;
      transform: translate(-50%, -50%); }
    custom-matrix matrix-pixel:hover {
      background-color: orange; }
    custom-matrix matrix-pixel.selected {
      background-color: #70AFFD; }
    custom-matrix matrix-pixel:before {
      content: "";
      float: left;
      padding-top: 100%; }

/*# sourceMappingURL=text.css.map */