@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #ff00009e;
  max-height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7rem;
}

.clock { 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 400px;
  background: url(https://i.postimg.cc/xjsKqk26/Clock.jpg);
  background-size: cover;
  border-radius: 50%;
  border: 4px solid #091921;
}

.clock:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  z-index: 1000;
}

.clock .hour,
.clock .minute,
.clock .second {
  position: absolute;
}

.clock .hour,
.hr {
  width: 150px;
  height: 150px;
}

.clock .minute,
.min {
  width: 200px;
  height: 200px;
}

.clock .second,
.sec {
  width: 250px;
  height: 250px;
}


.hr,
.min,
.sec {
  display: flex;
  position: absolute;
  justify-content: center;
  border-radius: 50%;
}


.hr::before {
  content: "";
  width: 8px;
  height: 80px;
  position: absolute;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 6px 6px 0 0;
  z-index: 10;
}

.min:before {
  content: "";
  width: 5px;
  height: 100px;
  position: absolute;
  background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  border-radius: 6px 6px 0 0;
  z-index: 11;
}

.sec:before {
  content: "";
  width: 3px;
  height: 120px;
  position: absolute;
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
  border-radius: 6px 6px 0 0;
  z-index: 12;
}

span {
  font-size: 8rem;
  font-family: "Dancing Script", cursive;
  padding: 0 2rem 0 2rem;
}

.top {
  display: flex;
  justify-content: center;
  align-items: center;
}