@import "reset.css";
@import "normalize.css";

html, body{ 
	height: 100%;
}

.clock {
    width: 130px;
    height: 130px;
    background: -webkit-radial-gradient(#3b3b3b, #000);
    background: white;
    border: 6px solid rgba(34, 34, 34, 0.19);
    border-radius: 106px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

.hour-hand,
.minute-hand,
.second-hand {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.hour-hand {
    width: 4px;
    height: 27px;
    background: #f7ad4c;
    position: absolute;
    top: 38px;
    left: 65px;
}

.minute-hand {
    width: 4px;
    height: 40px;
    background: #f7ad4c;
    position: absolute;
    top: 25px;
    left: 65px;
}

.second-hand {
    width: 2px;
    height: 40px;
    background: #bbb;
    box-shadow: 0px 0px 45px #000;
    position: absolute;
    top: 24px;
    left: 65px;
}

.pin {
    width: 10px;
    height: 10px;
    background: #111;
    border-radius: 10px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}