*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body{
    background: #000;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 10vw;
    max-width: 100vw;
    height: auto;
    z-index: 10;
}
.clock{
    position: relative;
    width:40vw;
    height: 40vw;
    background-color: rgb(32, 39, 45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 2px 10px rgba(55, 167, 130, 0.8),
    -1px -2px 10px rgba(52, 171, 136, 0.8);
}
.num{
    position: absolute;
    color: aliceblue;
    inset:20px;
    text-align: center;
transform: rotate(calc(30deg*var(--v)));
}
.num b{
    transform: rotate(calc(-30deg*var(--v))); 
    display: inline-block;
    font-size: 25px;
}
.dot{
    position: absolute;
    width: 8%;
    height: 8%;
    background-color: rgb(32, 39, 45);
    border-radius: 50%;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.8),
    -1px -2px 10px rgba(0,0,0,0.8);
    z-index: 2;

}
.digi-clock{
    position: absolute;
    width: 30%;
    height: 10%;
    background-color: #000;
    bottom: 27%;
    background: transparent;
    box-shadow:inset 1px 2px 10px rgba(0,0,0,0.8),
    -1px -2px 10px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap:8%;
    font-size: 22px;
    color:aliceblue
}
.dh{
    color:rgb(72, 196, 218)
}
.dm{
    color:rgb(72, 218, 164)
}
.ds{
    color:rgb(218, 72, 121)
}
.hour-hand,.min-hand,.sec-hand{
    position: absolute;
   background: #000;
   border-radius: 20px;
   transform-origin: bottom;
}
.hour-hand{
    width: 1%;
  height: 30%;
  top: 20.5%;
  background-color: rgb(72, 196, 218);

}
.min-hand{
    width: 1%;
    height: 35%;
    top: 15.5%;
    background-color: rgb(72, 218, 164);

}
.sec-hand{
    width: 1%;
    height: 40%;
    top: 10.5%;
    background-color: rgb(218, 72, 121);
   
}
@media (max-width:900px) {
    .logo {
        width: 20vw;
    }
    .clock{
        width: 80vw;
        height: 80vw;
    }
    .num b{
font-size: 6vw;
    }
    .digi-clock{
        font-size: 4vw;
    }
}