div.slide {counter-increment: slide}


@media projection, screen {
 .flame {text-shadow: 0 0 .2em white, 0 -.25em .2em #ff3, .1em -.5em .3em #fd3, -.1em -.75em .55em #f80, .1em -1.25em .9em #f20}
 .star {text-shadow: .2em .2em .2em white, .3em -.25em .2em #ff3, -.1em -.3em .3em #fd3, -.3em .2em .55em #f80, -.2em -.15em .9em #f20}
 .transit { transition-property: letter-spacing; 
           transition-duration: 2s;  -webkit-transition-duration: 2s; -o-transition-duration: 2s; }
 .transit:hover { letter-spacing: .5em }
}


@media projection {
.screen, .notes { display:none }
:link, :visited { color:#55f }
body { color: #000; background-color: #fff ; font-family: sans-serif }
#op {display:none}
* { margin: 0em } p { margin: 0.5em .3em }

.red { color: #faa }
.right { float: right; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; margin-right: 0.25em; max-width:50%; text-align:right }

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-image: url('matroskalogo_trans.svg')}
#first { page-break-before:avoid  ; background-image: url('none.svg')}
}


@media print {
.screen, .notes { display:none }
#op { position: fixed; top: 0cm; left: 0cm; border: 0px solid }
body {font-size: 28px; font-family: sans-serif  }
* { margin: 0em } p { margin: 0em .3em }

div,h1 { margin: 0.1em ; padding: 1em }
 dt { line-height: 130% ; font-size:120% ; font-weight: bold }
 li { line-height: 130% }
 h1 { font-size: 150% }

#first, #last, h1 { text-align:center}
#first { page-break-before:avoid }
.slide { page-break-before:always ; padding: .1em  0.3em ; height:100% }
}

@media print {
body {font-size: 40px; font-family: sans-serif  }
}

@media screen {
 .notes { font-style: italic; color: #aaa}
 .notes:before { content: 'NB: ' }

 .centre { text-align:center }
 .red { color: #a00 }
 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 } }
@media projection and (min-device-height:1200px) { body {font-size:60px} .slide {height:1170px } }
@media projection and (min-device-height:1400px) { body {font-size:70px} .slide {height:1370px } }