:root {
    font-family: Inter, "Apple SD Gothic Neo", sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;

    --bg: #f1eee4;
    --txt: #2e2929;

    --white70: rgba(241, 238, 228, .8);

    --gray01: rgba(46, 41, 41, .01);
    --gray03: rgba(46, 41, 41, .03);
    --gray05: rgba(46, 41, 41, .05);
    --gray075: rgba(46, 41, 41, .075);

    --gray10: rgba(46, 41, 41, .1);
    --gray15: rgba(46, 41, 41, .15);

    --gray20: rgba(46, 41, 41, .2);
    --gray25: rgba(46, 41, 41, .25);

    --gray30: rgba(46, 41, 41, .3);

    --gray40: rgba(46, 41, 41, .4);

    --gray: rgba(46, 41, 41, .5);
    --gray60: rgba(46, 41, 41, .6);
    --gray70: rgba(46, 41, 41, .7);

    --red: #ef4444;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #2e2929;
        --txt: #f1eee4;


        --white70: rgba(241, 238, 228, .5);

        --gray01: rgba(241, 238, 228, .01);
        --gray03: rgba(241, 238, 228, .03);
        --gray05: rgba(241, 238, 228, .05);
        --gray075: rgba(241, 238, 228, .075);

        --gray10: rgba(241, 238, 228, .1);
        --gray15: rgba(241, 238, 228, .15);

        --gray20: rgba(241, 238, 228, .2);
        --gray25: rgba(241, 238, 228, .25);

        --gray30: rgba(241, 238, 228, .3);

        --gray40: rgba(241, 238, 228, .4);

        --gray: rgba(241, 238, 228, .5);
        --gray60: rgba(241, 238, 228, .6);
        --gray70: rgba(241, 238, 228, .7);

        --red: #f57b7b;
    }
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, "Apple SD Gothic Neo", sans-serif;
    }
}

* {
    outline: none;
    box-sizing: border-box;
    word-break: break-word;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -.025rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv09", "calt", "tnum", "case", "zero", "ss02";
}

body {
    background: var(--bg);
    color: var(--txt);
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

main {
    display: flex;
    flex-direction: column;
}

a {
    color: var(--gray);
    text-decoration: underline;
}

a:hover {
    color: var(--txt);
}

a:visited,
a:active {
    color: var(--gray);
}

.logo {
    text-align: right;
}

.sync-badge {
    margin-bottom: .5rem;
}

#sync-text {
    color: var(--gray);
    transition: all .2s ease;
}

.sync-badge.error #sync-text {
    color: var(--red);
}

.clock,
.solar {
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    border: solid .1rem var(--gray20);
    border-width: .1rem 0;
    margin: 1rem 0;
}

#solar {
    width: 100%;
}

.solar-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    font-size: 0.65rem;
    color: var(--gray60);
    padding: 0 .2rem;
    text-transform: uppercase;
}

.civil,
.nautical,
.astro {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.civil-badge,
.nautical-badge,
.astro-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .4rem;
    height: .4rem;
}

.civil-badge {
    border: solid .1rem rgba(255, 59, 25, 0.8);
    background: rgba(255, 59, 25, 0.6);
}

.nautical-badge {
    border: solid .1rem rgba(227, 100, 255, 0.8);
    background: rgba(227, 100, 255, 0.6);
}

.astro-badge {
    border: solid .1rem rgba(50, 50, 200, 0.8);
    background: rgba(50, 50, 200, 0.6);
}

span.act {
    color: var(--txt);
}

.total-daylight,
.solar-info {
    margin-top: .5rem;
}

.time,
.date {
    font-size: 6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.date {
    color: var(--gray);
    font-weight: 300;
}

.sep {
    color: var(--gray30);
    font-weight: 700;
}

.date .sep {
    font-weight: 300;
}

.ms {
    color: var(--gray30);
}

#millis {
    font-weight: 300;
    color: var(--txt);
}

.string {
    font-family: 'Instrument Serif', serif !important;
}

.string.ko {
    font-family: inherit !important;
}

.string.italic {
    font-style: italic;
}

.info {
    font-size: 0.85rem;
    color: var(--gray60);
    text-align: center;
}

.info.dim {
    font-size: 0.75rem;
    color: var(--gray);
}

.meta {
    font-size: .85rem;
    color: var(--gray);
    text-align: right;
    text-transform: uppercase;
}

.meta.left {
    text-align: left;
}

.meta.footer {
    text-transform: none;
    border-top: solid .1rem var(--gray20);
    margin-top: 1rem;
    padding-top: 1rem;
}

.meta span span,
.meta #total-daylight {
    color: var(--txt);
}

#clock-error {
    color: var(--txt);
    margin-bottom: .5rem;
}

@media (max-width: 640px) {
    main {
        width: 100%;
    }

    .time,
    .date {
        font-size: min(15vw, 4.5rem);
    }
}