*, *::after, *::before{
    box-sizing: border-box;
    font-family:calibri;
}
body{
    background:#474F59;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.heading{
    text-align:center;
    color:#ffffff;
    font-size: 3rem;
    margin-top: 2rem;
    left: -13px;
    position: relative;
  }
.clock{
    width : 350px;
    height : 350px;
    background-color:  #fff;
    border-radius: 50%;
    border-style:double;
    border: 15px solid  #DF554C;
    position: relative;
}


.clock .number {
    --rotation:0;
    position: absolute;
    width:100%;
    height: 100%;
    text-align: center;
    transform:rotate(var(--rotation));
    font-size: 2rem;
}
.clock .number1 { --rotation: 30deg; }
.clock .number2 { --rotation: 60deg; }
.clock .number3 { --rotation: 90deg; }
.clock .number4 { --rotation: 120deg; }
.clock .number5 { --rotation: 150deg; }
.clock .number6 { --rotation: 180deg; }
.clock .number7 { --rotation: 210deg; }
.clock .number8 { --rotation: 240deg; }
.clock .number9 { --rotation: 270deg; }
.clock .number10 { --rotation: 300deg; }
.clock .number11 { --rotation: 330deg; }

.number {
    font-weight: bold;
    color:#507D9C ;
    
}

.clock .hand {
    --rotation :0;
    position: absolute;
    bottom:50%;
    left:50%;
    background-color: rgb(187, 56, 56);
    border: 1px solid #507D9C ;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin:bottom;
    z-index: 10;
    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
    content:'';
    position: absolute;
    background-color: #507D9C ;
    z-index:11;
    width:15px;
    height: 15px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    border-radius:50%;
}

.clock .hand.second {
  width: 3px;
  height: 40%;
  background-color:#DF554C ;
  border:1px solid #DF554C
}

.clock .hand.minute {
  width: 7px;
  height: 38%;
  background-color: #507D9C ;
}

.clock .hand.hour {
  width: 10px;
  height: 30%;
  background-color:#507D9C ;
}