* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #2f363e;
}

.container {
    position: relative;
    background-color: #2f363e;
    /* min-height: 500px; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    flex-direction: column;
    gap: 40px;
    border-top-left-radius: 225px;
    border-top-right-radius: 225px;
    box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.75),
        10px 50px 70px rgba(0, 0, 0, 0.25),
        inset 5px 5px 10px rgba(0, 0, 0, 0.5),
        inset 5px 5px 20px rgba(255, 255, 255, 0.2),
        inset -5px -5px 15px rgba(0, 0, 0, 0.75);
}

.clock {
    position: relative;
    width: 450px;
    border-radius: 50%;
    height: 450px;
    background-color: #2f363e;
    box-shadow: 10px 50px 70px rgba(0, 0, 0, 0.25),
        inset 5px 5px 10px rgba(0, 0, 0, 0.5),
        inset 5px 5px 20px rgba(255, 255, 255, 0.2),
        inset -5px -5px 15px rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #2f363e;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 1000;
}

.clock span {
    position: absolute;
    inset: 20px;
    text-align: center;
    color: white;
    transform: rotate(calc(30deg * var(--i)));
}

.clock span b {
    font-size: 2rem;
    opacity: 0.25;
    transform: rotate(calc(-30deg * var(--i)));
    display: inline-block;
    font-weight: 600;
}

.circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10;
}

.circle2 {
    width: 240px;
    height: 240px;
    z-index: 9;
}

.circle3 {
    width: 180px;
    height: 180px;
    z-index: 8;
}

.circle:nth-child(1) i {
    width: 2px;
}

.circle:nth-child(2) i {
    width: 6px;
}

.circle i {
    position: absolute;
    width: 6px;
    height: 50%;
    background-color: var(--clr);
    opacity: 0.75;
    border-radius: 100px;
    transform-origin: bottom;
    transform: scaleY(0.5);
}

.circle::before {
    content: '';
    position: absolute;
    width: 15px;
    top: -8.5px;
    box-shadow: 0px 0px 20px var(--clr),
        0px 0px 60px var(--clr);
    height: 15px;
    background-color: var(--clr);
    border-radius: 50%;
}





#time{
    margin: 40px;
    display: flex;
    padding: 10px 20px;
    font-size: 2em;
    font-weight: 600;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
}
#time div{
    position: relative;
    width: 60px;
    text-align: center;
    font-weight: 500;
    color: var(--clr);
}
#time div:nth-child(1)::after,
#time div:nth-child(2)::after
{
    content: ':';
    position: absolute;
    right: -4px;
}
#time div:last-child{
    font-size: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
#time div:nth-child(2)::after{
    animation: animate 1s linear infinite;
}
@keyframes animate {
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}