@font-face { font-family: "webfont";
    src: url("../assets/fonts/webfont.ttf");
}
@font-face { font-family: "CozetteVector";
    src: url("../assets/fonts/CozetteVector.ttf");
}
@font-face { font-family: "WonderType";
    src: url("../assets/fonts/WonderType-Regular.otf");
}

html {
    --base:    rgba(15, 17, 27, 1);
    --surface: rgba(31, 29, 46, 1);
    --overlay: rgba(25, 26, 39, 1);
    --text:    rgba(236, 240, 193, 1);
    --subtle:  rgba(144, 140, 170, 1);
    --shadow:  rgba(92, 204, 150, 0.25);
    --yellow:  rgba(242, 206, 0, 1);
    --magenta: rgba(206, 111, 143, 1);
    --green:   rgba(92, 204, 150, 1);
    --purple:  rgba(122, 92, 204, 1);

    --font:         "CozetteVector",  monospace;
    --font-menu:    "CozetteVector",  monospace;
    --font-small:   "webfont",        monospace;
    --font-display: "WonderType",     sans-serif;
    --font-mono:    "CozetteVector",  monospace;
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    text-transform: capitalize;
}

pre, code {
    font-family: var(--font-mono);
    color: var(--magenta);
    background-color: var(--base);

    outline: solid 1px var(--green);
    border-radius: 2px;

    padding: 0em 0.25em 0em;
}

span {
    /* padding-right: 0.5em; */
}

time {
    font-family: var(--font-mono);
    color: var(--magenta);
    padding-right: 0.5em;
}

a {
    font-family: var(--font-menu);
    text-decoration: none;
    color: var(--purple);
}
a:hover {
    color: var(--yellow);
}

button {
    padding: 0lh 0.50em;
    border: solid 1px var(--magenta);
    color: var(--fg);
    background: var(--base);
}

body {
    padding: 1.00rlh 1rem;
    gap: 1rlh 1rem;
    width: 100vw;
    height: 100vh;
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;

    background-color: var(--base);
    color: var(--text);
    
    font-family: var(--font);

    @media (orientation: portrait) {
        flex-direction: column;
    }
}
#sidenav, main {
    padding: 1rem 1rem;
    scrollbar-color: var(--magenta) var(--surface);
    scrollbar-width: thin;
    background-color: var(--surface);
}

nav ol {
    font-size: 1rlh;
    padding-bottom: 1lh;
    display: flex;
    flex-flow: column wrap;
    @media (orientation: portrait) {
        height: 6rem;
    }

}
#sidenav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    nav {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: flex-start;

	@media (orientation: portrait) {
            max-height: 6rlh;
            flex-direction: row;
            align-items: flex-start;
	}
	li {
	    display: grid;
	    @media (orientation: portrait) {
		padding-bottom: unset;
		padding-left: 1em;
	    }

	    a {
		width: 100%;
		height: 0.75lh;
		border-bottom: solid var(--magenta) 1px;
	    }
	    a:hover {
		background-color: var(--overlay);
		color: var(--yellow)
	    }}}
    .widgets {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	li {
	    width: 100%;
	    display: flex;
	}
	img {
	}}
    footer {
	width: 100%;
	display: flex;
	font-family: var(--font-small);
	align-content: center;
	span {
	    /* text-align: justify; */
	}}

}

main {
    min-width: 80vw;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 1em;
    padding-top: 0rem;

    overflow-x: hidden;
    overflow-y: scroll;

    nav {
	}

    #topnav {
	/* position: sticky; */
	/* inset-block-start: 0px; */

	width: 100%;
	margin-top: 0.5lh;

	background-color: var(--surface);
	ol {
	    display: flex;
	    flex-direction: row;
	    height: min-content;
	    padding: 0px;
	    li {
		padding-right: 1em;
	    }}}

    .photostream {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
	margin: 0px;
	img {
	    image-rendering: smooth;
	}
	li {
	    display: flex;
	    flex-direction: column;
	    a {
		height: 100%;
		color: unset;
	    }
	}
    }
    .postboard {
	display: flex;
	flex-direction: column;
	margin: 0px;
	width: 100%;

	image-rendering: smooth;

	div {
	    display: flex;
	    flex-direction: column;
	    gap: 1em;
	}
	article {
	    overflow: trim;
	    columns: 2;
	    column-fill: balance-all;
	    gap: 0.5em;
	    p {
		line-height: 0.75rlh;
		break-inside: avoid;
		padding-bottom: 0.5lh;
	    }
	    :is(p, span, section):first-letter {
		font-size: 1.5lh;
		line-height: 0.5lh;
		text-transform: uppercase;
		color: var(--magenta);
		margin: 0em -0.025em;
		text-decoration: var(--yellow) solid underline;
		text-decoration-thickness: 0.08lh;
		text-underline-offset: 3%;
		font-family: var(--font-display);
	    }
	    header {
		column-span: all;
		margin-bottom: 0.5lh;
	    }
	    pre {
		break-inside: avoid;
		overflow-x: scroll;
	    }
	    h2 {
		border-bottom: solid var(--green) 1px;
	    }
	    ul:not(.linelist) {
		padding-left: 1em;
		li {
		    list-style-image: url("/assets/emotes/star.gif");
		    list-style-position: inside;
		}
	    }
	    section {
		break-inside: avoid;
	    }
	    .aside {
		outline: solid 1px var(--green);
		border-radius: 2px;
		float: inline-end;
		width: 50%;
	    }
	    .img-block {
		width: 100%;
	    }
	}
	.sectionw {
	    column-span: all;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    gap: 0.5em;
	}
    }
}

img {
    image-rendering: pixelated;
}


figure {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    position: relative;

    background-color: var(--base);


    
    a {
	display: flex;
	justify-content: center;
	align-content: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
	img {
	    object-fit: cover;
	    width: 100%;
	    height: 100%;
	}
    }

    figcaption {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;

	font-size: 0.75em;
	position: absolute;
	bottom: 0;
	visibility: collapse;

    }
}


figure:hover {
    figcaption {
	visibility: visible;
	background-color: color-mix(in srgb, var(--base) 70%, transparent);
    }

    a {
	outline: dotted var(--green) 1px;
	img {
	    object-fit: contain;
	    width: unset;
	    height: unset;
	}}
}


.logo {
    display: grid;
    justify-content: center;
    font-size: 1.25rem;
    width: 7em;
    padding: 0.00rlh 0.25rem 0.00rlh;
    overflow: hidden;
    border: solid var(--purple) 0.25rem;
    color: var(--magenta);
    text-decoration-color: var(--base);
    transition-duration: 0.25s;
}

.logo:hover {
    --fg: var(--magenta);
    --bg: var(--purple);

    color: var(--yellow);
    background-color: var(--bg);
    border-color: var(--fg);
    text-decoration-color: var(--bg);

    text-decoration-line: line-through;
    text-decoration-thickness: 0.55rem;
    text-decoration-style: double;

    transition-duration: 0.25s;
}

.logo > * {
    line-height: 1.7rlh;
    overflow: clip;
}


.style-float {
    box-shadow: 3px 3px var(--shadow);
    border: dotted color-mix(in srgb, var(--green) 50%, transparent) 1.55px;
}

.emote-container {
    padding: 0;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    height: 1lh;
    line-height: 1lh;
    .emote {
	overflow: visible;
    }
}

.linelist {
    padding: 0.5lh 0.5em;
    margin: 0lh 0em;
    flex-wrap: wrap;
    display: inline-flex;
    background-color: var(--base);
    outline: solid 1px var(--green);
    border-radius: 2px;
    li {
	a:hover {
	    outline: solid var(--magenta) 1px;
	}
	list-style-type: none;
    }
}