@import "https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap";
* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
.container {
    height:100vh;
    width:100vw;
    background:#115fc4
}
.clock {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(255, 255, 255, 0.5);
    box-shadow:0 6px 6px rgba(0,0,0,0.25);
    height:12rem;width:25rem;
    flex-direction:column;
    border-radius:5px
}
.clock>div {
    display:flex;
    justify-content:center;
    align-items:center
}
.heading {
    height:30%;
    font-family:'roboto',sans-serif;font-size:1.5rem;
    color:rgb(88, 88, 88);
    font-weight:600;
    font-size: 1.75rem;
}
.time {
    height:70%;
    display:flex;
    align-items:center;
    justify-content:center
} 
.time>span {
    font-family:'roboto',sans-serif;font-size:1.5rem;
    margin:.5rem;padding:.5rem;
    height:5rem;width:5rem;
    border:1px solid rgb(80, 80, 80);
    border-radius:5px;color:rgb(80, 80, 80);
    display:flex;justify-content:center;align-items:center
}