html,
body {
    height: 100vh;
    margin: 0;
}

.container {
    padding: 1rem;
}

.title {
    /* margin-top: 0; */
    text-align: center;
}

.clock {
    max-width: 50vh;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.circle {
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px; */
    border-radius: 50%;
    width: 100%;
    border: 4px solid whitesmoke;
    position: relative;
    display: inline-block;
    background-color: #f1b63f;

    .hand {
        position: absolute;
        width: 0;
        bottom: 50%;
        left: 50%;
        border-radius: 3px;
        background-color: whitesmoke;

        transform: translateX(-50%);
        transform-origin: bottom center;
    }

    .hour {
        height: 30%;
        border: 4px solid whitesmoke;
    }

    .minute {
        height: 45%;
        border: 3px solid whitesmoke;
    }

    .second {
        height: 45%;
        border: 1px solid whitesmoke;
    }

    .point {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);

        border-radius: 50%;
        width: 12px;
        height: 12px;
        background-color: whitesmoke;
    }

    &::before {
        content: "";
        display: block;
        padding-top: 100%;
    }
}