:root { --fg-col: #FFFFFF; /*--main-col: #d2738a;*/ --main-col:#b4a999; --grey-col: #CCCCCC; --bg-col: #1f1710; --ver: calc(95vh - 50px); --ver-btm: 10vh; --ver-upr: 18px; --shade: linear-gradient(to top, rgba(31,23,16,1), rgba(31,23,16,0.8), rgba(31,23,16,0)); } body { background: url("/images/backgrounds/earth.gif") no-repeat var(--bg-col); */ /* broken randomization */ background-size: cover; background-attachment: fixed; background-position: bottom left; word-break: break-word; display: grid; grid-template-columns: min-content auto; gap: 20px; } ul { list-style: none; margin: 4px 0; } li { margin: 4px 0; } img { padding: 2px; border: 3px double var(--main-col); } table { padding: 2px; margin: 20px 0 20px 0; border: 1px solid var(--main-col); } th { color: var(--fg-col); font-weight: bold; } tr:nth-child(odd) { background-color: #150f0a; } tr:nth-child(even) { background-color: #392a1d; } input[type="submit" i] { background: unset; border: 3px double var(--main-col); margin-left: 10px; color: var(--main-col); font-size: 1.5em; } .aside, .article, .section, .mobilemenu, .banner { opacity: 0.9; transition: 0.3s; } .banner { border: none; width: 240px; max-width: 100%; } .banner:hover { opacity: 1; } .bannerother, .bannergrave { border: none; height: 60px; width: 240px; max-width: 100%; } .bannergrave { filter: grayscale(1); transition: 0.3s; } .bannergrave:hover { filter: grayscale(0); } .bannerlarge { border: none; max-width: 100%; } .imgnoborder { max-width: 100%; border: none; } .aside, .article, .section, .mobilemenu { background: var(--bg-col); padding: 10px; border: 1px solid var(--main-col); box-shadow: 3px 3px 2px var(--main-col); } .aside:hover, .article:hover, .section:hover, .mobilemenu:hover { opacity: 1; box-shadow: 6px 6px 4px var(--main-col); } .aside { width: 250px; margin: 2px; max-height: var(--ver); align-self: start; overflow-x: hidden; position: sticky; top: calc(2px + 8px); } .aside > ul { padding-inline-start: 20px; } .aside > ul > ul { padding-inline-start: 25px; } .asideitem { list-style-image: url("../images/list.gif"); list-style-position: inside; font-size: 1.2em; } .asidesubitem { list-style-image: url("../images/listsmall.gif"); list-style-position: inside; font-size: 1em; } .openaside { display: none; position: fixed !important; height: 1.5em; padding: 6px 0 0 0 !important; width: 100%; top: 0; left: 0; right: 0; background: var(--bg-col); border-bottom: 3px double var(--main-col) !important; border-top: none !important; border-left: none !important; border-right: none !important; text-align: center; box-shadow: none !important; z-index: 1; } .openaside a { font-size: 1.2em; letter-spacing: 8px; margin-top: 4px; } .bottom { height: var(--ver-btm); width: 100%; bottom: 0; left: 0; position: fixed; background-image: var(--shade); display: table; } .bottomcell { display: table-cell; vertical-align: bottom; text-align: center; opacity: 0.7; transition: 0.3s; } .bottomcell:hover { opacity: 1; } .cell { width: 45%; text-align: center; } .cell > p { height: 24px; margin: 16px 0 0 0; } .cell > h3 { height: 48px; margin: 16px 0 0 0; } .mobilemenu { width: 250px; overflow-x: hidden; padding-right: 25px; margin-bottom: 80px; } .mobilemenu > ul { text-align: left; position: relative; right: 9px; } .mobilemenu > ul > ul > p { left: 25% !important; } .content { margin-bottom: var(--ver-btm); margin-top: 2px; margin-bottom: 0; width: fit-content; } .article { margin: 2px 20px 0 20px; padding: 25px !important; margin-top: 30px; margin-bottom: 55px; } .article-headerless { margin: 0 20px 55px 0 !important; } .section { max-height: 50vh; overflow: hidden; position: relative; } .section1 { margin: 20px 20px 20px 80px; } .section2 { margin: 20px 80px 20px 20px; } .section3 { margin: 20px 60px 20px 60px; } .homesection { margin-bottom: 60px; width: 540px; text-align: center; max-height: unset; } .homemessage, .homesubmessage { font-style: italic; } .homemessage { font-size: 2em; } .homesubmessage { font-size: 1.2em; } .homesmallimg { display: none; } .upperdirs { width: 80%; height: var(--ver-upr); margin-bottom: 20px; margin-left: auto; margin-right: auto; text-align: center; } .numlist { display: table; margin-bottom: 20px; margin-left: auto; margin-right: auto; } .seemore { position: absolute; bottom: 0; width: calc(100% - 20px); height: 60px; background-image: var(--shade); } .seedate { float: left; margin-top: 40px; } .seemorelink { float: right; margin-top: 40px; } .greyed { color: var(--grey-col); } .archivereturn { margin: 20px 60px 20px 60px; display: table; } .search { width: 25vw; min-width: 300px; } .titlecol { width: 65%; } .datecol { width: 35%; } .nothinghere { width: 50vw; height: 10vh; margin: 20px 10vw 0 10vw; text-align: center; } .nothinghere > .notgood { letter-spacing: 2px; animation: notgood 4s ease-in-out infinite; animation-play-state: running; } .nothingreturn { position: absolute; bottom: 0; right: 0; font-size: 1.2em; padding: 6px; } .extlink { background: url("../images/ext.gif") no-repeat; background-position: right; padding-right: 13px; } .leftimg, .rightimg, .centerimg { filter: grayscale(1); transition: 0.2s; } .leftimg:hover, .rightimg:hover, .centerimg:hover { filter: none; } .leftimg, .rightimg { max-width: 50%; max-height: 25em; display: block; margin: 10px; } .leftimg { float: left; } .rightimg { float: right; } .centerimg { max-width: 70%; max-height: 30em; display: block; margin: 10px auto; } .quote { display: inline-block; margin: 5px; color: var(--grey-col); } .quote:before { content: "「"; color: var(--main-col); letter-spacing: 10px; } .quote:after { content: "」"; color: var(--main-col); letter-spacing: 10px; } .scrollingcontentbtm { margin-bottom: var(--ver-btm); display: inline-block; } .blogbox { position: relative; right: 11px; border: 1px solid var(--main-col); margin-left: 20px; margin-bottom: 10px; } .asidehometext { font-size: 1.2em; position: relative; display: none; text-align: center; } .asidebottomimage { height: 30px; max-width: 30px; margin: 0 3px; transition: 0.5s; } .asidebottomimage:hover { box-shadow: var(--main-col) 1px 4px 5px; } .archivespan { margin: 30px; } .codeblock { font-family: 'pxplus_ibm_vga9regular', monospace; border: 1px solid var(--main-col); background-color: #1b1b1d; color: #ffcccc; font-size: 0.9em; padding: 10px; white-space: pre-wrap; margin: 10px; overflow-wrap: break-word; word-break: break-all; } .largefont { font-size: 2em; } .center { text-align: center; margin-left: auto; margin-right: auto; } .arrow { border: none; padding: 2px 0 0 0; } .datetext { text-align: center; font-weight: bold; } .webring-panel { width: fit-content; margin-left: auto; margin-right: auto; } .webring-text { margin: 6px; } .webring-table { margin-top: 0; margin-bottom: 0; } @keyframes notgood { 0% { letter-spacing: 2px; } 50% { letter-spacing: 4px; } 100% { letter-spacing: 2px; } } @media (max-width: 900px) { .aside > .asidehomeimage { display: none; } .aside > .asidehometext { display: block; } .aside { width: 200px; } .content { } } @media (max-height: 580px) { .aside > .asidehomeimage { display: none; } .aside > .asidehometext { display: block; } } @media (max-width: 850px) { .homesection { width: 220px; } .homelargeimg { display: none; } .homesmallimg { display: block; } } @media (max-width: 660px) { .aside { display: none; } body { grid-template-columns: auto } .openaside { display: block; } body { margin: 3em 8px 8px 8px; } .content { margin-left: unset; } } @media (max-width: 600px) { .seedate { display: none; } .seemorelink { float: left; } .bottomcell > p { font-size: 0.7em; } }