@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full height of the viewport */
    background: #FFFFFF; /* default light background */
    font-family: 'Pacifico', sans-serif;
    margin: 0; /* Remove negative margin to avoid unwanted scroll */
    overflow: hidden; /* Hide any overflow */
}


@media (prefers-color-scheme: dark) {
    body {
        background-color: #191919;
        color: white;
    }
}

.clock {
    background: #F68657;
    width: 83vmin; /* 100% of the viewport's smaller dimension */
    height: 83vmin; /* Same as width to maintain aspect ratio */
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



.clock:before, .clock:after {
    content: '';
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -10%;
    z-index: -1;
    background: #70BD63;
}

.clock:before {
    width: 3%;
    height: 12%;
    transform: rotate(10deg);
}

.clock:after {
    width: 8%;
    height: 16%;
    right: 15%;
    transform: rotate(-40deg);
    border-radius: 100% 30% 50% 0;
}

.middle1 {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5%;
    height: 5%;
    background: #DB490C; /* darken orange */
    border-radius: 50%;
    z-index: 3; /* Set highest z-index for the middle dot */
}

.middle {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5%;
    height: 5%;
    background: #DB490C; /* darken orange */
    border-radius: 50%;
    z-index: 0; /* Lower z-index to place behind time indicators */
}

.middle:before, .middle:after {
    content: '';
    position: absolute;
    background: #F47C47; /* Orange color */
    width: 80%;
    height: 80%;
    border-radius: 50%;
    left: 400%;
    top: 150%;
    box-shadow: -20vmin -10vmin 0 0 #F47C47,
                -10vmin -24vmin 0 0 #F47C47,
                4vmin 10vmin 0 0 #F47C47,
                -20vmin 14vmin 0 0 #F47C47,
                -30vmin 4vmin 0 0 #F47C47;
    z-index: 0; /* Lower z-index to place behind time indicators */
}

.hour, .minute, .second {
    position: absolute;
    margin: auto;
    left: 49%;
    bottom: 50%;
    background: #AB3909; /* hour hand */
    width: 2%;
    transform-origin: 50% 100%;
    z-index: 2; /* Set z-index higher than scattered dots but lower than middle dot */
}

.hour {
    height: 40%;
}

.minute {
    height: 48%;
    background: #DB490C; /* minute hand */
}

.second {
    background: #F46930; /* second hand */
    width: 1%;
    left: 49.5%;
    height: 48%;
}