:root {
    --lightbg: #ffeff5;
    --darkbg: #ffe4e1;
    --mainbg: #f7c5c5;
    --text: #594b4b;
	--bigtext: #fffaf0;
	--alt: #7e5e60;
	--primary: #fb607f;
	--link: #e1396e;
    --alttext: 'Doki Doki Mono';
    --maintext: 'Binchotan_Sharp';
	background-color: var(--darkbg);
  	background-size: 11px 11px;
  	background-image:
    	linear-gradient(to right, var(--lightbg) 1px, transparent 1px),
    	linear-gradient(to bottom, var(--lightbg) 1px, transparent 1px);
}
@font-face {
    font-family: 'Doki Doki Mono';
    src: url("/fonts/DokiDoki.otf")
  }
@font-face {
    font-family: 'Binchotan_Sharp';
    src: url("/fonts/binchotan.ttf")
  }
/* grid layout */
.right-sidebar-grid {
    width: 60vw;
    display: grid;
    grid-template-areas: 
        'header'
        'main'
        'sidebar'
        'footer';
    gap: 10px;
    margin: 0 auto 1rem;
}
.right-sidebar-grid > .header {grid-area: header;}
.right-sidebar-grid > .main {grid-area: main;}
.right-sidebar-grid > .sidebar {grid-area:sidebar;}
.right-sidebar-grid > .footer {grid-area:footer;}
@media (min-width: 768px) {
    .right-sidebar-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            'header header header'
            'main main sidebar'
            'footer footer footer';
    }
}
.ph {
	font-size: 1em;
	color: var(--linkColor);
	fill: var(--fgColor);
	background-color: transparent;
	vertical-align: middle;
}
.ph-fill.ph-star.rate, .ph-star.rate {
    font-size: 1rem;
    margin-right: auto;
    vertical-align: text-bottom;
}
.emoji {vertical-align: middle;}
.smol {
	color: var(--text);
	font: .9rem var(--maintext);
}
body {
    margin: auto;
    text-align: justify;
    font-family:
        var(--alttext),
        var(--maintext),
        system-ui,
        -apple-system,
        monospace,
        sans-serif;
    padding: 0 40px;
	color: var(--bigtext);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
header {
    margin: 2.5rem auto 0;
    text-align: center;
}
main {
    font: .9rem var(--alttext);
    color: var(--text);
}
.main {padding: 0;}
a img {text-decoration: none;}
article, nav, section {
    background: var(--mainbg);
    border-radius: 8px;
    padding: .75rem;
	min-height: max-content;
    margin-bottom: 10px;
}
section:last-of-type {margin-bottom: 0;}
.splitsection section:last-of-type {margin-bottom: 10px;}
details {margin: .75rem 2rem;}
summary {
    margin: .45rem -1.5rem;
    font-size: 1rem;
}
nav a {
    text-decoration: none;
    color:var(--link);
}
ul.menu a {text-decoration: none;}
ul {
    display: flex;
    flex-direction: column;
	list-style-image: url("/img/emoji/peach.png");
    padding: 0;
    margin: 0 1.35rem;
}
ul.menu {
    list-style-image: url("/img/emoji/tinystar.gif");
    margin-left: 1.25rem;
}
ul.fav {list-style-image: url("/img/emoji/miniheart.gif");}
.twocol {column-count: 2;}
.menu li a {
    font: .9rem var(--alttext);
    line-height: 1;
}
/* external links indicated */
a[href*="//"]:not(:has(img))::after {
	font: .9rem 'phosphor';
	color: var(--text);
	padding-left: .1rem;
	vertical-align: middle;
	content: '';
}

p,
h1,
h2,
h3,
h4,
h5,
a {
    padding: 0;
    margin: 0;
}
article a, a:visited {color: var(--link);}
main > article p {margin: .65rem 0;}
main > article p:last-of-type {margin-bottom: 0;}
h1 {font: bold 2.75rem var(--alttext)}
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--alttext);
    color: var(--bigtext);
}
a, a:visited {color: var(--link)}
p {font: .98rem var(--alttext);}
li, li a {font: .98rem var(--maintext);}
header a, header a:visited {
	text-decoration: none;
	color: var(--primary)
}
h2 a.link {
	text-decoration: none;
	color: var(--bigtext);
}
h2.blog, h2.big {font-size: 2rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.35rem;}
h5 {font-size: 1.2rem;}
hr {
    border: 1px dashed var(--alt);
    width: 100%;
}
blockquote p {
    font-style: italic;
    border-left: 4px solid var(--darkbg);
    padding-left: .5rem;
}
blockquote {margin-left: 1.5rem;}
dd {
    font-style: italic;
    margin: 0 1.5rem 1rem;
}
dt {
    margin-left: 1rem;
    font-weight: bold;
}
article.media ul {margin: .25rem 1.25rem .75rem;}
#song {font-size: 1.2rem;}
#statuscafe-content, #statuscafe-username {color:var(--text);}
#statuscafe-content {font: 1rem var(--maintext);}
#mood {
	float: right;
	padding-top: 6px;
}
/* about page styling */
img.pfp {
	max-width: 140px;
	float: left;
	margin-right: 10px;
	border: 1px dashed var(--alt);
	border-radius: 8rem;
    background: var(--darkbg);
}
img.aboutpfp {
	max-width: 200px;
	border: 1px dashed var(--alt);
	border-radius: .5rem;
    background: var(--darkbg);
}
.regli li {margin: .25rem 0;}
.regli li:first-of-type {margin-top: 0;}
.regli li:last-of-type {margin-bottom: 0;}
ul.regli > *, ul.regli a {font: 1rem var(--alttext);}
.nodeco {
    list-style-image: none;
    list-style-type: none;
}
.nodeco li {font: .95rem var(--alttext);}
ul.reg li, .uses ul li {font: .9rem var(--alttext);}
.uses ul li {margin: 0 0 .12rem;}
.idols ul {margin-bottom: 1rem;}
.facts li {margin-bottom: .35rem;}
.center {
	text-align: center;
	margin: 0 auto;
}
.right {text-align: right;}
.justify {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}
.scroll {
    max-height: 105px;
    overflow-y:scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--darkbg) var(--mainbg);
}
.update .scroll {max-height: 220px;}
.imgwall {
	font-size: 0;
  	line-height: 0em;
  	image-rendering: pixelated;
	text-decoration: none;
}
.imgwall img {padding: 1px;}
.fl {
    gap: 3px;
    line-height: 1;
}
.ph-fill, .ph {
	font: 1.25rem 'phosphor';
    color:var(--primary);
	margin-right: -.5rem;
}
.update p {
	color: var(--text);
	text-align:left;
	font-size: .98rem;
}
ul.update li {
    font: 1rem var(--alttext);
    margin: .19rem 0;
}
.update a {font-family: var(--alttext);}
.code {background-color: var(--alt);}
.tags {
    display: flex;
    justify-content: space-evenly;
    flex-flow: wrap;
    line-height: 1.5rem;
    margin: -2px 0 -2px 0;
}
.tags a {
    text-decoration: none;
}
.published {
    font-size: .8rem;
    margin: .85rem 0 0;
}
.blogimg img {
    border-radius: 10px;
    border: 1px dashed var(--alt);
    margin: .5rem;
    max-width: 95%;
}
.blogimg {font-size: .8rem;}
.top {
    position: fixed;
    bottom: 1.5rem;
}
.stickynav {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    text-align: right;
    display: flex;
    flex-flow: column;
    gap: .25rem;
}
.card {
    display: flex;
	margin: auto;
	width: fit-content;
    align-items: center;
    gap: 10px;
}
.vert {
    flex-flow:column;
    gap: .1rem;
    font-size: .75rem;
}
.splitsection {
    display: flex;
    gap: 10px;
    margin: 0;
}
.splitsection > * {
    background: var(--mainbg);
    border-radius: 8px;
    padding: .75rem;
    width: 100%;
}
.masonry {
	column-count: 3;
    display: flex;
    flex-wrap: wrap;
}
.masonry img {max-width: 200px;}
.links ul li, .links ul li a {font: .98rem var(--alttext)}
.sitemap ul li, .sitemap ul li a {margin: 0;}
.sitemap p {margin: .2rem 0}
.bottomspace {margin-bottom: .75rem;}
/* webcore */
.big {font-size: 3rem;}
.badge {
	width: 95%;
	margin: .25rem auto;
	vertical-align: middle;
}
.badge img {
	vertical-align: middle;
	display: inline-block;
}
.blinkies img {max-width: 150px;}
.stamp {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
.stamp img {
	vertical-align: middle;
  	padding: 1px;
}
.userbox img {
	image-rendering: auto;
	vertical-align: middle;
	margin: .1rem;
	max-width: 239px;
  }
.pixel {margin: 0 1rem .75rem;}
.emoji {vertical-align: middle;}
.kaomoji {
	border-radius: 1em;
    padding: .25rem .6rem;
    display: inline-flex;
    margin: .05rem;
    font-size: 1.2rem;
    line-height: 1.2;
}
.kaomoji:hover {
	background-color: var(--alt);
    color: var(--bigtext);
}
.kao {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.emote {
	font-size: 0;
	line-height: 0em;
	text-align: center;
}  
.emote img {
	display: inline-block;
	padding: 1px;
	width: 50px;
}
.imgwall a {text-decoration: none;}
.webimgwall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 0;
    line-height: 0em;
    image-rendering: pixelated;
    text-decoration: none;
    margin-top: .5rem;
}
.webimgwall img {padding: .1rem;}
.space {margin: 1rem;}
article h2 {font-size: 2rem;}
article h3 {margin: .75rem 0 0;}
.footnotes {margin-top: 1rem;}
.footnotes li, .footnotes li p {
    font: .95rem var(--maintext);
    margin: 0 auto .25rem;
}
.ask h3 {font-size: 1.25rem;}
.ask p {margin: 0 auto .5rem;}
.sdv h3 {text-align: center;}
.sdv ul li {
    font-family: var(--alttext);
    padding: .5rem 0;
}
.sdv ul li a, .sdv ul li a:visited {font-family: var(--alttext);}
.boxed {
    border: 1px var(--darkbg) solid;
    padding: .4rem 2rem;
    max-height: 200px;
}
/* responsive!! */
@media (max-width: 768px) {
    .right-sidebar-grid {
        width: 85vw;
        padding: 0;
    }
    section:last-of-type {margin-bottom: 0;}
    .splitsection {flex-flow:column;}
    .splitsection > * {
        width: auto;
        margin: 0;
    }
    .twocol {column-count: 1}
    .stickynav {gap: .55rem;}
    .tags a {padding: .25rem;}
    .card {
        display: flex;
        flex-flow: column;
        margin: 1rem auto 0;
        width: fit-content;
    }
    .card img {max-width: 100%;}
    section.quiz {max-width: 100%;}
}
@media (prefers-color-scheme: dark) {
    :root {
        --lightbg: #466e78;
        --darkbg: #0b0c21;
        --mainbg: #1a1b2d;
        --text: #d6cadd;
        --bigtext: #d8b2d1;
        --alt: #847084;
        --primary: #d8bfd8;
        --link: #eed69c;
        background-size: auto;
        background-image: url(/img/theme/pastelstars.jpg);
    }
    .scroll {scrollbar-color: var(--lightbg) var(--mainbg);}
    header h1, header p, footer p {background-color: var(--darkbg);}
    .boxed {border-color: var(--alt);}
}