Work Time!

class: center middle

# Work Time

.f4.center[
&#x1F469;&#x1F3FC;&#x200D;&#x1F4BB;
&#x1F468;&#x1F3FE;&#x200D;&#x1F4BB;
&#x1F469;&#x1F3FB;&#x200D;&#x1F4BB;
&#x1F469;&#x1F3FE;&#x200D;&#x1F4BB;
&#x1F468;&#x1F3FD;&#x200D;&#x1F4BB;
&#x1F468;&#x1F3FB;&#x200D;&#x1F4BB;
]

---

class: fullscreen bottom center
background-image: url('assets/img/bg/unsplash_2FPjlAyMQTA.jpg')
background-size: cover

<div class="countdown" id="all-hands" style="right:0;bottom:0;" data-warnwhen="15">
<code class="countdown-time"><span class="countdown-digits minutes">01</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>

<style type="text/css">
#all-hands.countdown{
  background: none;
  border: none!important;
  left: 0;
  right: 52%!important;
  font-size: 96px;
  box-shadow: none;
}
#all-hands.countdown .countdown-digits {
  color: white;
  font-weight: bold;
  font-family: var(--font-header);
}
#all-hands.countdown.running .countdown-digits {
  color: white;
}
#all-hands.countdown.warning .countdown-digits {
  color: var(--yellow);
}
#all-hands.countdown.finished .countdown-digits {
  color: var(--pink);
}
</style>

---

class: fullscreen bottom center
background-image: url('assets/img/bg/unsplash_vSchPA-YA_A.jpg')
background-size: cover

<div class="countdown" id="desk" style="right:0;bottom:0;" data-warnwhen="20">
<code class="countdown-time"><span class="countdown-digits minutes">03</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>

<style type="text/css">
#desk.countdown{
  background: none;
  border: none!important;
  left: 0;
  right: 0;
  top: 0px;
  padding-top: 0px !important;
  bottom: unset !important;
  font-size: 148px;
  box-shadow: none;
}
#desk.countdown .countdown-digits {
  color: var(--text);
  font-weight: bold;
  font-family: var(--font-header);
}
#desk.countdown.running .countdown-digits {
  color: var(--text);
}
#desk.countdown.warning .countdown-digits {
  color: var(--yellow);
}
#desk.countdown.finished .countdown-digits {
  color: var(--pink);
}
</style>

---

class: fullscreen bottom center
background-image: url('assets/img/bg/unsplash_RYyr-k3Ysqg.jpg')
background-size: cover

<div class="countdown" id="typing" style="right:40px;bottom:160px;" data-warnwhen="20">
<code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>

<style type="text/css">
#typing.countdown {
  background: none;
  border: none!important;
  padding: 0px !important;
  font-size: 242px;
  box-shadow: none;
  margin: 0;
}
#typing.countdown .countdown-digits {
  color: var(--text);
  font-weight: bold;
  font-family: var(--font-header);
}
#typing.countdown.running .countdown-digits {
  color: var(--green);
}
#typing.countdown.warning .countdown-digits {
  color: var(--gold);
}
#typing.countdown.finished .countdown-digits {
  color: var(--red);
}
</style>