div.slide {counter-increment: slide}

@media print {
#op { position: fixed; top: 0cm; left: 0cm; border: 0px solid }
body {font-size: 25px }
div,h1 { margin: 0.5em}
 dt { line-height: 130% ; font-size:120% ; font-weight: bold }
 li { line-height: 150% }
 h1 { font-size: 170% }
#first, #last, h1 { text-align:center}
#first { page-break-before:avoid }
.slide { page-break-before:always ; padding: .5em  3em ; background: url('operas.svg') #fff; height:100% }
}

@media projection {
.right { float: right; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; max-width:50% }
#op {display:none}
#FOMS {position: fixed; bottom: 1em; left: 1em ; border: 0px solid}
div,h1 { margin: 0.5em}
 dt { line-height: 130% ; font-size:120% ; font-weight: bold }
 li { line-height: 150% }
 h1 { font-size: 170% }
#first, #last, h1, .centre { text-align:center}
.slide { page-break-before:always ; padding: .5em  2em ; background: url('opera-logo.svg') #fff; height:100% }
#first { page-break-before:avoid }

#dom, #console, #script{ background: url('dom.svg') }
     }

@media screen {
 .centre { text-align:center }
 h1:after{ content: " (" counter(slide) ")"}
 .right { float: right; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; max-width:50% }
}

@media projection and (min-device-height: 450px) { body {font-size:20px} .slide {height:400px } }
@media projection and (min-device-height: 600px) { body {font-size:30px} .slide {height:550px } }
@media projection and (min-device-height: 800px) { body {font-size:40px} .slide {height:750px } }
@media projection and (min-device-height: 760px) { body {font-size:38px} .slide {height:730px } }
@media projection and (min-device-height: 900px) { body {font-size:45px} .slide {height:850px } }
@media projection and (min-device-height:1000px) { body {font-size:50px} .slide {height:950px } }