/* fontface */
@font-face {
  font-family: 'Cooper Hewitt';
  src: url("fonts/CooperHewitt-Book.eot");
  src: url("fonts/CooperHewitt-Book.eot?#iefix") format("embedded-opentype"), url("fonts/CooperHewitt-Book.woff") format("woff"), url("fonts/CooperHewitt-Book.svg#svgFontName") format("svg");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'Cooper Hewitt';
  src: url("fonts/CooperHewitt-Bold.eot");
  src: url("fonts/CooperHewitt-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/CooperHewitt-Bold.woff") format("woff"), url("fonts/CooperHewitt-Bold.svg#svgFontName") format("svg");
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: 'Cooper Hewitt';
  src: url("fonts/CooperHewitt-Light.eot");
  src: url("fonts/CooperHewitt-Light.eot?#iefix") format("embedded-opentype"), url("fonts/CooperHewitt-Light.woff") format("woff"), url("fonts/CooperHewitt-Light.svg#svgFontName") format("svg");
  font-style: normal;
  font-weight: 300; }

@font-face {
  font-family: 'Cooper Hewitt';
  src: url("fonts/CooperHewitt-Medium.eot");
  src: url("fonts/CooperHewitt-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/CooperHewitt-Medium.woff") format("woff"), url("fonts/CooperHewitt-Medium.svg#svgFontName") format("svg");
  font-style: normal;
  font-weight: 500; }

:root {
  --color-back: #c4e3f3;
  --color-front: #495776;
  --color-text: #ffffff; }

body {
  width: 100vw;
  height: 100vh;
  /* using viewport unit to center */
  display: flex;
  justify-content: center;
  align-items: center;
  bacgkround: lightgrey; }

@page {
  size: 30cm 30cm; }

.page {
  display: flex;
  font-family: "Cooper Hewitt";
  width: 30cm;
  height: 30cm; }

.spread {
  width: 255mm;
  height: 210mm;
  align-self: center;
  background: var(--color-back);
  display: grid;
  grid-template-areas: "back spine front";
  grid-template-columns: 125mm 5mm 125mm;
  position: relative;
  border: 8px solid white; }
  .spread:before, .spread:after {
    position: absolute;
    content: '';
    border: solid black;
    z-index: -1; }
  .spread:before {
    top: -32px;
    bottom: -32px;
    left: 16px;
    right: 16px;
    border-width: 0 1px; }
  .spread:after {
    left: -32px;
    right: -32px;
    top: 16px;
    bottom: 16px;
    border-width: 1px 0; }

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-front);
  -webkit-mask: url("../img/lol.png");
  -webkit-mask-size: 110%;
  -webkit-mask-position: -0mm -10mm; }
  .background img {
    width: 130%;
    margin-left: -3em;
    bottom: 0;
    position: absolute; }

.backcover {
  grid-area: back;
  position: relative; }
  .backcover .logos {
    top: 10mm;
    left: 10mm;
    right: 10mm;
    position: absolute;
    margin: 0 auto;
    display: inline;
    text-align: center; }
    .backcover .logos svg:first-of-type {
      margin-right: 1em; }
  .backcover p {
    margin: 0 auto;
    position: absolute;
    bottom: 10mm;
    left: 10mm;
    right: 10mm;
    text-align: center;
    color: var(--color-text);
    font-size: 0.7em; }

.spinecover {
  grid-area: spine;
  background: var(--color-front);
  z-index: 1000; }

.frontcover {
  grid-area: front;
  width: 100%;
  height: 100%;
  position: relative; }
  .frontcover hgroup {
    position: absolute;
    left: 6mm;
    bottom: 5mm;
    position: absolute; }
    .frontcover hgroup * {
      color: var(--color-text); }
    .frontcover hgroup h1 {
      font-weight: 400;
      font-size: 3.5em;
      line-height: 1;
      padding-right: 1em;
      margin-bottom: 0; }
    .frontcover hgroup p {
      margin-left: 0.5em;
      margin-top: 0;
      margin-bottom: 1em; }
  .frontcover .version {
    position: absolute;
    top: 5mm;
    right: 15mm;
    font-style: italic;
    color: var(--color-front);
    font-size: 0.8em; }

svg #coko-img {
  fill: var(--color-front);
  stroke: var(--color-back);
  stroke-width: 0.2pt; }

svg #coko-text {
  fill: var(--color-front); }

svg #shuttle-img {
  fill: var(--color-front); }

svg #shuttle-text {
  fill: var(--color-front); }

.buttons {
  z-index: 100000;
  background: grey;
  color: white;
  position: fixed;
  top: 10px;
  left: 10px; }
  .buttons label {
    display: block; }
  .buttons h2 {
    margin: 0;
    font-family: sans-serif;
    width: 100px;
    padding: 1em; }
  .buttons input[type="color"] {
    margin-left: 3em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0;
    border: 4px solid grey;
    display: block;
    width: 100%;
    height: 30px; }
    .buttons input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0; }
    .buttons input[type="color"]::-webkit-color-swatch {
      border: none; }
    .buttons input[type="color"]:hover, .buttons input[type="color"]:focus, .buttons input[type="color"]:active {
      border: 4px solid white; }

@media print {
  .buttons {
    display: none; } }