html {
  height: 100%; }

body {
  height: 100%;
  margin: 0;
  font-family: Tahoma, sans-serif;
  background-color: #eee; }

#app-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header header" ". main ." ". action .";
  grid-column-gap: 0;
  grid-row-gap: 35px; }

#header {
  grid-area: header;
  display: grid;
  justify-content: center;
  align-content: end; }
  #header .logo {
    width: 500px;
    height: auto;
    margin-top: 25px; }
  #header h1 {
    margin: 0;
    text-align: center;
    line-height: 30px;
    font-family: Impact, Charcoal, sans-serif; }
    #header h1 small {
      font-family: Tahoma, sans-serif;
      font-size: 20px; }
    #header h1 sup {
      margin-left: 10px;
      color: red; }

#main {
  grid-area: main;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center; }
  #main .tile {
    position: relative;
    cursor: pointer;
    background-color: #eee;
    transition: box-shadow .2s ease-out; }
    #main .tile:hover {
      box-shadow: inset 0px 0px 15px 3px #40eb6a; }
    #main .tile.disabled {
      pointer-events: none;
      background-color: black; }
      #main .tile.disabled .hotkey {
        display: none; }
    #main .tile.xy-00 {
      background: url(b9593e5e26835fda89c345fe386ec9b3.jpg) no-repeat;
      background-size: cover; }
    #main .tile.xy-10 {
      background: url(8c46ec426d7606e8294b12a56b593b53.jpg) no-repeat;
      background-size: cover; }
    #main .tile.xy-20 {
      background: url(15ddb8fa7038fea19e24c9c3d05eb6b8.jpg) no-repeat;
      background-size: cover; }
    #main .tile.xy-30 {
      background: url(ed1eb5ea5874c25ac29b69ad82acedd4.jpg) no-repeat;
      background-size: cover; }
    #main .tile.xy-01 {
      background: url(d320e819ba87e8145fa745b5733b9e09.jpg) no-repeat;
      background-size: cover; }
    #main .tile.xy-31 {
      background: url(075e17d0d736bcaae6c8706ffacead5f.jpg) no-repeat;
      background-size: cover; }
    #main .tile.xy-02, #main .tile.xy-12, #main .tile.xy-22, #main .tile.xy-32, #main .tile.xy-11, #main .tile.xy-21 {
      background: url(3652498ca66466573319b6c2612603a6.jpg) no-repeat;
      background-size: cover; }
    #main .tile .hotkey {
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      background-color: white;
      line-height: 26px;
      text-align: center;
      box-sizing: border-box;
      border: 2px solid black;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      #main .tile .hotkey.error {
        color: red;
        cursor: help; }
      #main .tile .hotkey.active {
        border-style: dashed;
        border-color: red; }

#action {
  grid-area: action;
  display: grid;
  justify-content: center; }
  #action label {
    display: inline-flex; }
  #action #dl-btn {
    border: 3px solid black;
    padding: 15px;
    margin-top: 20px;
    background-color: #efd044;
    color: black;
    cursor: pointer;
    font-size: 15px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: bold; }
    #action #dl-btn:disabled {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      opacity: 0.5;
      cursor: not-allowed; }
    #action #dl-btn:hover:enabled {
      border-color: red;
      color: red; }

#email {
  position: absolute;
  right: 10px;
  bottom: 10px;
  text-align: right;
  line-height: 1.6; }
  #email a {
    color: black; }
    #email a:hover {
      color: red; }