* { border: 0; font-size: 1em; list-style: none; margin: 0; outline: 0; padding: 0; text-decoration: none; } a { color: #000; } article, main, nav, section { display: block; } body { background: #fff; border: 4px double #000; bottom: 1px; color: #000; display: flex; flex-direction: column; left: 1px; position: absolute; right: 1px; top: 1px; } footer { font-size: 24px; word-spacing: -8px; } footer span { display: inline-block; position: relative; transform: rotate(90deg); } footer abbr { font-size: 0.75em; letter-spacing: 1px; } h1 { padding: 1.5em; text-align: center; } html { background: #000; color: #fff; font: normal 16px/1.5 sans-serif; } iframe { left: 24px; position: absolute; bottom: 24px; } #content { height: 100%; margin: 0 auto; max-width: 100%; text-align: center; } footer { display: flex; padding: 19px; } .logo { max-width: 300px; } nav { text-align: center; } @media (min-width: 900px) { nav { position: absolute; right: 48px; top: 24px; } } nav ul { display: flex; flex-wrap: wrap; justify-content: center; } nav li { height: 72px; overflow: hidden; margin: 0 0 0 12px; text-indent: -9999px; width: 81px; } nav li a { display: block; height: 72px; float: left; width: 81px; } nav li.first { background: url(nav-a-first.png); } nav li.prev { background: url(nav-a-previous.png); } nav li.next { background: url(nav-a-next.png); } nav li.last { background: url(nav-a-last.png); } nav li.first a { background: url(nav-first.png); } nav li.prev a { background: url(nav-previous.png); } nav li.next a { background: url(nav-next.png); } nav li.last a { background: url(nav-last.png); } nav li.first a:hover { background: transparent; } nav li.prev a:hover { background: transparent; } nav li.next a:hover { background: transparent; } nav li.last a:hover { background: transparent; } footer ul { display: flex; margin-right: auto; } svg { height: 100%; max-height: 100%; max-width: 100%; vertical-align: bottom; width: auto; }