/* body{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
   
        background:  linear-gradient(to right, red, yellow); 
        
      
}
img{
    height: 50px;
    width: 200px;
       margin-bottom: 200px;
   font-size: 30px;
   margin-right: 10px;
   
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    width: 600px;
    border-radius: 50%;
    background-color: maroon;
}
.inner-main{
    position: relative;
    display: flex;  
    justify-content: center;
    align-items: center;
    height: 550px;
    width: 550px;
    border-radius: 50%;
    background-color: white;
}
.center{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: maroon;
    transform: translateX(100px);
    
}

  .number {
    position: absolute;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    
  }
  
  .number:nth-child(1) { transform: rotate(0deg) translate(250px) rotate(0deg); } 
  .number:nth-child(2) { transform: rotate(30deg) translate(250px) rotate(-30deg); }
  .number:nth-child(3) { transform: rotate(60deg) translate(250px) rotate(-60deg); } 
  .number:nth-child(4) { transform: rotate(90deg) translate(250px) rotate(-90deg); } 
  .number:nth-child(5) { transform: rotate(120deg) translate(250px) rotate(-120deg); } 
  .number:nth-child(6) { transform: rotate(150deg) translate(250px) rotate(-150deg); } 
  .number:nth-child(7) { transform: rotate(180deg) translate(250px) rotate(-180deg); } 
  .number:nth-child(8) { transform: rotate(210deg) translate(250px) rotate(-210deg); } 
  .number:nth-child(9) { transform: rotate(240deg) translate(250px) rotate(-240deg); } 
  .number:nth-child(10) { transform: rotate(270deg) translate(250px) rotate(-270deg); } 
  .number:nth-child(11) { transform: rotate(300deg) translate(250px) rotate(-300deg); } 
  .number:nth-child(12) { transform: rotate(330deg) translate(250px) rotate(-330deg); } 

  .hand {
    position: absolute;
    bottom: 50%;
    left: 49%;
    transform-origin: bottom;
    background-color: maroon;
   ;
}

.hour {
    width: 8px;
    height: 150px;
    
}

.minute {
    width: 4px;
    height: 200px;
   
}

.second {
    width: 2px;
    height: 200px;
    background-color: red;
  
} */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    background: linear-gradient(to right, red, yellow); /* Horizontal gradient from red to yellow */
}



/* .main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 315px; /* Reduced size 
    width: 315px;  
    border-radius: 50%;
    background-color: maroon;
} */

.inner-main {
    border: 5px solid maroon;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 290px; /* Reduced size */
    width: 290px; /* Reduced size */
    border-radius: 50%;
    background-color: white;
}

.center {
    height: 10px; /* Reduced size */
    width: 10px; /* Reduced size */
    border-radius: 50%;
    background-color: maroon;
    transform: translateX(80px); /* Adjusted to fit inside smaller clock */
}

.number {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px; /* Reduced font size */
}

.number:nth-child(1) { transform: rotate(0deg) translate(125px) rotate(0deg); } 
.number:nth-child(2) { transform: rotate(30deg) translate(125px) rotate(-30deg); }
.number:nth-child(3) { transform: rotate(60deg) translate(125px) rotate(-60deg); } 
.number:nth-child(4) { transform: rotate(90deg) translate(125px) rotate(-90deg); } 
.number:nth-child(5) { transform: rotate(120deg) translate(125px) rotate(-120deg); } 
.number:nth-child(6) { transform: rotate(150deg) translate(125px) rotate(-150deg); } 
.number:nth-child(7) { transform: rotate(180deg) translate(125px) rotate(-180deg); } 
.number:nth-child(8) { transform: rotate(210deg) translate(125px) rotate(-210deg); } 
.number:nth-child(9) { transform: rotate(240deg) translate(125px) rotate(-240deg); } 
.number:nth-child(10) { transform: rotate(270deg) translate(125px) rotate(-270deg); } 
.number:nth-child(11) { transform: rotate(300deg) translate(125px) rotate(-300deg); } 
.number:nth-child(12) { transform: rotate(330deg) translate(125px) rotate(-330deg); }

.hand {
    position: absolute;
    bottom: 50%;
    left: 49%;
    transform-origin: bottom;
    background-color: maroon;
}

.hour {
    width: 6px; /* Reduced size */
    height: 85px; /* Reduced size */
}

.minute {
    width: 4px; /* Reduced size */
    height: 120px; /* Reduced size */
}

.second {
    width: 2px; /* Reduced size */
    height: 130px; /* Reduced size */
    background-color: red;
}