@import url("https://fonts.googleapis.com/css?family=Caveat+Brush");
@import url("https://fonts.googleapis.com/css?family=Francois+One");

@font-face {
  font-family: "Good Girl";
  src: url(/fonts/GoodGirl.ttf) format("truetype");
}

@font-face {
  font-family: "Chalky";
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/ChalkyRegular.ttf) format("truetype");
}

/*
 * <html/> and <body/>
 */

html {
  background: #000;
  color: #aaa;
  width: 100%;
  max-width: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}

/*
 * <header/>
 */

header {
  align-self: stretch;
  flex-shrink: 0;
  text-align: center;
  padding: 60px 10px 50px;
  background: url(/images/background.jpg);
  background-size: cover;
  background-position: center;
}

header > .title {
  font: 400 74px/1 "Good Girl";
  color: white;
}

header > .menu {
  margin-top: 30px;
  font: 400 22px/30px "Francois One";
  color: white;
}

header > .menu .live {
  color: rgba(255, 255, 255, 0.8);
}

header > .menu .pipe {
  margin: 0 5px;
  color: rgba(255, 255, 255, 0.8);
}

header > .menu a {
  text-decoration: underline;
  color: white;
}

body > .order {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body > .order > a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 54px;
  box-sizing: border-box;
  padding: 0 20px;
  border: 2px solid white;
  text-decoration: none;
  border-radius: 10000px;
  font: 600 17px/1 "Open Sans";
  background: white;
  color: black;
}

/*
 * <tap-list/>
 */

.taplist {
  margin-top: 25px;
  flex-grow: 1;
  max-width: 600px;
  padding: 15px;
  display: flex;
  flex-flow: column;
}

.tap {
  margin-bottom: 10px;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.tap + .tap {
  margin-top: 15px;
}

.tap > .tapnum {
  flex-shrink: 0;
  width: 30px;
  font: 400 20px/1 "Good Girl";
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.tap > .glass {
  margin: 0 13px 0 4px;
}

.content {
  flex-grow: 1;
  max-width: 75%;
  display: flex;
  flex-flow: column;
}

.title {
  font: 600 22px/30px "Francois One";
}

.title > .variant {
  text-shadow: 2px 2px rgba(255, 255, 255, 0.4);
}

.title > .variant[variant="sour"] {
  text-shadow: 2px 2px brown;
}
.title > .variant[variant="cider"] {
  text-shadow: 2px 2px red;
}
.title > .variant[variant="cask"] {
  text-shadow: 2px 2px brown;
}
.title > .variant[variant="nitro"] {
  text-shadow: 2px 2px blue;
}

.title > .brewer {
  font-weight: 400;
  opacity: 0.65;
}

.details {
  margin: 7px 0 2px;
  font: 600 12px/1 "Open Sans";
}

.details > .origin {
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.details > .price {
  color: white;
}

.details > .abv {
  color: rgba(255, 255, 255, 0.85);
}

.description {
  margin: 5px 0;
  font: 600 14px/22px "Open Sans";
}

.description .underlined {
  text-decoration: underline;
}

.description .beer-type {
  color: #ccc;
  text-decoration: underline;
  margin-right: 2px;
}

/*
 * Beer Glass Images
 */

.glass > svg {
  width: 26px;
  height: 33px;
}

.glass > svg.snifter {
  height: 23px;
}

/* Glass outline */
.glass > svg > path:first-child {
  color: rgba(255, 255, 255, 0.68);
  fill: currentcolor;
  stroke: currentcolor;
  stroke-width: 4px;
}

/* Liquid inside */
.glass > svg > path:last-child {
  color: rgba(255, 255, 255, 0.25);
  fill: currentcolor;
  stroke: currentcolor;
}

footer {
  flex-shrink: 0;
  display: none;
}

footer > .location {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  margin: 20px 10px 40px;
  font: 400 13px/1 "Francois One";
}