/* General styles */
body {
    margin: 0;
    padding: 0;
    background-color: #000; /* Background color of your NFT */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.clock-container {
    width: 690px; /* Adjust the size of your clock container */
    height: 690px;
    position: relative; /* Set the clock face as a relative position for absolute positioning */
}

.clock-face {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); /* Engraved look for the clock face */
}

/* Red lines on top of the hour and minute hands */
.hour-hand::before,
.minute-hand::before,
.hour-line,
.minute-line {
    content: "";
    position: absolute;
    width: 2px; /* Width of the lines */
    height: 50%; /* Height of the lines */
    background-color: whitesmoke; /* Color of the lines */
    top: 50%; /* Position the line at the middle of the hand */
    left: 50%;
    transform-origin: center bottom; /* Set the transform origin to the bottom center */
    transform: translateX(-50%);
    z-index: 2; /* Set a higher z-index to place them on top of the clock hands */
}

.hour-hand, .minute-hand, .second-hand {
    position: absolute;
    background-color: #000; /* Color of the clock hands */
    transform-origin: center bottom; /* Set the transform origin to the bottom center */
    left: 50%; /* Horizontally center the clock hands */
    bottom: 50%; /* Vertically center the clock hands */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Add a subtle shadow effect */
    z-index: 1; /* Set a higher z-index to ensure the hands are above the date */
}

.hour-hand {
    width: 12px; /* Adjust the width of the hour hand */
    height: 18%; /* Adjust the height of the hour hand */
    transform: translateX(-50%);
    background-color: black; /* Set the color of the hour hand to white */
}

.minute-hand {
    width: 12px; /* Adjust the width of the minute hand */
    height: 28%; /* Adjust the height of the minute hand */
    transform: translateX(-50%);
    background-color: black; /* Set the color of the minute hand to white */
}

.second-hand {
    width: 5px; /* Adjust the width of the second hand */
    height: 40%; /* Adjust the height of the second hand */
    background-color: whitesmoke; /* Set the color of the second hand to gold */
}

/* Styles for the date display */
.date-display {
    position: absolute;
    bottom: 35%; /* Adjust the vertical position of the date display */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: whitesmoke; /* Set the color of the date display text */
    font-size: 14px; /* Adjust the font size of the date display text */
    font-family: 'Your Desired Font', Verdana; /* Change 'Your Desired Font' to your desired font */
    padding: 2px 3px; /* Add padding to ensure the entire date is inside the clock */
    border-radius: 3px; /* Add a border radius for a neat look */
    background-color: silver; /* Add a semi-transparent background */
    z-index: 0; /* Set a lower z-index to ensure it's below the clock hands */
    text-shadow: 0.7px 0.7px 0.7px black; /* Add a dark shadow (horizontal offset, vertical offset, blur radius, shadow color) */
}

/* Add a partition line between day of the week and day of the month */
.day-of-week {
    border-right: 1px solid whitesmoke; /* Add a vertical line to separate the day of the week */
    padding-right: 5px; /* Add some spacing to the right of the day of the week */
}

.date-display::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
    z-index: -1; /* Place this layer behind the text */
    pointer-events: none; /* Ensure this layer doesn't interfere with clicks */
}

/* Style for the video layer */
.clock-video {
    width: 50%; /* Adjust the width to make it 50% smaller */
    height: 50%; /* Adjust the height to make it 50% smaller */
    position: absolute;
    top: 22%; /* Adjust the vertical position to center it */
    left: 24.75%; /* Adjust the horizontal position to center it */
    z-index: -2; /* Set a lower z-index to place the video behind the clock */
}