html {
    /* Resize the background image to cover the entire container */
    background-color: #000127;

    /*setting the root font-size to calculate rem based off of this*/
    font-size: 10px;
    text-align: center;
}

body {
    margin: 0;

    /*I want elements of body to be displayed as flexbox*/
    display: flex;
    flex: 1;

    /*center vertically*/
    align-items: center;

    /*center horizontally*/
    justify-content: center;
    margin-left: -200px;

    /*100% of the viewport height*/
    min-height: 100vh;


    font-size: 2rem;
}

.clock {
    /*give it a shape; from square to round*/
    height: 30rem;
    width: 30rem;
    border: 10px solid #a4a4a4;
    border-radius: 50%;

    /*keep the hands away from border*/
    padding: 4px;

   
    position: relative;
}

.clock-face {
    height: 50%;
    width: 50%;
    transform: translateY(-3px);

    position: relative;
}

.hand {
    /*give the hands some shape*/
    background-color: rgb(102 102 115);
    height: 5px;
    width: 75%;

    /*relating to the position*/
    position: absolute;
    top: 150px;
    left: 30px;

    /*to move*/
    transform: rotate(90deg);
    /*keep everything attached to the right point or middle point*/
    transform-origin: 100%;
    /*transition & speeding the effect*/
    transition: all 0.06s;
    transition-timing-function: cubic-bezier(0.07, 3.65, 0.76, 0.4);
}

audio {
    /*positioning the audio player*/
    align-self: flex-end;
    margin-left: -300px;
}

/*after 444 degree the second hand behaves weirdly; to stop that- (more on that in script.js file)*/
.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}