body {margin:0; padding:0; font-family:sans-serif; background-image:linear-gradient(to bottom,maroon 0%, white 10%); }
header {margin-top:0; margin-bottom:1em; text-align:center; }
main {width:99%; margin:1em auto; text-align:justify; hyphens:auto;}
article, div.cont div {border:2px solid tan; border-radius:8px; padding:3px;}
footer {font-size:2em; text-align:center;}
li {margin-bottom:.4em;}
div {text-align:justify; hyphens:auto; }

figure {margin:1em 0; } figure img {width:100%;}
figcaption {font-size:.8em; font-style:italic; text-align:center;}
h1 {}
h2 {font-variant:small-caps;}
h3 {}

code {background:linen;}

::backdrop {background:rgba(33,33,33,0.5)}
[popover] {opacity:0; transform:scaleX(0); transition:all .7s allow-discrete;}
[popover]:popover-open {box-shadow:40px 40px 50px #000; border:3px solid maroon; border-radius:6px; opacity:1; transform:scaleX(1);}
@starting-style {[popover]:popover-open {opacity:0; transform:scaleX(0);}}
:popover-open h2 {color:maroon; text-align:center; text-shadow:3px 3px 2px #333}
:popover-open p {padding:.5em 1em;}

div#logo {width:50px; height:50px; position:absolute; top:10%; right:2em; display:none;} div#logo img {width:100%;}

.c	{text-align:center;}
.cls {position:absolute; top:5px; right:5px;}
.cont {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.det {padding:.4em 1em;}
.ifo {color:maroon; font-weight:bold; background:linen; padding:2px;}
.grau {color:#666;}
.m {opacity:.5;}
.nix {display:none;}
.s {font-size:.8em;}
.til {width:50px;}

@media (min-width:600px) {
	div#logo {display:block;}
}
@media (min-width:800px) {
	article, div.cont div {padding:.8em 1.2em;}
	div#logo {width:80px; height:auto;}
}
@media (min-width:1040px) {
	main {width:800px;}
}
@media (min-width:1200px) {
	div#logo {width:225px; height:202px;}
}