* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background-image: url("clock.avif");
    background-repeat: no-repeat;
    background-size: cover;
}
.container {
    position:relative;
    background:rgba(47, 54, 62, 0.3);
    min-height: 500px;
    border-radius:20px;
    box-shadow:25px 25px 75px rgba(0,0,0,0.75), 10px 10px 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);
    border-top-left-radius:225px;
    border-top-right-radius:225px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-left: 50%;
}
.clock {
    position:relative;
    width:450px;
    height:450px;
    background:rgba(47, 54, 62, 0.5);
    border-radius:50%;
    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;
    margin-bottom:30px;
}
.clock::before {
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border: 3px solid #fff;
    border-radius:50%;
    z-index:100000;
}
.clock span {
    position:absolute;
    inset:20px;
    color:#fff;
    text-align:center;
    transform:rotate(calc(30deg * var(--i)));
}
.clock span b {
    font-size:2em;
    opacity:0.25;
    font-weight:600;
    transform:rotate(calc(-30deg * var(--i)));
    display: inline-block;
}
.circle {
    position:absolute;
    width:300px;
    height:300px;
    border:2px solid rgba(0,0,0,0.25);
    border-radius:50%;
    z-index:10;
    display:flex;
    justify-content:center;
    align-items:felx-start;
}
.circle i {
    position:absolute;
    width:6px;
    height:50%;
    background:var(--clr);
    opacity:0.75;
    transform-origin:bottom;
    transform: scaleY(0.5);
}
.circle2 {
    width:240px;
    height:240px;
}
.circle3 {
    width:180px;
    height:180px;
}
.circle:nth-child(1) i {width:2px;}
.circle:nth-child(2) i {width:6px;}
.circle::before {
    content:'';
    position:absolute;
    top:-8.5px;
    width:15px;
    height:15px;
    background:var(--clr);
    border-radius:50%;
    box-shadow:0 0 20px var(--clr), 0 0 60px var(--clr);
}
#time {
    margin-bottom: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:#fff;
}
#time div:nth-child(2)::after {
    animation:animate 1s steps(1) infinite;
}
@keyframes animate {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
}
@media only screen and (max-width:1000px) {
    .container {margin-left: 40%;}
}
@media only screen and (max-width:830px) {
    .container {margin-left: 30%;}
   }
@media only screen and (max-width:710px) {
    .container {margin-left: 20%;}
}
@media only screen and (max-width:620px) {
    .container {margin-left: 1%;}
    }