:root {
    --light: #ffe5edc9;
    --accent: #cceeff;
	--dark: #403a2f;
	--primary: #cb8198;
	--secondary: #ba91ce;
	--tertiary: #fff;
    background-color: var(--light);
	background-image: url(/img/theme/pastelstars.gif);
}
:root.dark {
    --light: #fafafa;
    --accent: #6b7b9cd6;
	--dark: #1d091ae8;
	--primary: #f7bcc8;
	--secondary: #dab5eb;
	--tertiary: #fbf4c4;
    background-color: var(--dark);
	background-image: url(/img/theme/spacecats-weepysheep.png); /* credit: https://www.deviantart.com/weepysheep/art/Starcats-508338249 */
	body {color: var(--light);
	.center {
		background-color: var(--dark);
		width: fit-content;
		margin: auto;
	}
	nav {background-color: var(--dark);}
	nav a {color: var(--primary);}
	main {color: var(--light);}
	h1 {
		color: var(--light);
		background-color: var(--accent);
	}
	a[href*="//"]:not(:has(img, i))::after {color: var(--light);}
	main.about-mana, main.now, .subsect, .collect, .box, aside, main.contact-me {
		background-color: var(--dark);
		color: var(--light);}
	}
	.masonry-item {
		opacity: 80%;
		transition: .5s;
	}
	.masonry-item:hover {
		opacity: 100%;
		transition: .5s;
	}
	.subsect a {color: var(--light)}
	.subsect h2 {color: var(--dark);}
}
/* indicate external links */
a[href*="//"]:not(:has(img, i))::after {
    content: '';
    font-family: 'phosphor';
    color: var(--dark);
    padding-left: .1rem;
    vertical-align: middle;
    font-size: .7rem;
  }

@font-face {
  font-family: hez;
  src: url("/fonts/Hezaedrus.ttf")
}
* {box-sizing: border-box;}
body {
	color: var(--dark);
	font: 1rem 'hez', sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
}
header {
	margin: auto;
	display: block;
	width: fit-content;
	padding: 30px 20px;
	text-align: center;
}
nav {padding: .25rem .5rem;}
nav a {color: var(--dark);}
header p {margin: .5rem;}
footer {
    z-index: 1;
    right: 20px;
    top: 20px;
    position:fixed;
    color: var(--Accent);
    font-size: 1.75rem;
}
h1 {
	margin: 1rem 0;
	font: 2rem 'hez', sans-serif;
	letter-spacing: 0.25rem;
	line-height: 2.5rem;
	color: var(--dark);
	background-color: var(--accent);
}
h2 {
	color: var(--secondary);
	text-align: center;
}
p {
	margin: 0;
	padding: .2rem 1rem;
}
main {
	display: block;
	margin: auto;
	width: 60%;
	padding: .75rem;
  	border-radius: 1rem;
	text-align: left;
}
main.about-mana, main.now {margin: auto auto 1em;}
a {
	color: var(--primary);
	text-decoration: none;
}
ul {
	list-style-type:none;
	text-align: left;
}
details {
	margin: auto;
	width: 60%;
	padding: .25rem;
}
summary {
	padding-bottom: .5rem;
	font-weight: bold;
  	color: var(--secondary);
}
.hidden {display: none;}
.light {color: var(--light);}
.dark {color: var(--dark);}
.center {text-align: center;}
main.about-mana, main.now, main.contact-me {
	background-color: var(--light);
	color: var(--dark);
}
main.me-af, main.fridge, main.picrew, main.quizzes {width: 100%}
main.sitemap {columns: 2;}
.pfp img {
	max-width: 200px;
	border-radius: 1.25rem;
}
.two-col {
	display: flex;
	margin: auto;
	width: fit-content;
}
.three-col {
    display: flex;
    justify-content: space-evenly;
    clear: both;
}
.pfp {
	flex: 25%;
	text-align: center;
}
.stats {
	flex: 75%;
	align-content: center;
	padding-left: 1.25rem;
}
.emoji {vertical-align: middle;}
ul.hobby, ul.likes, ul.dislikes {padding-left: 6.5rem;}
li::before {
	margin-right:8px;
	font: 1rem 'phosphor';
    color:var(--primary);
	vertical-align: middle;
}
.col {width:100%;}
.likes li::before {content: '';}
.dislikes li::before {content: '';}
.hobby li::before {content: '';}
.fave li::before {content: '';}
.fave {
	margin: auto;
  	width: fit-content;
	column-count: 2;
}
.list li::before {content: '';}
.list {padding: 0 1rem .5rem;}
main.collections {
	column-count: 2;
}
.collect {
    border-radius: 5px;
    width: 100%;
	background-color: var(--light);
	color: var(--dark);
    margin: 0 auto 1em;
	padding: .5rem 0;
}
.collect p {
    margin: 0;
    padding: 10px;
    text-align: center;
}
.masonry-container {
	column-count: 3;
  	column-gap: 10px;
  	width: 80%;
  	margin: auto;
}
.masonry-item img {
	border-radius: 5px;
	width: 100%;
	break-inside: avoid; /* Prevents items from breaking inside columns */
}
aside, .box {
    border-radius: 5px;
    background: var(--light);
    margin: 0 auto 1em;
}
aside {
	width: 80%;
	padding: .5rem 0;
	border: 1px solid var(--dark);
}
aside h2 {margin: .5rem auto 1rem;}
.box {width: 60%;}
.box h2 {padding-top: .5rem}
.subsect {
    border-radius: 5px;
	width: 100%;
	break-inside: avoid;
    background: var(--light);
    margin-bottom: .5em;
	padding-bottom: 1px;
}
.subsect h2 {
	background-color: var(--secondary);
	color: var(--light);
	padding-top: 1px;
	border-radius: .25rem .25rem 0 0;
}
.subsect a {color: var(--dark)}
.subsect p {margin: .25rem 0;}
.owo {
    position: absolute;
    top: .1rem;
    left: .1rem;
}
.smolbox {
	border: 2px dashed var(--primary);
	width: fit-content;
	margin: auto;
	border-radius: 1rem;
	padding: 1em;
}
ul.now {
	width: fit-content;
	margin: auto;
	padding: 1em 1em .25em;
}

@media screen and (max-width: 700px){
	.two-col {
		display: block;
		width: fit-content;
	}
	.three-col {display: block;}
	.pfp, .stats {width: 100%;}
	.fave, main.sitemap {column-count: 1;}
	main {width: 98%;}
	details {
		width: auto;
		padding: 1rem;
	}
	aside {width: 95%;}
	main.collections {
		column-count: 1;
	}
	.masonry-container {
        column-count: 1;
        column-gap: 10px;
        width: 98%;
        margin: auto;
    }
	.box {width: fit-content}
	.subsect p {margin: 1rem 0}
}