.heiluri-kehys
  {
  height: 100%;
  overflow: hidden;
  border: solid 2px #ed7e3e;
  border-radius: 10px;
  background-color: #420;
  background-color: rgba(0,0,0,0.4);
  }

.heiluri
  {
  position: relative;
  width: 21vh;
  height: 150px;
  margin: auto;
  
  /* Asetetaan heilumisen pyörintäpiste heilurin yläreunaan */
  transform-origin: center -60rem;
  /* Käynnistetään animaatio: kesto 2 sekuntia, jatkuu ikuisesti */
  animation: heilunta 2s ease-in-out infinite;
  }

.varsi
  {
  width: 1rem;
  height: 7vh;
  background-color: #d4af37;
  margin: 0 auto;
  }

.punnus
  {
  width: 21vh;
  height: 21vh;
  background-color: #d4af37;
  border-radius: 50%;
  margin-top: -5px;
  
  border: solid 1px #345;
  outline: 1vh solid #987;
  outline-offset: -2vh;
  }

@keyframes heilunta
  {
  0%
    {
    transform: rotate(-3deg);
    }
  50%
    {
    transform: rotate(3deg);
    }
  100%
    {
    transform: rotate(-3deg);
    }
  }