* {
    box-sizing: border-box;
    
}
@media screen and (max-width: 480px) {
    div.outer-face {
        top: 40%;
        height: 20%;
    }
    div.num {
        font-size: 85%;
    }
    div.strap-one, div.strap-two {
        height: 40%;
    }
    div.second-hand {
        height: 35%;
        top: 15%;
    }
    div.table {
        margin: 2%;
    }
    div.table-top {
        margin: 10%;
          
    }
    div.min-hand {
        height: 30%;
        top: 20%
    }
    div.hour-hand {
        height: 20%;
        top: 30%;
    }
    div.strap-one::before {
        content: 'DeeBaba';
        font-size: 150%;
        top: 50%;
        right: -35%;
    }
}
.table {
    border-radius: 50px;
    background: #42489e;
    box-shadow: inset 24px 24px 48px #393e7e,
                inset -24px -24px 48px #939eff;
    margin: 2rem;
    align-items: center;
    display: flex;
}
.table-top{
    border-radius: 50px;
    background: #42489e;
    box-shadow:  -37px -37px 74px #1f224a,
                 37px 37px 74px #656ef2;
    margin: 4rem auto;
    width: 27rem;
    height: 40rem;
    position: relative;
}
.strap-one{
    height: 35%;
    width: 20%;
    background: #5b5e86;
    box-shadow: inset 50px 50px 100px #2b2c3f,
            inset -50px -50px 100px #8b90cd;
    margin: 0 auto;
    position: absolute;
    left: 40%;
    top: 2%;
    border-radius: 10px 10px 0 0;
}
.strap-one::before{
    content: 'Dee';
    font-family: 'Twinkle Star', cursive;
    position: absolute;
    color: #8b90cd ;
    transform: rotate(270deg);
    top: 40%;
    font-size: 3rem;
}
.strap-two{
    height: 35%;
    width: 20%;
    background: #5b5e86;
    box-shadow: inset 50px 50px 100px #2b2c3f,
            inset -50px -50px 100px #8b90cd;
    margin: 0 auto;
    position: absolute;
    left: 40%;
    bottom: 2%;
    border-radius: 0 0 10px 10px;
}
.hole-one{
    position: absolute;
    background-color: #8b90cd;
    border-radius: 50%;
    width: 10%;
    height: 3%;
    left: 46%;
    top: 30%;
}
.hole-two{
    position: absolute;
    background-color: #8b90cd;
    border-radius: 50%;
    width: 10%;
    height: 3%;
    left: 46%;
    top: 50%;
}
.hole-three{
    position: absolute;
    background-color: #8b90cd;
    border-radius: 50%;
    width: 10%;
    height: 3%;
    left: 46%;
    top: 70%;
}
.outer-face{
    height: 30%;
    width: 46%;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 27%;
    top: 35%;
}
.inner-face{
    height: 73%;
    width: 73%;
    background-color: #5b5e86;
    border-radius: 50%;
    position: absolute;
    left: 13.5%;
    top: 13.5%;
}
.num{
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    color:#2b2c3f;
}
.num-12{
    left: 44.5%;
}
.num-1{
    right: 24%;
    top: 6%;

}
.num-2{
    right: 9%;
    top: 23%;
}
.num-3{
    right: 5%;
    top: 45%;
}
.num-4{
    right: 11%;
    bottom: 22%;
}
.num-5{
    right: 27%;
    bottom: 5.5%;
}
.num-6{
    left: 47.5%;
    bottom: 0%;
}
.num-7{
    left: 26%;
    bottom: 6%;
}
.num-8{
    left: 9%;
    bottom: 23%;
}
.num-9{
    left: 4%;
    top: 45%;
}
.num-10{
    left: 6.5%;
    top: 23%;
}
.num-11{
    left: 23.5%;
    top: 6%;
}
.inner-face::before{
    content: " ";
    background-color: cornsilk;
    border-radius: 50%;
    width: 6%;
    height: 6%;
    left: 46%;
    top: 47%;
    position: absolute;
    z-index: 1;
}
.hand {
    position: absolute;
    left: 48.5%;
    width: 1.5%;
    top: 5%;
    transform-origin: bottom;
    
}
.second-hand{
    background-color: whitesmoke;
    width: 1.5%;
    height: 45%;
    
}
.min-hand{
    background-color: #4d4705;
    height: 38%;
    top: 12%;
    
    
}
.hour-hand{
    background-color: #4d4705;
    width: 1.5%;
    height: 25%;
    top: 25%;
    
}