@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

:root{
  --handColor: #33426d;
}

*{
  box-sizing: border-box;
}

body{
  font-family: poppins;
  min-height: 100vh;
  background: #607d8bd9;
}

.heading{
  text-align:center;
  color:#fff;
  font-size: 3rem;
  margin-top: 2rem;
  left: -13px;
  position: relative;
}

.clock-face{
  position:relative;
  height:300px;
  width:300px;
  border:10px solid #33426d;
  border-radius : 50%;
  margin: 3rem auto;
  background-color: #a4dff4;
}
.hand{
  width:40%;
  left:15%;
  position:absolute;
  color:black;
  top:48.5%;
  transform:rotate(90deg);
  transform-origin: 100%;
  transition-timing-function: cubic-bezier(0.03, 2.09, 0.58, 1);
  border-radius: 5px;
  background-color: var(--handColor);
  z-index: 2;
}
.minutes-hand{
  width:30%;
  left:56px;
  border:2px solid var(--handColor);
}
.hours-hand{
  width:20%;
  left:84px;
  border:4px solid var(--handColor);
}
.seconds-hand{
  left:27px;
  border:1px solid var(--handColor);
}

.centerdot{
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fbd84d;
  position:absolute;
  top:45.5%;
  left:0;
  right:0;
  margin:auto;
  border: 5px solid #33426d;
  z-index: 3;
}

.container {
  height: 350px;
  width: 350px;
  border: 10px solid #33426d;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:auto;
  background: linear-gradient(to left top, #f785a3, #f75478);
}

.bubble {
  height: 20%;
  width: 20%;
  background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
  border-radius: 50%;
  position:absolute;
  top: 20%;
  left: 20%;
}

.tick {
  height: 5%;
  width:2%;
  border-radius: 1rem;
  position: absolute;
  background-color: #33426d;
}

.twelve {
  left:0;
  right:0;
  margin: auto;
}

.three {
  right:2%;
  top:47%;
  transform: rotate(90deg);
}

.six {
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

.nine {
  left:2%;
  bottom:47%;
  transform: rotate(90deg);
}

.digital {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 3rem;
  margin: 1.5rem auto;
  color: #f785a3;
  font-weight: bold;
  width: 15rem;
  background-color: #a4dff4;
  border: 5px solid #33426d;
  border-radius: 1rem;
  position:relative;
}

.seconds {
  font-size: 2rem;
}

.colon {
  color:#33426d;
}

.bubble2 {
  height: 1rem;
  width: 1rem;
  background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
  border-radius: 50%;
  position:absolute;
  top: 5%;
  right: 2%;
}