body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: block; /* Changed from flex to block */
    background-color: #282c34;
    overflow: hidden;
    position: relative;
}
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.clock-container {
    position: absolute;
    width: 130vmin;
    height: 130vmin; /* Adjusted height to be square */
    top: 50%;
    left: 50%;
    margin-top: -65vmin; /* Negative half of height */
    margin-left: -65vmin; /* Negative half of width */
}
.clock-face, .clock-hand, .clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.clock-face {
    width: 62.5%;
    height: 62.5%;
}
.hour-hand, .minute-hand, .second-hand {
    -webkit-transform-origin: 50% 75%; /* Set the origin to 3/4 down the hand */
    -moz-transform-origin: 50% 75%; /* Set the origin to 3/4 down the hand */
    transform-origin: 50% 75%; /* Set the origin to 3/4 down the hand */
}
.hour-hand {
    width: 2.625%;
    height: 24.375%;
    background-size: cover;
}
.minute-hand {
    width: 2.375%;
    height: 33.75%;
    background-size: cover;
}
.second-hand {
    width: 1%;
    height: 25%;
    background-size: cover;
}
.hour-shadow, .minute-shadow, .second-shadow {
    -webkit-transform-origin: 50% 75%;
    -moz-transform-origin: 50% 75%;
    transform-origin: 50% 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -75%) rotate(0deg);
    -moz-transform: translate(-50%, -75%) rotate(0deg);
    transform: translate(-50%, -75%) rotate(0deg);
    opacity: 0.8;
}
.hour-shadow {
    width: 5.1875%;
    height: 26.5%;
    background-size: cover;
}
.minute-shadow {
    width: 4.75%;
    height: 35.25%;
    background-size: cover;
}
.second-shadow {
    width: 8.125%;
    height: 31.625%;
    background-size: cover;
}
.second-center {
    width: 2.125%;
    height: 2.125%;
    background-size: cover;
}
.rivet {
    width: 0.875%;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.second-end {
    width: 550%;
    height: 22.5%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -70%);
    -moz-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%);
}
.toggle-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    font-size: 16px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    z-index: 1; /* Ensure the button is above other elements */
}