@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Josefin+Slab:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
/* Default colors */
:root {
	--color:white;
	--background:rgba(42,40,89,0.95);

	--bordercolor1: #fff;
	--bordercolor2: #000;
	
	--link:#7fffd4;
	--linkhover:#3ed4a2;
	
	--formbg:rgba(45, 31, 48, 1);
	
	--accentbg:rgba(62,40,89,1);
}

/* Alternate colors */
/* Replace "dark" with "light" and add your light mode colors here if you want your site to be in dark mode by default */
@media (prefers-color-scheme: light) {
	:root {
		--color:rgba(42,40,89,1);
		--background:rgba(226, 225, 255, 0.95);
	
		--bordercolor1: #000;
		--bordercolor2: #000;
		
		--link:#306050;
		--linkhover:#0f3c2d;
		
		--formbg:rgb(216, 199, 237);
			
		--accentbg:rgb(226, 198, 232);
	}
}

/* ------ The rest of the code starts here ------- */

* {
    box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #7FFFD4 #24404E;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #24404E;
}

*::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #7FFFD4;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #46e4ef;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #46e4ef;
}
img { margin:5px; max-width:100%; }

body { 
	color:var(--color);
	font-size: 1.125em;
	font-family: 'Atkinson Hyperlegible', sans-serif;
	background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/68541828_zfQnIZbj2zyUm5i.png);
    background-attachment: fixed;
}

header {
    background-color:var(--background);
    padding: 5px;
    text-align: center;
    font-size: 2em;
    border-style: dashed;
    border-width: 4px 4px 0 4px;
    border-color: var(--bordercolor2);
}

header h1 {
	font-family: 'Amatic SC', cursive;
    font-weight: 700;
	padding:0;
	margin:0 auto;
}

nav {
	background-color:var(--background);
	border-style: dotted dashed;
	border-width: 2px 4px 2px 4px;
	border-color: var(--bordercolor1) var(--bordercolor2);
	text-align: center;
}

nav li {
    list-style:none;
    display: inline;
    margin:1em;
}

nav li a {
	display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    color:var(--color);
    text-align: center;
    background-color: var(--accentbg);
    border: 2px solid;
    border-image:linear-gradient(#f34e70, #efde68, #7ee380, #0fdb9e, #467c98, #5c4186) 1;
    margin: auto;
}

nav li a:hover, nav li a:focus {
    background-color: var(--formbg);
}

#container {
	width: 100%;
	padding: 0.25em 1em;
	margin:auto;
}

main {
	background-color: var(--background);
	padding: 0.25em 1em;
    border-style: dotted dashed;
    border-width: 0 4px 2px 4px;
    border-color: var(--bordercolor1) var(--bordercolor2);
	height:400px;
    overflow:auto;
}

a {
	color:var(--link);
	transition: .2s ease;
}

a:hover {
	color: var(--linkhover);
}

li a {
	text-decoration:none;
}

p {
	margin:10px 0px 10px 0px;
	line-height:1.5;
}

main h1 {
	font-size: 2em;
	margin:5px 0 5px 0;
}

main h2 {
	margin:10px 0 10px 0;
	font-size:1.7em;
}

main h3 {
	margin:5px 0 5px 0;
	font-size: 1.4em;
}

main h4 {
	font-size:1em;
	font-style:italic;
	margin:5px 0 20px 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Slab', serif;
    font-weight: 600;
}

main input, textarea, select, button { 
	background: var(--formbg);  
	color: var(--color);
	font: 1.1rem sans-serif; 
	border: 1px solid var(--color); 
	padding: 5px; 
	margin: 5px;
	border-radius:5px;
}

main textarea {
	width:90%;
}

input[type="submit"], input[type="reset"] {
	font-size:1.2rem;
	background:var(--accentbg);
}

input[type="submit"]:hover, input[type="reset"]:hover {
	background:var(--color);
	cursor:pointer;
}

main table {
	margin:10px auto 10px auto;
	padding:5px;
	width:100%;
	border-collapse:collapse;
}

main th {
	border-bottom:1px solid var(--color);
	padding:5px;
	text-align:left;
}

main td {
	padding:3px;
}

main tr:nth-child(2n) {
	background:var(--accentbg);
}

main ul, ol { 
	list-style-position: outside;
	margin: 8px 0 8px 20px;
}

main li {
	margin:5px 0 5px 0;
	line-height:1.5;
}

main ul li ul, main ol li ol {
	margin-left:15px;
}
li::marker {
	content: "\270E\2000";
}

main blockquote {
	padding:10px;
	border-left:10px solid var(--color);
	background:var(--accentbg);
}

main blockquote cite {
	font-size:11pt;
	position:relative;
	right:0;
}

main summary {
	cursor:pointer;
	margin: 5px 0px 5px 0px;
}

main details {
	background:var(--formbg);
	margin:10px auto;
	border: 2px dotted var(--bordercolor1);
	padding: 10px;
	margin:10px auto;
}

main hr {
	border:0.5px solid var(--color);
    margin:20px auto 20px auto;
}

main pre {
	padding:10px;
	background:var(--accentbg);
	margin:10px auto 10px auto;
	border-radius:5px;
	overflow:auto;
}

footer {
	background-color:var(--background);
    padding: 5px;
    text-align: center;
    border-style: dashed;
    border-width: 0 4px 4px 4px;
    border-color: var(--bordercolor2);
}

.q {
    padding:10px;
    background:var(--accentbg);
    border-radius:5px;
    width:90%;
}

.details {
    text-align:right;
    font-size:1.1rem;
}

.a {
    padding:10px;
    border:0.5px solid var(--color);
    border-radius:5px;
    margin:10px 0 10px 40px;
    width:90%;
}

ul.pages {
    list-style:none;
    margin:auto;
    text-align:center;
}

ul.pages li { display:inline; }

ul.pages li a, ul.pages li.active {
    font-size: 1.2rem; 
    border: 1px solid var(--color); 
    padding:5px;
    margin:2px;
    transition:0.5s ease;
    text-decoration:none;
}

ul.pages li.page a:hover {
    background:var(--color);
    color:var(--formbg);
    transition:0.5s ease;
}

ul.pages li.page a {
    background: var(--formbg);  
    color: var(--color);
}

ul.pages li.active {
    background:var(--color);
    color:var(--formbg);
}

.mature, .tag {
    padding:3px;
    margin-right:5px;
    text-transform:uppercase;
    border: 1px solid var(--bordercolor1);
    background:var(--formbg);
}
.member, .stats {
	background:var(--accentbg);
	border: 2px solid;
    border-image:linear-gradient(#f34e70, #efde68, #7ee380, #0fdb9e, #467c98, #5c4186) 1;
	padding: 10px;
	margin:10px auto;
}
.member {
	display:flex;
}

.left {
	text-align:center;
	margin-right:1em;
}