:root {
	--bg: #eee;
	--bg2: #ddd;
	--bg3: #dadada;
	--text: #181a1b;
	--faint: #181a1b80;
	--accent1: #2CBFF8;
	--accent2: #BD0699;
	--accent3: #7504FF;
	--accent4: #2F8C00;
	--h2: #07ACED;
	--h3: #06BD89;
	--h4: #047656;
	--h5: #012F22;
	--h6: #011811;
    --fontsize: max(1em, 24px);
    --blue:#62AAC0;
    --brown:#847965;
    --green:#B0F4CA;
    --grey:#969997;
    --purple:#A793C8;
    --red:#FFC9D4;
    --yellow:#FEDD9D;
    --pigmenttext: #181a1b;
    --yellowtext: #181a1b;
	}

/* Dark mode */

@media (prefers-color-scheme: dark) {

    :root {
        --bg: #181a1b;
		--bg2: #101010;
        --bg3: #222;
    	--text: #eee;
    	--faint: #eeeeee80;
    	--accent1: #5BCEFA;
    	--accent2: #FA5BD9;
    	--accent3: #c594ff;
    	--accent4: #86ff48;
    	--link1: #5BCEFA70;
    	--link2: #FA5BD970;
    	--link3: #c594ff70;
    	--link4: #86ff4870;
        --h2: #7FD8FB;
        --h3: #A2FCE3;
        --h4: #FDC5ED;
        --h5: #DCFEF4;
        --h6: #FEE8F8;
        --blue:#005175;
        --brown:#5B351D;
        --green:#00593A;
        --grey:#303737;
        --purple:#8573A2;
        --red:#4C1200;
        --yellow:#FFC64E;
	    --pigmenttext: #eee;
    	--yellowtext: #181a1b;
    }

}

/* Style */

@font-face {
	font-family: NasinNanpa;
	src: url(/assets/fonts/nasin-nanpa-4.0.1-UCSUR.otf), url(nasin-nanpa-4.0.1-UCSUR.ttf), url(nasin-nanpa-4.0.1-UCSUR.woff);
}

body.pona {
	font-family: NasinNanpa;
}

body {
	background: var(--bg);
	font-size: var(--fontsize);
	color: var(--text);
	padding: 1%;
	width: 70%;
	padding: 0 10px;
	margin-right: auto;
	margin-left: auto;
}

footer {
	border-top: 1px dotted var(--text);
	padding-top: 10px;
}

p#name {
	font-size: 2em;
	margin: 50px auto;
}

nav {
  float: left;
}

h1 {
	color: var(--accent1);
	line-height: max(1.3em, 28px);
	padding-top: 0;
	margin-top: 0;
	font-size: max(1.3em, 28px);
}

h2 {
	color: var(--h2);
	font-size: max(1.2em, 26px);
}

h3, summary {
	color: var(--h3);
	font-size: max(1.1em, 25px);
}

h4 {
	color: var(--h4);
	font-size: var(--fontsize);
}

h5 {
	color: var(--h5);
	font-size: var(--fontsize);
}

h6 {
	color: var(--h6);
	font-size: var(--fontsize);
}

i, em {
	color: var(--accent3);
}

b, strong {
	color: var(--accent4);
}

a:link {
	color: var(--accent2);
    text-decoration: none !important;
    border-bottom: 1px dashed var(--link2);
}

a:hover {
	color: var(--accent1);
    text-decoration: none !important;
    border-bottom: 1px dashed var(--link1);
}

a:active {
	color: var(--accent1);
    text-decoration: none !important;
    border-bottom: 1px dashed var(--link1);
}

a:visited {
	color: var(--link2);
}

.nav a:link, .nav a:hover, .nav a:visited, footer a:link, footer a:hover, footer a:active {
	border-bottom: none !important;
}

h1 i, h1 em, h1 b, h1 strong {
    color: var(--accent1);
}

img {
    border: none;
    max-width: 100%;h
}

blockquote {
	background: var(--bg2);
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 15px;
	border-radius: 10px;
	border-left-style: inset;
	border-right-style: hidden;
	border-top-style: hidden;
	border-bottom-style: inset;
	border-color: var(--accent3);
	border-width: 4px;
}

code {
	background: var(--bg2);
	padding: 5px 2px;
	border-radius: 10px;
}

pre {
	font-size: 1em;
}

pre code {
	display: block;
	padding: 10px;
	width: 75%;
}

blockquote cite {
	font-style: italic;
}

.caption {
	font-size: 0.8em;
	color: var(--faint);
}

.caption a:link, .caption a:hover, .caption a:active, .caption a:visited {
	border-bottom: none;
}

/* Specific pages */

button {
	font-size: 1.2em;
	margin: 5px 0 20px 0;
}

p.msg {
	background: var(--bg2);
	padding: 10px;
	border-radius: 10px;
}

span.username {
	font-weight: bold;
	color: var(--accent3);
}

span.timestamp {
	color: var(--faint);
}

blockquote.richlink {
	background: var(--bg2);
	border-left: 10px solid var(--accent3);
	width: 75%;
	margin-left: auto;
	margin-right: 0;
	padding: 10px;
	border-radius: 0 10px 10px 0;
}

details.anote {
	background: var(--bg2);
	padding: 10px;
	border-radius: 10px;
}

details.anote summary {
	font-size: 1.2em;
	font-weight: bold;
}

body.nested-details details {
	margin: 1em;
}

body.nested-details summary {
	background: var(--bg3);
	padding: 1em;
}

table {
	width: 100%;
	text-align: left;
}

table:not(elem) tr.even {
	background-color: var(--bg2);
}

tr.header {
	background: var(--bg);
	opacity: 0.9;
	position: sticky;
	top: 0;
}

table td {
	min-width: 3em;
	margin: 0px;
	padding: 2px 10px;
	border: 0;
}

table td strong {
	color: var(--text);
}

td.nve {
	background: var(--red);
}

td.se {
	background: var(--green);
}

td.n {
	background: var(--bg2);
}

form.pronouns {
    float: right;
    background: var(--bg3);
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
}

div.fichead {
}

span.fandom, span.char, span.ship, span.wfor, span.tropes {
	display: inline-block;
	margin: 10px;
}

span.fandom item, span.char item, span.ship item, span.wfor item, span.tropes item {
	border-radius: 10px;
	padding: 10px 5px;
}

span.fandom item {
	background: var(--blue);
}

span.char item {
	background: var(--purple);
}

span.ship item {
	background: var(--red);
}

span.wfor item {
	background: var(--green);
}

span.tropes item {
	background: var(--yellow);
	color: var(--yellowtext);
}

td:has(.redpigment) {
	background-color: var(--red);
	color: var(--pigmenttext);
}

td:has(.bluepigment) {
	background-color: var(--blue);
	color: var(--pigmenttext);
}

td:has(.brownpigment) {
	background-color: var(--brown);
	color: var(--pigmenttext);
}

td:has(.greenpigment) {
	background-color: var(--green);
	color: var(--pigmenttext);
}

td:has(.greypigment) {
	background-color: var(--grey);
	color: var(--pigmenttext);
}

td:has(.purplepigment) {
	background-color: var(--purple);
	color: var(--pigmenttext);
}

td:has(.yellowpigment) {
	background-color: var(--yellow);
	color: var(--yellowtext);
}

/* toki pona */

 /* Style the tab */
.tab {
  background-color: var(--bg);
  float: right;
  padding: 5px;
  margin: 5px;
  border-radius: 10px;
}

.sitelenpona {
  font-family: NasinNanpa !important;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  color: var(--text);
  border: 1px solid var(--accent3);
  outline: none;
  cursor: pointer;
  padding: 10px;
  transition: 0.3s;
  width: 100%;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--bg3);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--bg3);
}

/* Style the tab content */
.tabcontent {
  padding: 6px 12px;
  border: none;
  border-top: none;
  font-family: NasinNanpa;
}

.tabcontent.default {
	display: block;
}

.tabcontent.hidden {
	display: none;
}

/* Responsive on mobile */

@media only screen and (max-width: 650px) {
  body {
		width: 98%;
		padding: 1%;
		margin-left: auto;
		margin-right: auto;
		font-size: 1em;
	}

	p#name {
		text-align: center;
	}

    details.anote {
        width: 80%;
    }

	span.fandom item, span.char item, span.ship item, span.wfor item, span.tropes item {
		border-radius: 3px;
		padding: 2px;
	}

}