@font-face {
    font-family: 'bariolThin';
    src: url('fonts/Bariol-Thin.woff') format('woff');
    font-display: fallback;
}

@font-face {
    font-family: 'bariolRegular';
    src: url('fonts/Bariol-Regular.woff') format('woff');
    font-display: fallback;
}

body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: black;
    height: 100vh;
    font-size: 5vw;
    font-family: 'bariolRegular', Arial, Helvetica, sans-serif;
}

.holder {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

clock-screen {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    overflow: hidden;
}

#location {
    display: inline-block;
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    padding: 2vw;
    text-align: center;
    font-size: 3vh;
    color: #151515;
}

timeline,
dateline {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
    order: 0;
    /* background-color: yellow; */
}

timeline {
    align-self: stretch;
    text-align: center;
    overflow: hidden;
}

dateline {
    /* transform-origin: 50% 0; */
    display: flex;
    align-self: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    /* background-color: pink; */
}

cf-time {
    transform-origin: 50% 0;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* background-color: blue; */
    font-size: 30vw;
}

day-holder,
#cf-wi,
date-holder {
    position: relative;
    margin: 0;
    padding: 0;
    order: 1;
    flex: 0 1 auto;
    align-self: auto;
    /* background-color: palegreen; */
}

timeline,
cf-time,
wb-time {
    font-family: 'bariolThin', Arial, Helvetica, sans-serif;
    line-height: 0.71em;
}


/* #cf-wi {
    background-color: orange;
} */

cf-date,
cf-day {
    position: absolute;
    top: 0;
    display: inline-block;
}

cf-day {
    right: 0;
    transform-origin: 100% 0;
    /* background-color: yellow; */
}

cf-date {
    top: 0;
    left: 0;
    transform-origin: 0 0;
    /* background-color: yellow; */
}

workbench {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
}

workbench>* {
    background-color: orange;
    box-sizing: border-box;
    display: inline-block;
}

#wb-wi {
    height: 19px
}

settings-screen,
weather-screen {
    visibility: hidden;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

settings-screen {
    background-color: black;
    color: white;
}

back-button {
    position: fixed;
    top: 1vmin;
    left: 1vmin;
    font-size: 5vmin;
}

button-holder {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: fixed;
    bottom: 1vmin;
    right: 1vmin;
    /* background-color: pink; */
}

cf-button {
    position: relative;
    display: inline-block;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0.15em;
    border-radius: 1em;
    border-color: black;
    padding: 0 0.5em;
    color: black;
    font-size: 5vmin;
}

weather-screen {
    background-color: rgb(35, 126, 91);
    color: black;
}

#settingsHolder {
    box-sizing: border-box;
    position: relative;
    top: 0;
    width: 100vmin;
    height: 100vh;
    /* background-color: hotpink; */
    left: calc((100vmax - 100vmin) / 2);
}

cf-setting {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 5vmin;
    padding: 1vmin;
    background-color: lightsalmon;
}

setting-label {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

setting-toggle {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

setting-toggle cf-button {
    color: white;
    border-color: white;
}

@media (orientation: portrait) {
    cf-time,
    wb-time {
        font-family: inherit;
        line-height: 0.85em;
    }
    #cf-wi {
        order: 0;
    }
    dateline {
        flex-direction: column;
    }
}

#clockTestHolder {
    margin-top: 10vh;
}

#clockTestHolder div {
    font-size: 25vw;
    margin: 4px;
    float: left;
    background-color: black;
    color: rgb(127, 127, 127);
    font-family: BariolThin, Arial, Helvetica, sans-serif;
}

#clockTestHolder div:nth-child(even) {
    background-color: white
}


/* 
c0 {
    margin-left: -0.045em;
    letter-spacing: -0.045em;
}

c0::before {
    content: '0'
}

c1 {
    margin-left: -0.05em;
    letter-spacing: -0.08em;
}

c1::before {
    content: '1';
}

c2 {
    margin-left: -0.06em;
    letter-spacing: -0.035em;
}

c2::before {
    content: '2';
}

c3 {
    margin-left: -0.045em;
    letter-spacing: -0.045em;
}

c3::before {
    content: '3';
}

c4 {
    margin-left: -0.035em;
    letter-spacing: -0.03em;
}

c4::before {
    content: '4';
}

c5 {
    margin-left: -0.045em;
    letter-spacing: -0.035em;
}

c5::before {
    content: '5';
}

c6 {
    margin-left: -0.055em;
    letter-spacing: -0.04em;
}

c6::before {
    content: '6';
}

c7 {
    margin-left: -0.035em;
    letter-spacing: -0.015em;
}

c7::before {
    content: '7';
}

c8 {
    margin-left: -0.035em;
    letter-spacing: -0.035em;
}

c8::before {
    content: '8';
}

c9 {
    margin-left: -0.055em;
    letter-spacing: -0.035em;
}

c9::before {
    content: '9';
} */

c0:first-child {
    margin-left: -0.055em;
}

c0:last-child {
    letter-spacing: -0.055em;
}

c0::before {
    content: '0'
}

c1:first-child {
    margin-left: -0.045em;
}

c1:last-child {
    letter-spacing: -0.095em;
}

c1::before {
    content: '1';
}

c2:first-child {
    margin-left: -0.05em;
}

c2:last-child {
    letter-spacing: -0.04em;
}

c2::before {
    content: '2';
}

c3:first-child {
    margin-left: -0.04em;
}

c3:last-child {
    letter-spacing: -0.055em;
}

c3::before {
    content: '3';
}

c4:first-child {
    margin-left: -0.025em;
}

c4:last-child {
    letter-spacing: -0.035em;
}

c4::before {
    content: '4';
}

c5:first-child {
    margin-left: -0.055em;
}

c5:last-child {
    letter-spacing: -0.055em;
}

c5::before {
    content: '5';
}

c6:first-child {
    margin-left: -0.055em;
}

c6:last-child {
    letter-spacing: -0.055em;
}

c6::before {
    content: '6';
}

c7:first-child {
    margin-left: -0.03em;
}

c7:last-child {
    letter-spacing: -0.03em;
}

c7::before {
    content: '7';
}

c8:first-child {
    margin-left: -0.05em;
}

c8:last-child {
    letter-spacing: -0.05em;
}

c8::before {
    content: '8';
}

c9:first-child {
    margin-left: -0.055em;
}

c9:last-child {
    letter-spacing: -0.055em;
}

c9::before {
    content: '9';
}

cdots {
    margin-left: -0.05em;
    letter-spacing: -0.05em;
}

cdots::before {
    content: ':';
}

#clockTestHolder c0 {
    margin-left: -0.045em;
    letter-spacing: -0.045em;
}

#clockTestHolder c1 {
    margin-left: -0.05em;
    letter-spacing: -0.08em;
}

#clockTestHolder c2 {
    margin-left: -0.06em;
    letter-spacing: -0.035em;
}

#clockTestHolder c3 {
    margin-left: -0.045em;
    letter-spacing: -0.045em;
}

#clockTestHolder c4 {
    margin-left: -0.035em;
    letter-spacing: -0.03em;
}

#clockTestHolder c5 {
    margin-left: -0.045em;
    letter-spacing: -0.035em;
}

#clockTestHolder c6 {
    margin-left: -0.055em;
    letter-spacing: -0.04em;
}

#clockTestHolder c7 {
    margin-left: -0.035em;
    letter-spacing: -0.015em;
}

#clockTestHolder c8 {
    margin-left: -0.035em;
    letter-spacing: -0.035em;
}

#clockTestHolder c9 {
    margin-left: -0.055em;
    letter-spacing: -0.035em;
}