body { font-family: sans-serif; font-size: 100%; margin: 0; padding: 0; } main { padding: 2rem 2rem 4rem calc(240px + 2rem); } h1,h2,h3,h4 { margin: 0; } article { height: max-content; overflow: hidden; padding: 32px; } article li,article p { font-size: 1rem; margin-bottom: .8rem; } /* Header */ header { margin: 0 0 0 240px; } header svg { height: 32px; margin-right: 8px; width: 32px; } header h1 { align-content: center; display: flex; height: 4rem; line-height: 64px; margin: 0; position: absolute; width: max-content; z-index: 1; } h2 time { font-size: initial; font-weight: initial; } /* Navigation */ body>nav { display: flex; flex-direction: column; max-width: 240px; overflow: hidden; padding: 0 2rem 2rem 0; position: fixed; top: 0; width: 240px; } body>nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; } body>nav ul div { display: flex; align-items: center; height: 48px; margin: 0 auto; padding: 0 8px; } body>nav a { display: flex; font-size: 1.125rem; font-weight: bold; height: 32px; line-height: 32px; } /* Navigation > Icons */ svg { fill: currentColor; stroke: currentColor; stroke-width: 0; } body>nav li img { border-radius: 100%; } body>nav a svg,body>nav li img { margin: 0 8px 0 8px; width: 20px; height: 20px; } body>nav li img,body>nav a svg,header svg { align-self: center; } body>nav>ul>svg { overflow: visible; text-anchor: start; } /* Images */ article img { height: 200px; } img[src*="/assets/img/pkmn/"],footer img { height: fit-content; image-rendering: pixelated; } img[src*="/assets/img/favicon/"] { margin: 0 4px -4px 0; height: 20px; width: 20px; } img[src*="/assets/img/flag/"] { display: flex; height: 32px; } ul:has(img, svg):not(article ul) { list-style-type: none; } article a:has(img) { display: inline-block; } /* Footer */ footer>nav { align-items: center; bottom: 0; display: flex; text-wrap: nowrap; height: 3rem; left: 0; overflow-x: scroll; position: fixed; right: 0; transition: .2s; z-index: 10; } footer>nav ul { column-gap: 6px; display: inherit; margin: 0; padding: 0; } footer>nav li, footer>nav a { display: inherit; } article { max-width: 75ch; } iframe { border: 0; } img[id="meow"]:hover { background-image: url("/assets/img/button/second.gif") } /* Mobile view */ @media screen and (max-width: 1400px) { header { margin:0; align-items: center; } main { padding: 2vw 2vw 6vw 2vw; } main>section:not([id]) { flex-direction: column; } main>section { width: initial; } article { max-width: initial; width: auto; } body>nav { display: flex; flex-direction: row; height: 42px; max-width: initial; overflow-x: scroll; padding: 0; position: fixed; width: 100%; z-index: 10; } body>nav ul { flex-direction: row; } }