html {
font-size:62.5%;
}
body {
font-family:sans-serif;
font-size:1.6rem;
margin:0;
}
h1,h2,h3,h4,h5,h6 {
padding:0.5em 0.25em;
margin:0;
text-align:initial;
background:rgb(240,240,240);
}
a,
a:hover,
a:visited {
display:inline-block;
text-decoration:none;
color:rgb(120,140,240);
}
iframe {
display:block;
border:0;
width:100%;
height:100%;
}
main {
background-color:rgb(255,255,255);
}
aside {
background-color:rgb(250,250,250);
}
/*\
layout
\*/
@media screen and (max-width:800px) {
main {
position:fixed;
top:0;
left:0;
width:100%;
height:calc(100% - 100px);
}
aside {
position:fixed;
bottom:0;
left:0;
width:100%;
height:100px;
}
}
@media screen and (min-width:800px) {
main {
position:fixed;
top:0;
left:0;
width:calc(100% - 400px);
height:100%;
overflow:auto;
}
aside {
position:fixed;
right:0;
top:0;
width:400px;
height:100%;
overflow:auto;
}
}
/*\
\*/
[data-role='source'] {
width:100%;
}
[data-role] + [data-marker] {
position:absolute;
top:0;
left:0;
width:512px;
height:512px;
opacity:0.87;
overflow:auto;
}