* { box-sizing: border-box; margin: 0; padding: 0; } svg { fill: var(--text_1); padding-top: 0.1rem; } body { --bg_1: #0e0a2a; --bg_2: #2c2943; --bg_3: #3f4148; --highlight_1: #ee9015; --highlight_2: #edd29e; --text_1: #FFFFFF; color: var(--text_1); background: var(--bg_1); margin: 0px; position: relative; min-height: 100vh; padding-bottom: 4rem; } @media only screen and (max-width: 600px) { .hsmol_hide { display: none !important; visibility: hidden !important; } } :link { color: var(--highlight_1); font-style: italic; text-decoration: none; transition: color 0.2s; } a:visited { color: var(--highlight_1); } a:hover { color: var(--highlight_2); } #age_gate_block { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); transition: opacity 0.8s linear; } #age_gate_block div { background-color: var(--bg_3); border-radius: 1em; padding: 1em; width: 12em; margin:0 auto; display: table; position: absolute; left: 0; right:0; top: 50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } #age_gate_block p { min-height: 5em; } #main_header { overflow: hidden; position: relative; padding-bottom: 0.7rem; } #main_banner_img { position: absolute; left: 0px; right: 0px; width: 100vw; z-index: -1; opacity: 0; top: 0px; } #main_banner_img_link { position: absolute; right: 2vw; bottom: 0.5rem; font-size: 0.8rem; } #nav_bar { display: flex; flex-direction: row; justify-content: center; list-style-type: none; margin-top: 1rem; padding: 0px; } #nav_bar li { padding: 0rem 0.3rem 0rem 0.3rem; } #big_title { text-align: center; font-size: 2.5rem; margin-bottom: 0.2rem; } #main_header h2 { text-align: center; font-size: 2rem; margin-bottom: 0.2rem; } #title_separator { height: 1.5px; background-color: #ddd; opacity: 0.5; margin-left: 2rem; margin-right: 2rem; } #main_content_wrapper { --content-width: min(100vw, calc(20rem + 40vw)); --content-total-margin: calc(calc(100vw - var(--content-width)) / 2); --content-padding: max(0px, min(1rem, var(--content-total-margin))); --content-margin: max(0px, calc(var(--content-total-margin) - 1rem)); padding: 0rem var(--content-padding) 1rem var(--content-padding); width: auto; margin-left: var(--content-margin); margin-right: var(--content-margin); margin-top: 0px; min-height: 100%; background: var(--bg_2); } #post_file_bar { position: sticky; top: 0px; background: var(--bg_2); } #post_file_titles { display: flex; flex-direction: row; justify-content: left; list-style-type: none; padding: 0px; } #post_file_titles * { padding: 0.5rem; font-style: bold; font-size: 1.3rem; background: var(--highlight_1); } #post_file_path { width: 100%; font-style: italic; padding-left: 0.5rem; background: var(--highlight_1); display: flex; flex-direction: row; list-style-type: none; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } #post_file_path a { color: var(--text_1); padding-right: 0.2rem; } #main_content_wrapper article { background: var(--bg_3); border-radius: 0rem 0rem 0.8rem 0.8rem; box-shadow: 3px 7px 7px 0px #00000040; padding: 0.75rem; } #main_content_wrapper article h1 { text-align: left; padding-left: 3vmin; margin-bottom: 0.2rem; border-bottom: solid 1px darkgrey; } #main_content_wrapper article img { display: block; max-width: 100%; max-height: 70vh; margin: 1vmin; margin-right: auto; margin-left: auto; } #content_footer { display: block; max-width: 100%; margin-top: 0.5em; font-size: 0.8em; border-top: solid 1px darkgrey; opacity: 0.7; } #main_footer { display: flex; height: 2.5rem; text-align: center; background-color: #3a3a3a; margin: 0px; position: absolute; bottom: 0px; width: 100%; } #main_footer span { align-self: flex-end; width: 100%; }