@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src:
        url("/assets/fonts/atkinson-hyperlegible-next.woff2");
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src:
        url("/assets/fonts/atkinson-hyperlegible-mono.woff2");
    font-display: swap;
}

:root {
	--text-color:       light-dark(#4c4f69, #c6d0f5);
	--subtext-color:    light-dark(#6c6f85, #a5adce);
	--bg-color:         light-dark(#eff1f5, #303446);
	--post-bg-color:    light-dark(#ccd0da, #414559);
	--image-bg-color:   light-dark(#e6e9ef, #292c3c);
	--forest-bg-color:  light-dark(#dce0e8, #232634);
	--link-color:       light-dark(#df8e1d, #e5c890);
	--link-vis-color:   light-dark(#fe640b, #ef9f76);
	--warning-color:    light-dark(#df8e1d, #e5c890);
	--danger-color:     light-dark(#d20f39, #e78284);
	--heading-color:    light-dark(#40a02b, #a6d189);
	--subheading-color: light-dark(#179299, #81c8be);
    
    --hr-color:         var(--subtext-color);
	
	color-scheme: dark light;
}
/* if there is a manual override for the theme, respect it */
html[data-theme="dark"] { color-scheme: only  dark; }
html[data-theme="lite"] { color-scheme: only light; }


@media print {
    :root {
	    --text-color:       #000000;
	    --subtext-color:    #686868;
	    --bg-color:         #ffffff;
	    --post-bg-color:    #dddddd;
	    --image-bg-color:   #ffffff;
	    --forest-bg-color:  #ffffff;
	    --link-color:       #df8e1d;
	    --link-vis-color:   #fe640b;
	    --warning-color:    #df8e1d;
	    --danger-color:     #d20f39;
	    --heading-color:    #40a02b;
	    --subheading-color: #179299;

        --hr-color: var(--post-bg-color);
	    
	    color-scheme: only light;
    }
}

.label {
	padding: 5px;
	border-radius: 10px;
}

.nsfw-tag {
	background-color: var(--danger-color);
	color: var(--bg-color);
}

.suggestive-tag {
	background-color: var(--warning-color);
	color: var(--bg-color);
}

span.date {
	color: var(--subtext-color);
	font-style: italic;
}

hr {
    border-color: var(--hr-color);
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: "Atkinson Hyperlegible Next", sans-serif;
	font-size: large;
	
	width:100%;
	height:100%;
	border: 0 0 black;
	margin: 0px;
	padding: 0px;
	
	display: flex;
	justify-content: center;
}

code {
    font-family: "Atkinson Hyperlegible Mono", monospace;
}

table {
	/*table-layout: fixed;*/
	min-width: 100%;
	border-collapse: collapse;
	border: 3px solid var(--post-bg-color);
}

thead {
	background-color: var(--post-bg-color);
}

td {
	border-left: 2px solid var(--post-bg-color);
	border-right: 2px solid var(--post-bg-color);
	padding: 3px;
}

tr:nth-child(even) {
	background-color: var(--image-bg-color);
}

pre.ascii-art {
    line-height: 1.2em;
}

.b88x31-sash {
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.b88x31-sash > img,
.b88x31-sash > a > img,
.b88x31-sash > a > picture > img,
.b88x31 {
	/*width: 176px;
	height: 62px;*/
	image-rendering: pixelated;
}

@media not print {
    .site-trim-right, .site-trim-left {
	    /*width:min-content;*/
	    background-color: var(--forest-bg-color);
	    
	    flex: 1 1 0;
	    max-width: 100%;
	    min-height:100vh;
	    mask-size: contain;
	    mask-repeat: repeat-y;
	    image-rendering: pixelated;
    }

    .site-trim-left {
	    mask-image: url("/assets/decals/tree-left.png");
    }

    .site-trim-right {
	    mask-image: url("/assets/decals/tree-right.png");
    }

    .site-content {
	    background-color: var(--bg-color);
	    max-width:   95vw;
	    min-height:  100vh;
	    width:       950px;
	    margin:      auto;
	    padding:     2vw;
	    line-height: 1.5em;
	    flex-grow:   1;
    }
}

h1 {
	text-align: center;
	color: var(--heading-color);
}

h2 {
	color: var(--subheading-color);
}

.gallery {
	box-sizing: border-box;
	grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
	gap: 12px;
	list-style-type: none;
	display: grid;
	padding-left: 0;
	figure {
		background-color: var(--post-bg-color);
		padding: .625rem;
		img {
			background-color: var(--image-bg-color);
			width:100%;
			height:100%;
			object-fit: contain;
		}
	}
}

#home {
	text-align: center;
}

.art {
	max-width: min(max(50%, 99vw), 90%);
}

.twt {
	font-size: 75%;
}

a:link, a:visited.novisit {
	color: var(--link-color);
}

a:visited {
	color: var(--link-vis-color);
}

.danger, a.invalid-link {
	color: var(--danger-color);
}

.flex-footer {
	display: flex;
	flex-wrap: wrap;
	.footer-item {
		margin: 2vw;
	}
}