<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   body {
  font-family: "Archivo Narrow", sans-serif;
  background: #25859a;
}

h1, h2, h3, h4 {
  font-family: "Fjalla One", sans-serif;
}

h1 {
  margin-top: 40px;
  color: white;
  text-align: center;
}

.loading {
  color: white;
  text-align: center;
  font-size: 20px;
}

.display, .beer-img, .beer-contain, #app {
  display: flex;
  justify-content: center;
  align-content: center;
}

#app {
  flex-direction: column;
}

.beer-contain {
  width: 50%;
  margin: 20px 24%;
  box-shadow: 0 2px 3px 1px rgba(30, 0, 0, 0.1);
}

.beer-img {
  padding: 30px;
  background: #FF6542;
  border: 1px solid #88498F;
  border-right: 1px solid #f44822;
}

.beer-info {
  background: #564154;
  color: white;
  padding: 30px;
  border: 1px solid #88498F;
}
.beer-info .bright {
  color: #fcd7cf;
  font-family: "Contrail One", sans-serif;
}

h3 {
  margin-bottom: 5px;
}

ul {
  margin-top: 5px;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <section>
    <h1>
     🍺 Make yourself some Punk Beers 🍻
    </h1>
    <div class="loading" v-if="!beers.length">
     Loading...
    </div>
    <div class="beer-contain" v-for="beer in beers">
     <div class="beer-img">
      <img :src="beer.img" height="350"/>
     </div>
     <div class="beer-info">
      <h2>
       {{ beer.name }}
      </h2>
      <p class="bright">
       {{ beer.tagline }}
      </p>
      <p>
       <span class="bright">
        Description:
       </span>
       {{ beer.desc }}
      </p>
      <p>
       <span class="bright">
        Tips:
       </span>
       {{ beer.tips }}
      </p>
      <h3 class="bright">
       Food Pairings
      </h3>
      <ul>
       <li v-for="item in beer.food">
        {{ item }}
       </li>
      </ul>
     </div>
    </div>
   </section>
  </div>
 </body>
</html>
