body { background: white; color: black; font-family: sans-serif;
  counter-reset: napit ots2 }
form::after { counter-increment: napit; content: " " counter(napit);
  color: magenta; float: right }
iframe { width: 100%; border: thin solid; background: #F4F4F4 }
h1 { color: blue }
h2 { color: green }
h2::before { counter-increment: ots2; content: counter(ots2) ". " }
h3 { color: purple }
p { text-align: justify }
form { text-align: justify }
li { text-align: justify; margin-top: 1em }
i { font-family: serif }
em { color: purple; background: #FFA }
.avautuva {
  display: none; position: absolute; z-index: 9; padding: .5em; color: maroon;
  background: linen; border: 2pt solid maroon; border-radius: 1.5em;
  max-width: 47%
}
.vihje { color: maroon; background: linen }
.vihje:hover .avautuva { display: block }
.avautuva2 {
  display: none; position: absolute; z-index: 9; padding: .5em; color: navy;
  background: #F0F0FF; border: 2pt solid navy; border-radius: 1.5em;
}
.vihje2 { color: navy; background: #F0F0FF }
.vihje2:hover .avautuva2 { display: block }
.nowrap { white-space: nowrap; display: inline-block }
.murto { display: inline-block; text-align: center; vertical-align: middle }
.jakaja { border-top: solid thin }
.top { vertical-align: top }
.oik { text-align: right }
.ctr { text-align: center }
.vastaus::after { counter-increment: napit; content: counter(napit);
  color: magenta; float: right }
.tarkea { background: palegreen; padding: 1ex; border: solid green }
.matala { margin-top: .2em }
.loota { border: solid thin; padding: .3ex }
.gray { color: gray }