@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz@8..60&display=swap');

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;
}
.headline-font {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.widget-wrapper {
    position: absolute;
    width: 96vw;
    height: 90vh;
    padding: 5vh 2vw;
    visibility:hidden;
}
.widget-background {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.widget-heading {
    height: 20vh;
    text-align: center;
    color: #333;
}
.widget-heading > h1 {
    margin: 0;
    padding-top: 4vh;
    font-weight: 400;
    font-size: 8vh;
}
.widget-heading > hr {
    border-style: solid;
    opacity: .50;
    border-width: .3vh;
    width: 14vh;
}
.play-pause-btn {
    position: absolute;
    top: 7.25vh;
    right: 24vw;
    background: rgba(255, 255, 255, 0.15);
    border: .3vh solid currentColor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    width: 5.5vh;
    height: 5.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease;
}
.play-pause-btn svg {
    width: 2.8vh;
    height: 2.8vh;
    margin-left: 0.2vh;
}
.play-pause-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}
.widget-data {
    overflow: hidden;
}
.widget-data .counter {
    text-align:right;
    float: left;
}
.widget-data .counter .label {
    width: 100%;
    margin: 0;
    font-weight: normal;
    text-transform: uppercase;
    color: #707070;
    white-space: nowrap;
}
.widget-data .counter .value {
    width: 100%;
    margin: 0;
    font-weight: bold;
    color: #3f3f3f;
    white-space: nowrap;
}
.widget-data .counter .value * {
    font-family: "Helvetica Neue", sans-serif;
}

/* orientation-specific styles (default) */
.widget-data                 { width: 76vw; padding: 0 14vw 0 6vw; }
.widget-data .counter        { width: 28vw; height: 25vh; padding: 5vh 10vw 5vh 0; }
.widget-data .counter .label { font-size: 4.4vh; height: 5vh; line-height: 5vh; }
.widget-data .counter .value { font-size: 13vh; height: 20vh; }

/* orientation-specific styles (8:3) */
@media (max-aspect-ratio: 8/3) {
    .widget-data                 { width: 80vw; padding: 0 12vw 0 4vw; }
    .widget-data .counter        { width: 30vw; padding: 5vh 10vw 5vh 0; }
    .play-pause-btn              { right: 22vw; }
}

/* orientation-specific styles (7:3) */
@media (max-aspect-ratio: 7/3) {
    .widget-data                 { width: 88vw; padding: 0 8vw 0 0; }
    .widget-data .counter        { width: 36vw; padding: 5vh 8vw 5vh 0; }
    .play-pause-btn              { right: 16vw; }
}

/* orientation-specific styles (6:3) */
@media (max-aspect-ratio: 6/3) {
    .widget-data .counter        { width: 36vw; padding: 5vh 8vw 5vh 0; }
    .widget-data .counter .label { font-size: 3.5vh; }
    .widget-data .counter .value { font-size: 11vh; }
}

/* orientation-specific styles (5:3) */
@media (max-aspect-ratio: 5/3) {
    .widget-data .counter .label { font-size: 3vh; }
    .widget-data .counter .value { font-size: 8.8vh; }
}

/* orientation-specific styles (4:3) */
@media (max-aspect-ratio: 4/3) {
    .widget-data .counter .label { font-size: 2.5vh; }
    .widget-data .counter .value { font-size: 6.5vh; }
}

/* orientation-specific styles (3:3) */
@media (max-aspect-ratio: 3/3) {
    .widget-data .counter        { width: 66vw; height: 17.5vh; padding: 0 30vw 0 0; }
    .widget-data .counter .value { font-size: 7vh; height: 12.5vh; }
}

/* orientation-specific styles (2:3) */
@media (max-aspect-ratio: 2/3) {
    .widget-data .counter        { width: 72vw; height: 17.5vh; padding: 0 24vw 0 0; }
    .widget-data .counter .value { font-size: 6vh; }
}


.please-wait {
    text-align: center;
    font-size: 3vw;
    color:#3f3f3f;
}
.please-wait h3 {
    font-weight: 500;
    font-size: 5vh;
    margin: 5vh;
}
.please-wait p {
    font-size: 4vh;
}

.timer{
    width: 8vh;
    height: 8vh;
    background-color: transparent;
    box-shadow: inset 0 0 0 .6vh #ccc;
    border-radius: 50%;
    position: relative;
    margin: 2vh auto 4vh;
}
.timer:after, .timer:before{
    position: absolute;
    content:"";
    background-color:#ccc;
}
.timer:after{
    width: 3.2vh;
    height: .4vh;
    top: 4vh;
    left: 4vh;
    -webkit-transform-origin: .2vh .2vh;
    -moz-transform-origin: .2vh .2vh;
    transform-origin: .2vh .2vh;
    -webkit-animation: minhand 6s linear infinite;
    -moz-animation: minhand 6s linear infinite;
    animation: minhand 6s linear infinite;
}
.timer:before{
    width: 2vh;
    height: .4vh;
    top: 4vh;
    left: 4vh;
    -webkit-transform-origin: .2vh .2vh;
    -moz-transform-origin: .2vh .2vh;
    transform-origin: .2vh .2vh;
    -webkit-animation: hrhand 12s linear infinite;
    -moz-animation: hrhand 12s linear infinite;
    animation: hrhand 12s linear infinite;
}

@-webkit-keyframes minhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
@-webkit-keyframes hrhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

.spinner {
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    margin-left: -10vh;
    margin-top: -10vh;
}
.spinner > div {
    width: 3.6vh;
    height: 3.6vh;
    margin: 0 1vh;
    background-color: #fff;
    border:.4vh solid rgba(0,0,0,.5);
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bounce 1.4s infinite ease-in-out both;
    animation: bounce 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bounce {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
    0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

.fade-in {
    display:block;
    animation-name: fade-in;
    -webkit-animation-name: fade-in;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}

/* adjust the animation speed of the odometer */
.odometer.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition-duration: 1s !important;
    -moz-transition-duration: 1s !important;
    -ms-transition-duration: 1s !important;
    -o-transition-duration: 1s !important;
    transition-duration: 1s !important
}