body { --theme-color-primary: rgb(255, 255, 255); --theme-color-secondary: black; --theme-accent: #09448c; color: var(--theme-color-secondary); background-color: var(--theme-color-primary); margin: 0; width: 100vw; display: flex; align-items: flex-start; flex-direction: row; justify-content: space-evenly; font-size: 18px; } @media screen and (prefers-color-scheme:dark) { body { --theme-color-primary: rgb(0, 0, 0); --theme-color-secondary: white; --theme-accent: #1291e5; } } header, footer { font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size:16px; min-width: min-content; width:20vw; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex-wrap: nowrap; padding:15px; text-align: center; } main { display:flex; flex-direction: column; align-items: center; width: 60vw; max-width: 60vw; padding-left:1rem; padding-right:1rem; } nav { display: flex; flex-direction: column; align-items: center; text-align: center; } nav>* { margin: 1rem; text-align: center; } nav a { text-decoration: none; } @media screen and (orientation:portrait) { body { font-size:20px; flex-direction: column; } header, footer { width: 100vw; max-width: unset; min-height:unset; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; padding:5px; } nav{ flex-direction: row; justify-content: center; width:100%; flex-wrap: wrap; } main { max-width: unset; width:95vw; align-items: center; margin:5px; } } svg { stroke: var(--theme-accent); fill: var(--theme-accent); } a, a:visited, a:hover { color: var(--theme-accent); } img, video, iframe, audio { width: max-content; height:max-content; max-width: 90%; max-height: 100%; } article img, article video, article iframe, article audio{ margin:15px; } iframe { width: 100%; height: 60vh; } .gallery img{ margin:1px; } .gif { max-height: 50vh; } .gallery { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; overflow: hidden; width:100%; max-width: 100%; } .gallery>* { max-width: 25vw; max-height: 20vw; } .image-container{ overflow:hidden; } .image-container a { height: 100%; } .image-container img { max-height: 100%; } .gallery>img { max-width: 600px; max-height: 400px; } .tag-list{ display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-evenly; } .tag-link{ margin:3px; } .tag-link:hover{ color:var(--theme-color-secondary) } .icon { height: 34px; width: 34px; } div { display: flex; align-items: center; justify-content: center; flex-direction: row; text-align:center; } article { display: flex; flex-direction: column; align-items: center; width: 60rem; max-width: 100%; font-size: 20px; font-family:Verdana, Geneva, Tahoma, sans-serif; } article img { max-width: 90%; } article p, article table, article ul, article ol, article h3, article h4, article h2 { width: 100%; text-align: left; } article .highlight { width: 100%; align-items: flex-start; } article .highlight pre { width: 100%; text-align: left; } article h1 {} .posts { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; align-items: center; justify-content: space-evenly; } .post { flex-direction: row; flex-wrap: wrap; display: flex; align-items: center; margin: 1rem; padding: 25px; border-radius: 25px; font-size:14px; } .post>* { margin: 15px; } .post h2 { text-align: center; } .post p,.post h2 { max-width: 460px; } .post-image { height: 15rem; background-position: top center; background-size: contain; background-repeat: no-repeat; } @media screen and (orientation:portrait) {} .post-tags a { margin: 5px; } .tag { display: flex; flex-direction: row; align-items: center; } .highlight pre { background-color: transparent !important; } h3 { margin: 0; } hr{ color:var(--theme-accent); width:100%; margin:0; margin-top:1rem; margin-bottom:1rem; max-width:95vw; } blockquote { border-left: 5px solid var(--theme-accent); padding-left: 15px; width:80%; } code{ font-family: monospace; color:var(--theme-accent); white-space:break-spaces; word-wrap: normal; } article pre { width:100%; } .footnotes{ flex-direction: column; }