.body {
   background-color: rgb(186, 162, 162);
}

.clock-face {
   width: 400px;
   height: 400px;
   border: 15px solid #333;
   border-radius: 50%;
   position: relative;
   margin: 50px auto;
   background: #fff;
   box-shadow: inset 0 0 15px rgba(230, 161, 161, 0.2),
               0 0 20px rgba(187, 22, 22, 0.3);
 }

 .center-point {
   background: #333;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
 }

 .second {
   width: 35%;
   height: 2px;
   background: #f00;
   position: absolute;
   top: 50%;
   left: 50%;
   transform-origin: left;
   transition: all 0.1s;
   z-index: 8;
  
 }

 .minute {
  width: 36%;
   height: 1%;
   background: black;
   position: absolute;
   top: 50%;
   left: 50%;
   transform-origin: left;
   transition: 0.5s ease-in-out;
   z-index: 8;

 
 }

 .hour {
   width: 30%;
   height: 1%;
   background: black;
   position: absolute;
   top: 50%;
   left: 50%;
   transform-origin: left;
   transition: 0.5s ease-in-out;
   z-index: 8;
 }

 .number {
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
   transform: rotate(var(--rotation));
   font-family: Arial, sans-serif;
   font-size: 1.2rem;
 }

 .number div {
   padding: 0.5rem;
   transform: rotate(calc(var(--rotation) * -1));
 }

 .brand-logo{
   width: 30px;
   height: 40px;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   position: absolute;
   top: 15%;
   bottom: 150px;
   left: 46%;
   transform-origin: bottom;

}