@keyframes spin {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(360deg) ;}
}
@keyframes swing{
    0%{transform: rotate(30deg) ;}
    100%{transform: rotate(-30deg) ;}
}
/*.clockbox {
    border-radius: 0%;
    position: absolute; /*hetkel static, default, samuti võimalik relative, ja absolute (veebilehe ülevalt alates saab ka fixed (nt reklaamid lehtedel sellega)*/
    /*left, right, top, bottom
    left: 100px;
    top: 100px;}*/
.clockarea{
    position: relative;
    width: 222px;
    height: 378px;
}
.clock {
    width: 554px;
    height: 945px;
    /*position: relative;*/
    transform-origin: 0% 0%;
    transform: scale(.4) /* scale(.4, 1) skew(30deg); läheb mõõtkava paigast ja diagonaali, kasutades - märki läheb pilt vastupidi, nagu flip*/
}
.clock * {
    position: absolute;
}
.pendulum {
    left: 194px;
    top: 420px;
    transform-origin: 50% 0%; /*asukoht kust hakkab muutus toimuma*/
   /* transform: rotate(30deg);*/
    animation: swing 1s ease-in-out infinite alternate both; /* kirjuta alumises järjekorras väärtused, mida pole vaja, jäta vahele, programm saab ise aru*/
}
.clockface {
    width: 369px;
    height: 369px;
    left: 92px;
    top: 88px;
}
.clockhand {
    top: 10px;
    left: 158px;
    transform-origin: 50% 177px;
    /*animation-name: spin; /*võtmekaardite nimi*/
   /*animation-duration: 1s; /*kui kaua võtab aega*/
   /* animation-timing-function: linear;/*ease, ease-in, ease-out, linear*/
  /* animation-delay: 0s; /*vahel on vaja et hakkab millestki hiljem*/
   /* animation-iteration-count: infinite; /*teeb mitmeid ringe*/
   /* animation-direction: normal; /*reverse, normal ja alternate on olemas (ühte ja teistpidi kordamööda)*/
    /*animation-fill-mode: both; /*kuidas käitub alguses ja lõpus, forward, backwards*/
   /* animation-play-state: running; /*paused n ka võimalik, et millal töötab ja millal ei tööta*/

}   
.minutehand {
    animation-duration: 60s;
}
.hourhand {
    animation-duration: 720s;
}
#hour, #minute, #second {
    width: 70px;
}
#hourR, #secondR, #minuteR{
    width: 200px
}