@font-face {
    font-family: 'FoundryGridnikLight';
    src: url('foundrygridnik-light-webfont.eot');
    src: url('foundrygridnik-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('foundrygridnik-light-webfont.woff') format('woff'),
         url('foundrygridnik-light-webfont.ttf') format('truetype'),
         url('foundrygridnik-light-webfont.svg#FoundryGridnikLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-ms-viewport{
  width: device-width;
}

::-moz-selection{ background: #5d8aa6; color:#fff; text-shadow: none; }
::selection { background:#5d8aa6; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #5d8aa6; }

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

body {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
canvas {
  max-width: 100%;
}

a {
  color: #111;
  transition: all 1s;
  padding: 0 0.2em;
  margin: 0 -0.2em;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}
a:hover {
  background: repeating-linear-gradient(
    45deg,
    #111,
    #111 1px,
    #ccc 1px,
    #ccc 2px
  );
  color: #fff;
  transition: all 0.25s;
}

strong {
  font-weight: normal;
}

h1 {
  display: none;
}

ul {
  color: #666;
  list-style: none;
  box-sizing: border-box;

}
li {
  font: 1em "FoundryGridnikLight", "Courier New", monospace;
  text-rendering: optimizeLegibility;
  opacity: 0;
  transition: all .4s;
  position: absolute;
  bottom: 0;
  left: 0;;
  box-sizing: border-box;
  background: #fff;
  padding: 15px;
  width: 100%;
}
.shown {
  opacity: 1;
  z-index: 2;
}
li:hover {
  opacity: 1;
  z-index: 3;
}