@font-face {
  font-family: 'Palatino';
  src: url('../fonts/palatino-linotype.eot?#iefix'), url('../fonts/palatino-linotype.eot?#iefix') format('embedded-opentype'), url('../fonts/palatino-linotype.woff') format('woff'), url('../fonts/palatino-linotype.woff2') format('woff2'), url('../fonts/palatino-linotype.ttf') format('truetype');
}

html {
  background-color: black;
  background-image: url("/img/GunseKruus.svg");
  background-attachment: fixed;
  background-size: cover;
}

body {
  background-color: black;
  background-color: rgba(0,0,0,0.95);
  margin: 0;
  padding: 0;
  color: #eee;
  font-family: 'Palatino', 'Lucida Sans', Geneva, sans-serif;
  font-size: 1.2rem;
}

figure img {
  width: 100%;
}

header {
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #282828;
  padding: 0.5rem 1rem;
}

  header > span, header > a {
    color: #fff;
    text-decoration: none;
  }

  header > a {
    width: 132px;
    height: 70px;
    line-height: 70px;
    text-align: center;
  }

    header > a:hover {
      text-decoration: underline;
    }

  header .menu-logo {
    height: 64px;
  }


section {
  padding: 0.5rem;
}

article {
  padding-bottom: 2rem;
}

h1, figure {
  text-align: center;
}

footer {
  display: flex;
  justify-content: space-between;
}

  footer > span {
    padding: 0.5rem;
  }

p {
  text-align: justify;
}

a {
  color: #aaa;
}

  a:active {
    color: #bbb;
  }

.hide {
  display: none;
}

.hide-small {
  display: none;
}

.mirror {
  transform: scale(-1, 1);
}

table.beer-stats {
  table-layout: fixed;
}

.beer-stats th, .beer-stats td {
  padding: 0.2rem;
}

.beer-stats th {
  text-align: right;
  vertical-align: top;
  width: 8rem;
}

.beer-stats td {
  vertical-align: top;
}

.hop-stengel-seperator {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  padding-top: 1rem;
}

  .hop-stengel-seperator h1 {
    flex-grow: 1;
  }

.hop-stengel {
  width: 96px;
  height: 40px;
  background-image: url("/img/GunseKruus-HopStengel.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  header > span, header > a {
    padding: 1rem 2rem 1rem 2rem;
  }

  header .menu-logo {
    height: 90px;
  }

  header > a {
    background-image: url('/img/gunsekruus-single-border.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }

    header > a:hover {
      background-image: url('/img/gunsekruus-border.svg');
    }

  .hop-stengel {
    width: 192px;
    height: 80px;
  }

  .hide-medium {
    display: none;
  }

  .hide-small {
    display: initial;
  }

  .beer-stats th {
    width: 12rem;
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    section, header, footer {
      width: 960px;
      margin: auto;
    }

    figure > .logo {
      width: 75%;
    }
  }

  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
  }