.time-info[data-v-46d717cb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
}
.time[data-v-46d717cb] {
  display: flex;
  font-family: 'Roboto Mono', sans-serif;
  font-size: 5em;
}
@media screen and (max-width: 420px) {
.time[data-v-46d717cb] {
    font-size: 19vw;
}
}
.minute[data-v-46d717cb] {
  margin: 0 0.3em;
}
.timezone[data-v-46d717cb] {
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 420px) {
.timezone[data-v-46d717cb] {
    font-size: 7.5vw;
}
}

.music[data-v-06073fa5] {
  width: 250px;
  height: 125px;
}
.music:hover .soundcloud[data-v-06073fa5] {
  width: 100%;
  height: 100%;
}
.soundcloud[data-v-06073fa5] {
  border: none;
  width: 20px;
  height: 20px;
  transition: width 100ms ease-out, height 100ms ease-out;
  will-change: width, height;
}

.video-wrapper[data-v-3e394afb] {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000;
}
.video[data-v-3e394afb] {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  user-select: none;
}
.hide {
  display: none;
}
.music {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}
.button-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.play-button {
  position: relative;
  top: 5em;
  font-size: 1.5em;
  padding: 0.2em 0.8em 0.3em 0.5em;
  border: 2px solid HSL(var(--overlay-hue) 50% 50%);
  border-radius: 0.2em;
  background-color: HSL(var(--overlay-hue) 50% 70%);
  box-shadow: 2px 2px 5px 0px HSL(var(--overlay-hue) 50% 50%);
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 70ms ease-out;
  pointer-events: auto;
}
.play-button:hover {
  filter: brightness(1.1);
}
.play-button:active {
  filter: brightness(0.9);
  box-shadow: none;
  transform: translate(3px, 3px);
}
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  will-change: transform;
}
.overlay.lower {
  background-color: #fff;
}
.overlay.lower .time-info {
  color: HSL(var(--overlay-hue) 50% 70%);
}
.overlay.upper {
  background: linear-gradient(HSL(var(--overlay-hue) 50% 70%), HSL(var(--overlay-hue) 50% 70%));
  background-repeat: no-repeat;
}
.overlay.upper .time-info {
  color: #fff;
}
#app.invert .overlay.upper {
  background: #fff;
}
#app.invert .overlay.upper .time-info {
  color: HSL(var(--overlay-hue) 50% 70%);
}
#app.invert .overlay.lower {
  background: linear-gradient(HSL(var(--overlay-hue) 50% 70%), HSL(var(--overlay-hue) 50% 70%));
  background-repeat: no-repeat;
}
#app.invert .overlay.lower .time-info {
  color: #fff;
}
.overlay.enter-left {
  animation: enterLeft 300ms forwards;
}
.overlay.enter-left .time-info {
  animation: enterRight 300ms forwards;
}
.overlay.enter-right {
  animation: enterRight 300ms forwards;
}
.overlay.enter-right .time-info {
  animation: enterLeft 300ms forwards;
}
.overlay.enter-top {
  animation: enterTop 300ms forwards;
}
.overlay.enter-top .time-info {
  animation: enterBottom 300ms forwards;
}
.overlay.enter-bottom {
  animation: enterBottom 300ms forwards;
}
.overlay.enter-bottom .time-info {
  animation: enterTop 300ms forwards;
}
.overlay.exit-left {
  animation: exitLeft 300ms forwards;
}
.overlay.exit-left .time-info {
  animation: exitRight 300ms forwards;
}
.overlay.exit-right {
  animation: exitRight 300ms forwards;
}
.overlay.exit-right .time-info {
  animation: exitLeft 300ms forwards;
}
.overlay.exit-top {
  animation: exitTop 300ms forwards;
}
.overlay.exit-top .time-info {
  animation: exitBottom 300ms forwards;
}
.overlay.exit-bottom {
  animation: exitBottom 300ms forwards;
}
.overlay.exit-bottom .time-info {
  animation: exitTop 300ms forwards;
}
@-moz-keyframes enterLeft {
from {
    transform: translateX(-100%);
}
to {
    transform: translateX(0);
}
}
@-webkit-keyframes enterLeft {
from {
    transform: translateX(-100%);
}
to {
    transform: translateX(0);
}
}
@-o-keyframes enterLeft {
from {
    transform: translateX(-100%);
}
to {
    transform: translateX(0);
}
}
@keyframes enterLeft {
from {
    transform: translateX(-100%);
}
to {
    transform: translateX(0);
}
}
@-moz-keyframes exitLeft {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-100%);
}
}
@-webkit-keyframes exitLeft {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-100%);
}
}
@-o-keyframes exitLeft {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-100%);
}
}
@keyframes exitLeft {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-100%);
}
}
@-moz-keyframes enterRight {
from {
    transform: translateX(100%);
}
to {
    transform: translateX(0);
}
}
@-webkit-keyframes enterRight {
from {
    transform: translateX(100%);
}
to {
    transform: translateX(0);
}
}
@-o-keyframes enterRight {
from {
    transform: translateX(100%);
}
to {
    transform: translateX(0);
}
}
@keyframes enterRight {
from {
    transform: translateX(100%);
}
to {
    transform: translateX(0);
}
}
@-moz-keyframes exitRight {
from {
    transform: translateX(0);
}
to {
    transform: translateX(100%);
}
}
@-webkit-keyframes exitRight {
from {
    transform: translateX(0);
}
to {
    transform: translateX(100%);
}
}
@-o-keyframes exitRight {
from {
    transform: translateX(0);
}
to {
    transform: translateX(100%);
}
}
@keyframes exitRight {
from {
    transform: translateX(0);
}
to {
    transform: translateX(100%);
}
}
@-moz-keyframes enterTop {
from {
    transform: translateY(-100%);
}
to {
    transform: translateY(0);
}
}
@-webkit-keyframes enterTop {
from {
    transform: translateY(-100%);
}
to {
    transform: translateY(0);
}
}
@-o-keyframes enterTop {
from {
    transform: translateY(-100%);
}
to {
    transform: translateY(0);
}
}
@keyframes enterTop {
from {
    transform: translateY(-100%);
}
to {
    transform: translateY(0);
}
}
@-moz-keyframes exitTop {
from {
    transform: translateY(0);
}
to {
    transform: translateY(-100%);
}
}
@-webkit-keyframes exitTop {
from {
    transform: translateY(0);
}
to {
    transform: translateY(-100%);
}
}
@-o-keyframes exitTop {
from {
    transform: translateY(0);
}
to {
    transform: translateY(-100%);
}
}
@keyframes exitTop {
from {
    transform: translateY(0);
}
to {
    transform: translateY(-100%);
}
}
@-moz-keyframes enterBottom {
from {
    transform: translateY(100%);
}
to {
    transform: translateY(0);
}
}
@-webkit-keyframes enterBottom {
from {
    transform: translateY(100%);
}
to {
    transform: translateY(0);
}
}
@-o-keyframes enterBottom {
from {
    transform: translateY(100%);
}
to {
    transform: translateY(0);
}
}
@keyframes enterBottom {
from {
    transform: translateY(100%);
}
to {
    transform: translateY(0);
}
}
@-moz-keyframes exitBottom {
from {
    transform: translateY(0);
}
to {
    transform: translateY(100%);
}
}
@-webkit-keyframes exitBottom {
from {
    transform: translateY(0);
}
to {
    transform: translateY(100%);
}
}
@-o-keyframes exitBottom {
from {
    transform: translateY(0);
}
to {
    transform: translateY(100%);
}
}
@keyframes exitBottom {
from {
    transform: translateY(0);
}
to {
    transform: translateY(100%);
}
}


/*# sourceMappingURL=style.css.map*/