@import url('https://fonts.googleapis.com/css2?family=Miranda+Sans:ital,wght@0,400..700;1,400..700&display=swap');

#clocks {
    
}

#clocks.text {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    /*z-index: 900;*/
}

#clocks #clock-standard {
    text-align: center;
}

    #clocks #clock-standard h1 {
        font-size: 30vw;
        font-family: "Miranda Sans", sans-serif;
        color: #ffffff;
        font-weight: 100;
    }

    #clocks #clock-standard h1 .period {
        /*font-size: 15vw;*/
        display: none;
    }

#clocks #clock-text #clock-container {
    width: 80vw;
    margin: auto;
    display: flex;
    flex-direction: column;
}

    @media (orientation: landscape) {
        #clocks #clock-text #clock-container {
            width: 80vh;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
    }

#clocks #clock-text .clock-row {
    width: 100%; 
    display: flex;
    flex-direction: row;
}

#clocks #clock-text .clock-letter {
    width: 8vw;
    height: 8vw;
    display: block;
    line-height: 60px;
    text-align: center;
    color: #828E82;
    font-family: "Lexend", Arial, sans-serif;
    font-weight: 400;
    font-size: 5vw;
        transition: all 1s ease-in;
        opacity: 0.3;
}

    @media (orientation: landscape) {
        #clocks #clock-text .clock-letter {
            width: 8vh;
            height: 8vh;
            font-size: 3vw;
        }
    }

#clocks #clock-text .active {
    font-weight: 700;
    text-shadow: 0 0 1vw #EBDBC2;
        color: #607B7D;
    transition: all 1s ease-in;
    opacity: 1;
}

#analogClock {
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #analogClock .clock {
        width: 80vw;
        height: 80vw;
        border-radius: 50%;
        position: relative;
    }

        @media (orientation: landscape) {
             #analogClock .clock {
                width: 80vh;
                height: 80vh;
             }
        }

    #analogClock .hand {
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform-origin: bottom center;
        transform: translateX(-50%) rotate(0deg);
    }

    #analogClock .hour {
        width: 6px;
        height: 28%;
        background: #000000;
    }

        @media (orientation: landscape) {
             #analogClock .hour {
                height: 28%;
             }
        }

    #analogClock .minute {
        width: 4px;
        height: 36%;
        background: #000000;
    }

        @media (orientation: landscape) {
             #analogClock .minute {
                height: 36%;
             }
        }

    #analogClock .second {
        width: 2px;
        height: 46%;
        background: #000000;
        opacity: 0.5;
    }

        @media (orientation: landscape) {
            #analogClock .second {
                height: 46%;
            }
        }

    #analogClock .center {
        position: absolute;
        width: 3vw;
        height: 3vw;
        background-image: url(../images/clock-middle.jpg);
        background-size: cover;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #analogClock .ticks {
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    }

    #analogClock .tick {
        position: absolute;
        width: 2px;
        height: 10%;
        background: #EBDBC2;
        opacity: 0.25;
        top: 0;
        left: 50%;
        transform-origin: center 500%; /* pushes it outward */
        transform: translateX(-50%) rotate(0deg);
    }

    #bg.analog {
        background-image: url(../images/clock-frame.png);
        background-size: 150% auto;
        background-position: center;
        background-repeat: no-repeat;
    }

        @media all and (orientation: landscape) {
            #bg.analog {
                background-size: auto 150%;
            }
        }

body.clockMode.analog #clocks.text {
    /*background-image: url(/wp-content/uploads/2026/05/clock-bg-vertical-scaled.jpg);
    background-size: contain;*/
    width: 100vw;
    height: 100vh;
}

body.clockMode.analog #clocks.text {
    
        background-image: url(../images/clock-bg.jpg);
        background-size: 150% auto;
        background-position: center;
        background-repeat: repeat;
}