@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2f363e;
}
.container {
  position: relative;
  background: #2f363e;
  /* min-height: 500px; */
  border-radius: 20px;
  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(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}
h2 {
  color: #fff;
  font-size: 2em;
  opacity: 0.25;
  font-weight: 600;
  text-shadow: 0 0 0 20px rgba(0, 0, 0, 0.75);
}
.clock {
  position: relative;
  width: 450px;
  height: 450px;
  background: #2f363e;
  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(0, 0, 0, 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;
  background: #2f363e;
  border-radius: 50%;
  z-index: 19900;
}
.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;
  display: inline-block;
  transform: rotate(calc(-30deg * var(--i)));
}
.circle {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 10;
}
.circle i {
  position: absolute;
  width: 6px;
  height: 50%;
  background: var(--clr);
  opacity: 0.75;
  transform-origin: bottom;
  transform: scaleY(0.5);
}
.circle:nth-child(1) i {
  width: 2px;
}
.circle:nth-child(2) i {
  width: 6px;
}
.circle1 {
  width: 240px;
  height: 240px;
  z-index: 9;
}
.circle2 {
  width: 180px;
  height: 180px;
  z-index: 8;
}

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

@media screen and (max-width:600px) {
    .clock,.container{
        width: 420px;
        height: 420px;
        justify-content: center;
        align-items: center;
    }
    
}