:root {
	--bg-light: #C199C7;
	--bg-dark: #562E55;
	--fnt-light: #222548;
	--fnt-dark: #F5DDFF;
	--link-dark: #FF96FF;
	--link-light: #522A56;
}

body {
	background: var(--bg-light);
	color: var(--fnt-light);
}

/* Basic formatting */

a { color: var(--link-light); transition: color 0.25s; }

a:hover { color: var(--link-dark); background: var(--link-light); border-radius: 0.25em; }

h1 { font-size: 1.75em; width: 100%; margin-top: 0; margin-bottom: 0; text-align: center; }

h2 { font-size: 1.5em; width: 100%; margin-top: 0; margin-bottom: 0; text-align: center; }

h3 { font-size: 1.25em; }

p { margin-top: 0; margin-bottom: 0.5em; }

hr { height: 0.25em; background: linear-gradient(to right, rgba(0,0,0,0), var(--bg-dark), var(--fnt-light), var(--bg-dark), rgba(0,0,0,0)); border: transparent; margin-top: 0; }

.hr75 { height: 0.2em; width: 75%; background: linear-gradient(to right, rgba(0,0,0,0), var(--bg-dark), var(--fnt-light), var(--bg-dark), rgba(0,0,0,0)); border: transparent; margin-top: 0; }

lightred { color: #f98b9c; }

/* Card shit */

.card { 
	display:flex; 
	flex-direction: row; 
	height: 8em; 
	max-height: 8em; 
	border-style: solid; 
	border-width: 0.15em; 
	border-color: var(--fnt-light); 
	border-radius: 0.25em;
	background-color: var(--bg-dark);
	color: var(--fnt-dark);
	padding: 0.5em;
	overflow: hidden;
	margin-top: 0.5em;
}

.card .thumb {
	display: flex;
	width: 30%;
	max-height: 99%;
	overflow: hidden;
	
	img {
		border-radius: 5px;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		margin: auto;
		justify-content: center;
	}
}

.card .info {
	padding-left: 1%;
	display:flex;
	width: 70%;
	flex-direction: column;
	height: 98%;
	position: relative;
}

.card a { color: var(--link-dark); }
.card a:hover { color: white; background: transparent; }

.card hr { height: 0.25em; width: 100%; background: linear-gradient(to right, rgba(0,0,0,0), var(--bg-light), var(--fnt-dark), var(--bg-light), rgba(0,0,0,0)); border: transparent; margin-top: 0; }

.card .title { width: 100%; font-size: 1.25em; text-align: center; }
.card .series { width: 100%; font-size: 0.75em; text-align: center; margin-top: -0.5em; margin-bottom: -0.5em;}

.card .footer { width: 100%; font-size: 0.5em; text-align: left; bottom: 0; position: absolute; font-weight: bold;}

.scriptBox {
	border-style: solid; 
	border-width: 0.15em; 
	border-color: var(--fnt-light); 
	border-radius: 0.25em;
	background-color: var(--bg-dark);
	color: var(--fnt-dark);
	transition: height 0.25s, width 0.25s;
	
	a {
		color: var(--link-dark);
		text-decoration: underline;
		text-decoration-color: var(--link-dark);
		cursor: pointer;
		transition: color 0.25s, text-decoration-color 0.25s;
	}
	
	a:hover {
		color: white;
		text-decoration-color: white;
	}
}

.scriptInner {
	margin: 0.5em;
	transition: opacity 0.25s;
}

.inactive {
	transition: opacity 0.25s;
	display:none; opacity:0;
}

.askbox {
	border-style: solid;
	border-width: 0.15em;
	border-color: var(--fnt-light);
	border-radius: 0.5em;
	background-color: var(--bg-dark);
	color: var(--fnt-dark);
	padding: 0.5em;
	overflow: hidden;
	
	.input {
		font-family: inherit;
		background: var(--bg-light);
		color: var(--fnt-light);
		border-radius: 0.5em;
		border-color: var(--fnt-light);
	}
	
	.submit {
		font-family: inherit;
		background: var(--bg-light);
		color: var(--fnt-light);
		border-radius: 0.5em;
		border-color: var(--fnt-dark);
		font-size: 0.8em;
	}
}

@media (max-width: 740px) {
	body {
		font-size: 0.9em;
	}
}

.art {
	display:flex;
	flex-direction: horizontal;
	height: 17em;
	max-height: 17em;
	justify-content:center;
	
	a {
		background: transparent;
	}
	
	img {
		border-radius: 0.5em;
		height: 100%;
	}
}

.fakelink {
	text-decoration: underline;
	text-decoration-color: var(--link-light);
	cursor: pointer;
	
	transition: color 0.25s, text-decoration-color 0.25s;
}

.fakelink:hover {
	text-decoration-color: var(--link-dark);
}

/* Scrollbar */
* {
  scrollbar-color: var(--link-light) transparent;
}