@charset "UTF-8";

:root {
	font-size: 15pt;
	
	--pencil-lead: #535353;
	--paper-bg: #F1ECE6;
	--table-separator: 2px solid var(--pencil-lead);
	--list-gap: 0.6em;
	--section-gap: 3.5em;
	--thumb-size: 4.2em;
	--thumb-width-multi: 6.2em;
	--thumb-height-multi: 5.2em;
	
	--active-anim: active_wiggle 1.3s linear 0s infinite normal none running;
	--active-anim-frame1: rotate(-20deg);
	--active-anim-frame2: rotate(20deg);
}

body {
	color: var(--pencil-lead);
	background-color: var(--paper-bg);
	font-family: Caveat, "Segoe Script", "Comic Sans MS", "Y.OzFont", cursive;
	/* Sriracha, "Indie Flower", "Gloria Hallelujah", "Architects Daughter", "Covered By Your Grace", "Shadows Into Light", Pacifico, Kalam, Courgette, "Marck Script", "Dancing Script", Yellowtail */
	background-image: url("../assets/image/hip-square.png");
	
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

main {
	padding: 0.3em 0.8em;
}

h1 {
	text-align: center;
	font-size: 2.7em;
	transform: var(--tilt2);
	margin-bottom: 0.175em;
}

h2 {
	font-size: 1.95em;
	margin-bottom: 0.5em;
	
	transform-origin: 3em 50%;
	
	text-decoration: underline;
}

body:not([data-tilt="true"]) h2 {
	margin-bottom: 0.3em;
}

section {
	margin-bottom: var(--section-gap);;
}

#toc {
	font-size: 0.9em;
}

h1 + p {
	text-align: center;
	margin-bottom: 1.25em;
}

p.myanimelist-notice {
	margin-bottom: 1.35em;
	font-size: 1.1em;
	transform-origin: 8em 50%;
}

.myanimelist-notice a {
	font-weight: bold;
}

section p {
	font-size: 1.2em;
	margin-bottom: 0.25em;
	text-indent: 0.4em;
	
	transform-origin: 1em 50%;
}

section p:not(.top-link):not(.explanation)::before {
	content: "— ";
}

p.top-link {
	text-align: center;
	font-size: 1.1em;
	margin-bottom: 0px;
	text-indent: 0px;
	letter-spacing: 0.1em;
	
	transform-origin: 50% 50%;
}

ul + p.top-link {
	margin-top: 1em;
}

body[data-tilt="true"] section p:nth-last-of-type(2) {
	margin-bottom: 0.6em;
}

body:not([data-tilt="true"]) section:not(#watched) p:last-of-type {
	margin-bottom: 0.9em;
}

.count {
	font-weight: bold;
	font-size: 1.1em;
}

table {
	border-spacing: 0 0.5em;
}

thead {
	transform: var(--tilt1);
}

tfoot {
	transform: var(--tilt2);
}

thead th {
	border-bottom: var(--table-separator);
}

tfoot th {
	border-top: var(--table-separator);
}

th, td {
	vertical-align: middle;
}

th {
	font-size: 1.6em;
	padding: 0.4em 0.2em;
	text-align: left;
}

th:nth-child(1) {
	/* Thumbnail and Show Name Column */
	text-indent: 1em;
}

th:nth-child(3) {
	/* Opinion Column */
	text-align: center;
}

td {
	padding: 0.15em 0.8em;
}

td:nth-child(1) {
	/* Thumbnail column */
	padding: 0 0.5em;
	text-align: center;
}

td:nth-child(2) {
	/* Show name column */
	font-size: 1.5em;
	
	transform-origin: 4em 50%;
}

td:nth-child(3) {
	/* Status column */
	font-size: 1.2em;
	
	transform-origin: 5em 50%;
}

td:nth-child(4) {
	/* Opinion column */
	text-align: center;
	font-size: 3.15em;
	font-family: "Buff Sloppy Handwriting", Symbola, Quivira, "DejaVu Sans", "Segoe UI Symbol", "BabelStone Han", Caveat, "Segoe Script", "Comic Sans MS", cursive;
}

td:nth-child(4):empty {
	font-size: 1.575em;
}

td:nth-child(4):empty::before {
	content: '❓︎';
}

.show-thumb, .thumb-wrapper {
	vertical-align: middle;
}

.show-thumb {
	max-width: var(--thumb-size);
	max-height: var(--thumb-size);
}

.show-thumb.multiple-characters {
	max-width: var(--thumb-width-multi);
	max-height: var(--thumb-height-multi);
}

body[data-wiggle="true"] tr.active :not(.thumb-wrapper) > .show-thumb, body[data-wiggle="true"] tr.active .thumb-wrapper {
	-webkit-animation: var(--active-anim);
	-moz-animation: var(--active-anim);
	-o-animation: var(--active-anim);
	animation: var(--active-anim);
}

body[data-wiggle="true"] tr.active:nth-of-type(even) :not(.thumb-wrapper) > .show-thumb, body[data-wiggle="true"] tr.active:nth-of-type(even) .thumb-wrapper {
	-webkit-animation-direction: reverse;
	-moz-animation-direction: reverse;
	-o-animation-direction: reverse;
	animation-direction: reverse;
}

ul {
	list-style-type: disc;
	list-style-type: "• ";
	list-style-position: inside;
	font-size: 1.4em;
	padding-left: 1em;
}

ul.long {
	column-count: 2;
}

ul.very-long {
	column-count: 3;
}

li .marker {
	font-size: 0.7em;
	vertical-align: super;
}

#toc ul {
	list-style-type: "> ";
}

li {
	margin-bottom: var(--list-gap);
	break-inside: avoid;
	
	transform-origin: 5.5em 50%;
}

.explanation {
	font-size: 0.9em;
	margin-bottom: 0.4em;
}

.disambiguation {
	font-size: 0.6666666666666em;	/* very fine */
}

.joke-entry:not([data-visible="true"]) {
	display: none;
}

td.numeric-rating, td.wordy-rating {
	font-family: inherit !important;
}

td.numeric-rating {
	font-size: 2.2em;
}

td.wordy-rating {
	font-size: 1.5em;
}

noscript {
	font-size: 0.6em;
}

.thumb-wrapper {
	display: inline-block;
	width: var(--thumb-size);
	height: var(--thumb-size);
	
	position: relative;
	top: 0px;
	left: 0px;
}

.thumb-wrapper .show-thumb {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.flip-thumb .show-thumb {
	backface-visibility: hidden;
	cursor: pointer;
	
	transition: transform 0.5s linear 0s;
}

[data-side="obverse"] .reverse, [data-side="reverse"] .obverse {
	transform: rotateY(180deg) !important;
}

.choice-thumb .show-thumb:not([data-chosen="true"]) {
	display: none;
}

.choice-thumb[data-default="true"] .show-thumb:first-child {
	display: initial;
}

hr {
	width: 99%;
	margin: 0 auto var(--section-gap);
	height: 3px;
	background-color: var(--pencil-lead);
	border-radius: 3px;
}

a {
	color: inherit !important;
}

.checkbox-container {
	margin-bottom: 1.5em;
	text-indent: 1em;
	font-size: 1.15em;
}

.checkbox-row {
	margin-bottom: 0.3em;
	transform-origin: 6em 50%;
}

[role="checkbox"], label {
	cursor: pointer;
}

label:hover {
	text-decoration: underline;
}

[role="checkbox"] {
	font-family: "Y.OzFont", Quivira, "PragmataPro Liga", "PragmataPro", "Source Serif Pro", Symbola, "Segoe UI Symbol", FreeSerif, Code2000, "Everson Mono", "DejaVu Sans", "Arial Unicode MS", "Source Sans Pro", "Source Code Pro";
}

[role="checkbox"]::before {
	content: "☐";
}

[role="checkbox"][aria-checked="true"]::before {
	content: "☑︎";
}

:focus, :focus-visible {
	outline-color: var(--pencil-lead);
}

.technicality-count {
	font-size: 0.75em;
}

tr.yes-this-is-anime td:nth-child(2), li.yes-this-is-anime {
	cursor: help;
}

.inverted-gravity {
	transform: rotate(180deg);
	display: inline-block;
}

li .inverted-gravity {
	padding-right: 0.2em;
}

.contradiction {
	cursor: crosshair;
}

.contradiction[data-rebutted="true"] {
	cursor: default;
}

.contradiction-fragment {
	white-space: pre-wrap;
	position: relative;
	top: 0px;
	left: 0px;
	transform: none;
	opacity: 1.0;
	
	transition: top var(--speed) var(--timing) 0s, left var(--speed) var(--timing) 0s, transform var(--speed) var(--timing) 0s, opacity calc(0.9 * var(--speed)) var(--timing) calc(0.25 * var(--speed));
	
	--speed: 1s;
	--timing: ease-out;
}

.contradiction[data-rebutted="true"] .contradiction-fragment {
	opacity: 0.0;
	display: inline-block;
}

.hanging {
	display: inline-block;
	transform: translateY(-0.65em) translateX(0.1em) rotate(150deg);
	transform-origin: bottom left;
}

@keyframes active_wiggle {
	0% {
		transform: var(--active-anim-frame1);
	}
	49.999% {
		transform: var(--active-anim-frame1);
	}
	50% {
		transform: var(--active-anim-frame2);
	}
	100% {
		transform: var(--active-anim-frame2);
	}
}

@font-face {
	font-family: "Buff Sloppy Handwriting";
	src: local("Buff Sloppy Handwriting"), url("../../assets/font/buff-sloppy-handwriting/buff-sloppy-handwriting.ttf");
}

@font-face {
	font-family: "Caveat";
	src: local("Caveat Regular"), local("Caveat"), url("../../assets/font/caveat/caveat-regular.ttf");
}

@font-face {
	font-family: "Caveat";
	src: local("Caveat Bold"), local("Caveat"), url("../../assets/font/caveat/caveat-bold.ttf");
	font-weight: bold;
}