@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap');
body{
    height: 88.5vh;
    background: linear-gradient(40deg, black,blue,black 130%);
    font-family: kanit;
    color: aliceblue;
}
#clockContainer{
    background: rgb(175, 160, 160);
    height: 40vw;
    width: 40vw;
    margin: auto;
    margin-top: 5vw;
    border-radius: 1000px;
    /* background: url(clock1.png); */
    background-size: cover;
}
#clockContainer img{
    width: 100%;
}
#options img{
    width: 60%;
    align-self: center;
    background: rgb(136, 119, 119);
    border-radius: 1000px;
    margin: 20px;
}
.clocks{
    display: flex;
    flex-direction: column;
    height: 71.5vh;
    overflow-y: scroll;
    align-items: center;
}
.head{
    width: 25vw;
    text-align: center;
}
#options{
    position: fixed;
    width: 25vw;
    display: flex;
    flex-direction: column;

}
/* #main{
    position: fixed;
    display: flex;
} */
#hour, #circle,#minute, #second, #date {
    position: absolute;
    background: #000;
    border-radius: 10px;
    transform-origin: bottom;
    /* animation-duration: 1ms; */
}

#hour{
    position: absolute;
    width: 0.6vw;
    height: 8vw;
    left: 49.7vw;
    top: 17vw;
    z-index: 3;
    /* background: black; */
}
#circle{
    position: absolute;
    width: 1vw;
    height: 1vw;
    left: 49.55vw;
    top: 24.6vw;
    z-index: 3;
    /* background: black; */
}
#minute{
    position: absolute;
    width: 0.4vw;
    height: 12vw;
    left: 49.75vw;
    top: 13vw;
    z-index: 3;
    /* background: pink; */
    /* display: none; */
}
#second{
    position: absolute;
    width: 0.2vw;
    height: 14vw;
    left: 49.86vw;
    top: 11vw;
    z-index: 3;
    /* background: blue; */
}
#date{
    display: flex;
    position: absolute;
    width: 5vw;
    height: 4vw;
    left: 55vw;
    top: 23vw;
    background: black;
    color: white;
    font-size: 3vw;
    margin: auto;
    align-items: center;
    justify-content: center;
}
/* #options{
    width: 30vw;
    height: 40vw;
    margin: auto;
    background: #000;
} */

.op{
    margin: 0px auto;
    text-align: center;
    display: none;
}
@media only screen and (max-width: 750px) {
    
    #clocks{
        flex-direction:row;
    }
    #options{
        display: none;
    }
    .op{
        position:fixed;
        display: flex;
        flex-direction: column;
        margin-top: 20vw;
    }
  }