<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url("https://fonts.googleapis.com/css?family=Open+Sans");
:root {
  --dark: #2e2e30;
  --med: #4b4545;
  --light: #efeeed;
  --accent: #47CF73;
  --social: #1a8bf0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  color: var(--dark);
  background: var(--light);
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 2vmax;
}

main {
  flex: 1;
  display: flex;
  flex-flow: column;
}
main > div {
  flex: 1;
}

.details {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2em;
  background-color: var(--dark);
  background-size: cover;
  background-blend-mode: lighten;
  background-position: 50% 50%;
  color: var(--light);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3), 0 0.25em 1em rgba(0, 0, 0, 0.7);
  transition: background 5000ms ease-out;
  transform: translateZ(0);
  will-change: background;
}
.details:hover {
  background-position: 50% 90%;
}

.countdown {
  display: flex;
  background-color: var(--light);
  border-top: 0.5em solid var(--accent);
}

.credits {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0.6em;
  opacity: 0.6;
  padding: 1em;
  text-align: right;
}
.credits a {
  color: inherit;
}

.section {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
}

.num {
  letter-spacing: -0.1ch;
  flex: 1 0 10em;
  min-width: 10em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-shadow: 0 1px 0.5em rgba(0, 0, 0, 0.2);
  transition: background 3000ms linear, color 3000ms linear;
  color: var(--med);
}
.num.done {
  background: var(--dark);
  color: var(--accent);
}

.row {
  display: flex;
  align-items: baseline;
}
.row > * + * {
  padding: 0 0 0 3ch;
}

.row-group {
  flex: 1 1 auto;
  min-width: 5em;
  display: flex;
  flex-flow: row wrap;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 200;
}

.nowrap {
  white-space: nowrap;
}

a {
  display: inline-block;
  text-decoration: none;
  transition: transform 300ms ease-out;
}
a:hover {
  transform: scale(1.2);
}

.button {
  background: var(--accent);
  color: var(--light);
  line-height: 1.1;
  font-size: 1em;
  border-radius: 0.4ch;
  padding: 0.3ch 1ch;
}
.button.social {
  background: var(--social);
}

.fa-codepen {
  box-shadow: 0 0 0 0.2ch #000, 0 0.5em 1.5em -0.25em #000;
  text-shadow: none;
  border-radius: 100%;
  background: var(--light);
  color: #000;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
  </style>
 </head>
 <body translate="no">
  <main>
   <div :style="{ backgroundImage: `url(${image})` }" class="details">
    <div class="row">
     <h2>
      <a :href="link" target="_blank">
       <i :class="`fa-${icon}`" class="fa fa-lg fa-fw">
       </i>
      </a>
     </h2>
     <div class="info">
      <h1>
       {{title}}
      </h1>
      <h4>
       <span class="nowrap">
        {{date}}
       </span>
       <span class="nowrap">
        @ {{when}}
       </span>
       <small v-if="where">
        <br/>
        {{where}}
       </small>
      </h4>
      <p v-if="rsvp || social">
       <a :href="rsvp" class="button" target="_blank" v-if="rsvp &amp;&amp; tick &gt; 86400000">
        RSVP
       </a>
       <a :href="socialUrl" class="button social" target="_blank" v-if="social">
        {{social}}
       </a>
      </p>
     </div>
    </div>
    <div class="credits">
     <small>
      Photo by
      <a href="https://unsplash.com/@onthesearchforpineapples?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
       Colin Lloyd
      </a>
      on
      <a href="https://unsplash.com/@onthesearchforpineapples?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
       Unsplash
      </a>
     </small>
    </div>
   </div>
   <div class="countdown">
    <div class="section" v-if="tick &lt; 0">
     <div class="num">
      <h2>
       Party time!
      </h2>
      <div>
       The countdown has ended
      </div>
     </div>
    </div>
    <div class="section" v-if="tick &gt; 0">
     <div class="row-group">
      <div class="num days" v-bind:class="{'done': tick &lt; 86400000}">
       <h2>
        {{daysText}}
       </h2>
       <div>
        <b>
         {{time.days}}
        </b>
        {{daysLabel}}
       </div>
      </div>
      <div class="num hours" v-bind:class="{'done': tick &lt; 3600000}">
       <h2>
        {{hoursText}}
       </h2>
       <div>
        <b>
         {{time.hours}}
        </b>
        {{hoursLabel}}
       </div>
      </div>
     </div>
     <div class="row-group">
      <div class="num minutes" v-bind:class="{'done': tick &lt; 60000}">
       <h2>
        {{minutesText}}
       </h2>
       <div>
        <b>
         {{time.minutes}}
        </b>
        {{minutesLabel}}
       </div>
      </div>
      <div class="num seconds" v-bind:class="{'done': tick &lt; 1000}">
       <h2>
        {{secondsText}}
       </h2>
       <div>
        <b>
         {{time.seconds}}
        </b>
        {{secondsLabel}}
       </div>
      </div>
     </div>
    </div>
   </div>
  </main>
 </body>
</html>
