/* vim: set ts=2 sw=2 tw=80 et: */ body { font-family: 'Fira Sans', sans-serif; background: #ffe; width: 100%; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } header, footer { padding: 1rem 0; width: 100%; text-align: center; background: rgba(255,0,0,0.5); } @media screen and (min-width: 769px) { main { display: flex; flex-direction: row; } nav, aside { flex: 0 1 10rem; } article { flex: 1 2; } } @media screen and (max-width: 768px) { main { display: flex; flex-direction: column; } article { flex-grow: 1; } } main { flex-grow: 1; } nav, aside { background: rgba(200,100,0,0.3); } h1, h2, h3, h4, h5, h6 { margin: 0; padding: .5rem; text-align: center; } figure { background: rgba(0,0,0,0.05); } figcaption { text-align: center; padding: .5rem; } audio { width: 100%; } nav ul, aside ul { list-style-type: none; padding: 0; margin: 0; } nav ul li, aside ul li { padding: .5rem; text-align: center; background: rgba(0,0,0,.1); text-transform: uppercase; } nav ul li:nth-child(even), aside ul li:nth-child(even) { background: rgba(0,0,0,.05); } a { text-decoration: none; font-weight: bold; } a:link { color: #36c; transition: color 200ms; } a:visited { color: #50c; transition: color 200ms; } /* FIXME: transition when loading page? */ a:active { color: #603; transition: color 200ms; } article p { text-align: justify; } article section { padding: 1rem; } footer { display: flex; align-itemss: center; flex-direction: row; } footer a { padding: 0 .5rem; display: block; flex: 0 0 auto; } footer section { padding: 0 .5rem; font-size: 0.85rem; flex: 1 1 auto; } footer section p { margin: .25rem; } dt { font-weight: bold; } dt::after { content: ":" }