@charset "utf-8";

html {
   hyphens: auto;
   font: 1rem/1.37em 'Fira Mono', monospace; }

body {
   padding: 0 7%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: url(/img/tux.png) fixed no-repeat bottom right; }

@media screen and (width >= 789px) { body { margin: 3vw; max-width: 753px; } }

section { margin-top: 1.23em; }

aside {
   margin: 1.23em;
   padding: 0 2.3vw;
   font-size: .88rem;
   color: #246;
   border-left: 1px dotted #59e; }

footer {
   margin-top: 2.4vw;
   border-top: 1px dotted #15b; }
footer > p { text-align: center; }

p { font-size: .97rem; }
p + p {
   margin-top: -.9em;
   text-indent: .9em; }

h1, h2 {
   text-indent: .5em;
   font-variant: small-caps;
   word-spacing: -.42em;
   border-bottom: 1px dotted #15b;
   text-shadow: 0px 0px 2px #37c; }
h3 {
   margin: .93em auto -.23em auto;
   text-indent: .84em;
   letter-spacing: -.05em;
   font-weight: 500;
   color: #013;
   text-shadow: 0px 0px 1px #37c; }
h4 {
   margin-bottom: .73em;
   text-indent: .84em;
   color: #578; }
h1 { font-size: 2.3rem;  text-align: right; }
h2 { font-size: 1.97rem; }
h3 { font-size: 1.57rem; }
h4 { font-size: 1.1rem; }
h2::before { content: "🐧 "; }
h3::before { content: "⇢ "; }

a { font-size: .97rem; }
a:hover {
   cursor: pointer;
   text-shadow: 0 0 1px #037;
   transition-duration: .63s;
   text-decoration: none; }
section > a, footer a {
   text-decoration: none;
   color: inherit; }

b { font-weight: 500; }

hr { /* dank css-tricks.com/examples/hrs */
   overflow: visible;
   padding: 0;
   border: none;
   color: #579; 
   text-align: center; }
hr::after {
   content: "❀";
   display: inline-block;
   position: relative;
   font-size: 1.73em;
   padding: .73em; }

img {
   margin: 0 2.34vw 1.23vw ;
   filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0,0,0,0.5)); }
img.cntr { display: block; margin: 1em auto 2.3em auto; }
img.fl { float: left; }
img.fr { float: right; margin-right: initial; }

ul {
   margin: 0 -.73em;
   list-style-type: square; 
   font-size: .97rem; }
ol.roman { list-style-type: lower-roman; }


.hmh { font-size: .9rem; color: #026; }
aside .hmh { color: #568; }
.roden { color: firebrick; }
.sc { font-variant: small-caps; }