:root{
    --black: #000;
    --grey: #1a1915;
    --off-white: #dad7d2;
    --hand-shadow: -3px 3px 11px 1px #2f2f2f45;
    --clock-diameter : 25rem;
    color-scheme: only light;
}
body {
    background-color: rgb(255, 255, 255);
    background-image: linear-gradient(to right bottom, #fff, #cdcdcb);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100vw;
    block-size: 100svh;
    margin: 0;
    font-family: "Air American", sans-serif;
}
.clock-frame{
    background-color: var(--off-white);
    background-image: radial-gradient( var(--off-white), #e5e5e5);
    border: calc(var(--clock-diameter) * .04) solid black;
    border-radius: 50%;
    inline-size: var(--clock-diameter);
    block-size: var(--clock-diameter);
    position: relative;
    box-shadow: 19px 9px 22px 0px #2f2f2f45, 17px 13px 27px 4px #5444266b inset;
    display:none;
}
.clock-frame > *{
    position: absolute;
}
.clock-face{
    inline-size: 100%;
    block-size: 100%;
}
.clock-face span {
    display: block;
    position: absolute;
    inset-block-start: 45%;
    inset-inline-start: 49.5%;
    inline-size: 1%;
    block-size: 10%;
    background-color: var(--black);
    border-radius: calc(var(--clock-diameter) * .004);
}
.clock-face span::before {
    content: '';
    display: block;
    inline-size: 3%;
    block-size: 130%;
    background-color: var(--black);
    position: absolute;
}
.clock-face span:nth-of-type(1)::before {
    transform: rotate(0deg);
    inset-block-start: -118%;
    inset-inline-start: 45%;
}
.clock-face span:nth-of-type(2)::before {
    transform: rotate(-30deg);
    inset-block-start: -113%;
    inset-inline-start: -245%;
}
.clock-face span:nth-of-type(3)::before {
    transform: rotate(-60deg);
    inset-block-start: -94%;
    inset-inline-start: -482%;
}
.clock-face span:nth-of-type(4)::before {
    transform: rotate(-90deg);
    inset-block-start: -64%;
    inset-inline-start: -579%;
}
.clock-face span:nth-of-type(5)::before {
    transform: rotate(-120deg);
    inset-block-start: -32%;
    inset-inline-start: -494%;
}
.clock-face span:nth-of-type(6)::before {
    transform: rotate(-150deg);
    inset-block-start: -7%;
    inset-inline-start: -304%;
}
.clock-face span:nth-of-type(7)::before {
    transform: rotate(-180deg);
    inset-block-start: 4%;
    inset-inline-start: 45%;
}
.clock-face span:nth-of-type(8)::before {
    transform: rotate(-210deg);
    inset-block-start: -8%;
    inset-inline-start: 394%;
}
.clock-face span:nth-of-type(9)::before {
    transform: rotate(-240deg);
    inset-block-start: -31%;
    inset-inline-start: 617%;
}
.clock-face span:nth-of-type(10)::before {
    transform: rotate(-270deg);
    inset-block-start: -63%;
    inset-inline-start: 685%;
}
.clock-face span:nth-of-type(11)::before {
    transform: rotate(-300deg);
    inset-block-start: -97%;
    inset-inline-start: 605%;
}
.clock-face span:nth-of-type(12)::before {
    transform: rotate(-330deg);
    inset-block-start: -121%;
    inset-inline-start: 345%;
}
/*Clock Hands Section */
.clock-hands{
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    /* z-index: 1; */
}
.clock-hands > *{
    position: absolute;
}
.clock-hands .hex-nut{
    inset-block-start: 47%;
    inset-inline-start: 47%;
    inline-size: 6%;
    block-size: 6%;
    background-color: var(--black);
    border-radius: 50%;
}
.clock-hands .cap-nut {
    inset-block-start: 48.5%;
    inset-inline-start: 48.75%;
    inline-size: 2.5%;
    block-size: 3%;
    background-color: var(--grey);
    z-index: 2;
    opacity: .6;
    border-radius: 0% 0% 50% 50%;
}
.clock-hands .hour-hand {
    display: block;
    inset-block-start: 32.5%;
    inset-inline-start: 32.5%;
    inline-size: 35%;
    block-size: 35%;
    z-index: 2;
    position: absolute;
}
.clock-hands .hour-hand::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 20%;
    inset-inline-start: 48.5%;
    inline-size: 3%;
    block-size: 100%;
    background-color: var(--black);
    box-shadow: 0px 0px 1px var(--black);
    box-shadow: var(--hand-shadow);
}
.clock-hands .min-hand {
    display: block;
    inset-block-start: 25%;
    inset-inline-start: 25%;
    inline-size: 50%;
    block-size: 50%;
    z-index: 2;
    position: relative;
}
.clock-hands .min-hand::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 28%;
    inset-inline-start: 49%;
    inline-size: 2%;
    block-size: 98%;
    background-color: var(--black);
    box-shadow: 0px 0px 1px var(--black);
    box-shadow: var(--hand-shadow);
}
.clock-hands .second-hand {
    display: block;
    inset-block-start: 40%;
    inset-inline-start: 40%;
    inline-size: 20%;
    block-size: 20%;
    z-index: 2;
    position: absolute;
}
.clock-hands .second-hand::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(49% + (calc(var(--clock-diameter) * .004)/2)) ;
    inline-size: 2%;
    block-size: 2%;
    border-right: calc(var(--clock-diameter) * .004) solid transparent;
    border-left: calc(var(--clock-diameter) * .004) solid transparent;
    border-top: calc(.5 *var(--clock-diameter)) solid var(--black);
    box-shadow: var(--hand-shadow);
}
.clock-hands .second-hand::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: -21%;
    inset-inline-start: 49%;
    inline-size: 7%;
    block-size: 49%;
    background-color: var(--black);
    border-radius: 0 0 calc(var(--clock-diameter) * .02) calc(var(--clock-diameter) * .02);
    box-shadow: 0px 0px 1px var(--black);
    box-shadow: var(--hand-shadow);
}
/* Details Styles */
.details {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    justify-content: center;
}
.details > *{
    z-index: 1;
}
.details .city {
    margin-block-start: 27%;
    font-size: calc(var(--clock-diameter) * .08);
    color: var(--black);
}
.details .day {
    position: absolute;
    inset-block-start: 46%;
    inset-inline-end: 22%;
    font-size: calc(var(--clock-diameter) * .042);
    border: calc(var(--clock-diameter) * .004) solid #e5e5e5;
    background: #e7e7e7;
    color: #2d2d2d;
    display: flex;
}
.details .day > *{
    padding:calc(var(--clock-diameter) * .015);
    display: inline-block;
    box-shadow: 1px 2px 3px 0px #b2b2b2 inset;
}
.details .day .name{
    border-inline-end: solid calc(var(--clock-diameter) * .004) #bbb;
    font-weight: 600;
}

/* Style Options */
.audio {
    position: absolute;
    inset-block-end: calc(var(--clock-diameter) * .04);
    inset-inline-end: calc(var(--clock-diameter) * .04);
}
.audio .icon {
    block-size: calc(var(--clock-diameter) * .05);
    inline-size: calc(var(--clock-diameter) * .065);
    position: absolute;
    inset-block-end: calc(var(--clock-diameter) * .04);
    inset-inline-end: calc(var(--clock-diameter) * .04);
    cursor: pointer;
}
.audio .icon img{
    block-size: auto;
    max-inline-size: 100%;
}
.popup {
    position: absolute;
    inset-block-start:  calc(var(--clock-diameter) * -.081);
    inset-inline-end: 0;
    animation: scale-pulse 1s ease-in-out 10;
    display: block;
    cursor: pointer;
    font-size: calc(var(--clock-diameter) * .031);
    padding: calc(var(--clock-diameter) * .015);
    border-radius:calc(var(--clock-diameter) * .015);
    inline-size: max-content;
}
.audio img.active{
    animation: scale-pulse 1s ease-in-out infinite;
}


/* Dark Styles */
body.dark {
    background-image: none;
    background: #181818;
}
.dark .clock-frame{
    background-color: #212121;
    background-image: none;
    outline: calc(var(--clock-diameter) * .04) solid rgb(58, 58, 58);   
    box-shadow: 19px 9px 22px 0px #20202045, 17px 13px 27px 4px #2222226b inset;
    border: none;
}
.dark .clock-face span {
    background-color: #bbb;
}
.dark .clock-face span::before {
    background-color: #bbb;
}
.dark .clock-hands .second-hand::after {
    background-color: black;
    block-size: 15rem;
    inline-size: 4%;
    border: none;
    inset-inline-start: 50.5%;
}

@keyframes scale-pulse {
    0%{
        scale: 1;
    }
    50%{
        scale: 1.1;
    }
    100%{
        scale: 1;
    }
}

@media(max-width: 500px){
    :root{
        --clock-diameter: 80vw;
    }
}