/*
 * Global
 *
 * Global styles
 *
 */

:root {
	color-scheme: light dark;

	--light-bg: #ffffff;
	--light-color: #000000;

	--dark-bg: #000000;
	--dark-color: #ffffff;
}

@font-face {
	font-family: "Hatena";
	src:
		local("Hatena"), url("../../fonts/fh.otf") format("opentype");
}

* {
	font-family: "Hatena";
	color: light-dark(var(--light-color), var(--dark-color));
	font-size: 32px;
	box-sizing: border-box;
}


/*
 * Base
 *
 * Styles of fundamental CSS elements
 *
 */

h2 {
	width: 100%;
}

p {
	line-height: 32px;
}

input, textarea, button, select, option, #upload-quickly-label, #upload-label, .label {
	background-color: light-dark(var(--light-bg), var(--dark-bg));
	border: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	margin-top: 12px;
	padding: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
}

select {
	min-width: 128px;
}

option {
	color: light-dark(var(--light-color), var(--dark-color));
}

body, html {
	background-color: light-dark(var(--light-bg), var(--dark-bg));
	color: light-dark(var(--light-color), var(--dark-color));
	margin: 0;
	padding: 0;
}

footer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	position: absolute;
	padding-top: 16px;
	padding-bottom: 12px;
}

header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

nav {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	margin-bottom: 8px;
	margin-top: 16px;
}

nav a, nav a button, nav button, #start-here, #bookmarks p a {
	text-decoration: none;
	margin-left: 8px;
	margin-right: 8px;
}

.scroll-navigation {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-bottom: 12px;
}

.scroll-navigation button {
	width: 45%;
}

#main-navigation a, #start-here {
	padding-top: 4px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 10px;
	border: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	animation: border-reversed 300ms;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

#main-navigation a:hover, #start-here:hover {
	padding-bottom: 8px;
	animation: border-animation 300ms;
	animation-direction: normal;
	animation-fill-mode: forwards;
	/*border-bottom: solid light-dark(var(--light-color), var(--dark-color)); 2px;*/
}

#main-navigation {
	width: 50%;
	border-bottom: solid light-dark(var(--light-color), var(--dark-color)) 2px;
}

#burger {
	display: none;
	width: 32px;
	height: 32px;
	position: absolute;
	right: 0;
	background-image: url('/data/burger.png');
}

button, #upload-quickly-label, #upload-label, .label {
	color: light-dark(var(--light-color), var(--dark-color));
	border: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	animation: button-reversed 300ms;
	animation-direction: normal;
	animation-fill-mode: backwards;
}

button:hover, #upload-quickly-label:hover, #upload-label:hover, .label:hover {
	cursor: pointer;
	color: light-dark(var(--light-bg), var(--dark-bg));
	animation: button-animation 300ms;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

/*
 * Interactive
 *
 * Styles of interactive elements
 *
 */

#notifications-wrapper {
	width: fit-content;
	justify-content: center;
	position: fixed;
	bottom: 0;
	right: 0;
	padding-bottom: 16px;
	padding-right: 16px
}

.notification {
	width: fit-content;
	border: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	background-color: light-dark(var(--light-bg), var(--dark-bg));
	margin-top: 8px;
	padding: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	transition: 1000ms;
}

.vanishing {
	filter: opacity(0);
}

.disabled {
	opacity: 0.2;
}

.disabled:hover {
	cursor: default;
}

#bookmark-icon {
	height: 24px;
	margin-top: 12px;
}

/*
 * Main page
 *
 * Styles of elements present on the main page and "page" subpage
 *
 */

#cover-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}

#cover-description {
	width: 30%;
	margin-left: 5%;
	margin-right: 5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height: fit-content;
}

#cover-description h2 {
	text-align: center;
	height: fit-content;
}

#cover-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
}

#cover-container img {
	width: 80%;
}

#empty {
	width: 100%;
	height: 24px;
}

#start-here {
	width: fit-content;
	padding-bottom: 8px;
}

#bookmarks, #recent-pages {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 24px;
	padding-right: 24px;
}

#bookmarks p, #recent-pages p {
	width: 100%;
	padding-bottom: 6px;
	margin-bottom: 16px;
	margin-top: 16px;
	border-bottom: solid light-dark(var(--light-color), var(--dark-color)) 2px;
}

#bookmarks p a {
	position: absolute;
	right: 24px;
}

#bookmarks p a:hover {
	border-bottom: solid light-dark(var(--light-color), var(--dark-color)) 2px;
}

#main-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	width: 960px;
}

#popup-wrapper {
	display: none;
	position: fixed;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
}

#popup {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: light-dark(var(--light-bg), var(--dark-bg));
}

#popup div {
	text-align: center;
	width: 100%;
}

#popup img {
	max-height: 500px;
}

#page-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	width: 960px;
}

#page-number {
	width: 100%;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 8px;
}

#page-wrapper img {
	max-width: 960px;
}

#content-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#page-navigation button {
	width: 23%;
	margin-bottom: 12px;
}

#note-wrapper {
	visibility: hidden;
	width: 100%;
}

#pre-note {
	width: fit-content;
	padding: 8px;
	border-top: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	border-left: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	border-right: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	margin-bottom: -2px;
}

#note {
	padding: 8px;
	border: solid light-dark(var(--light-color), var(--dark-color)) 2px;
}

.invisible-button {
	position: relative;
	height: 728px;
	width: 256px;
	display: block;
	color: light-dark(var(--light-bg), var(--dark-bg));
	text-align: center;
	transition: 300ms;
}

.invisible-button:hover {
	color: light-dark(var(--light-color), var(--dark-color));
}


/*
 * Various
 *
 * Other styles
 *
 */

#panel p {
	font-size: 32px;
	width: 100%;
	text-align: center;
}

#panel navbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#panel navbar a {
	width: 100%;
	margin-bottom: 12px;
}

#overlay {
	visibility: hidden;
	background-color: rgba(0,0,0,0.1);
	width: 100%;
	height: 100%;
	position: fixed;
	margin: 0;
	top: 0;
	left: 0;
	border: none;
	z-index: 999;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	flex-direction: row-reverse;
	width: 100%;
}

.navigation-wrapper {
	margin-bottom: 24px;
	margin-left: 24px;
}

.editor-wrapper {
	visibility: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

.editor {
	display: flex;
	position: fixed;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: 80vh;
	margin-left: 10%;
	margin-right: 10%;
	padding: 24px;
	background-color: light-dark(var(--light-bg), var(--dark-bg));
	box-shadow: 5px 5px rgba(0,0,0,0.4);
	z-index: 1000;
	border: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	overflow-y: scroll;
}

.section h2, .section p, .section label, .section button {
	margin-bottom: 12px;
	margin-left: 24px;
}

#page, #image-wrapper, #folder, #folder-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#image-wrapper {
	max-width: 80%;
}

#page, #folder {
	width: 100%;
}

#image-wrapper img, #folder-wrapper img {
	width: 80%;
	max-height: 800px;
}

#previous, #next {
	width: 64px !important;
	height: 32px !important;
	image-rendering: pixelated;
}

#previous:hover, #next:hover {
	cursor: pointer;
}

.info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.basic-info, .note-info, .date-info {
	margin-right: 32px;
}

.file-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.file-info button, .file-info label {
	width: 100%;
	display: block;
	text-align: center;
}

#upload-quickly, #upload, #ex-upload, #reupload {
	visibility: hidden;
	width: 0;
	height: 0;
	position: absolute;
}

/*#image-editor div input {
	margin-top: 0;
}*/

.container div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 18%;
	margin-bottom: 12px;
}

.container div img, .container div div {
	margin-top: 12px;
	max-height: 240px;
	transition: 300ms;
}

.container div div {
	width: 100%;
}

.container div img {
	border: solid 1px light-dark(var(--light-bg), var(--dark-bg));
}

.container div img:hover {
	cursor: pointer;
	filter: invert(0.2);
	border: solid light-dark(var(--light-color), var(--dark-color)) 1px;
	animation-duration: 300ms;
}

.ql-container {
	margin-bottom: 12px !important;
}

.editor-container {
	width: 60%;
	margin: auto;
}

.save {
	margin-bottom: 32px;
}

#about, #settings, #characters {
	display: flex;
	flex-wrap: wrap;
	width: 60%;
	margin: auto;
}

#settings {
	text-align: center;
	justify-content: center;
	margin-bottom: 64px;
}

.setting {
	width: 100%;
	margin-bottom: 32px;
}

#characters {
	width: 80%;
}

#about h2, #settings h2, #characters h2 {
	font-size: 48px;
	text-align: center;
}

#about h2 {
	margin-bottom: 16px;
}

#characters h2 {
	margin-bottom 32px;
}

#characters-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.character {
	max-width: 384px;
	margin-bottom: 32px;
	margin-left: 2px;
	margin-right: 2px;
}

.character a {
	display: block;
}

.character a img {
	object-fit: cover;
	width: 100%;
	transition: 300ms;
}

.character a img:hover {
	filter: invert(0.2);
}

.name {
	margin-top: 12px;
	text-align: center;
	width: 100%;
}

.ql-editor p {
	margin-bottom: 32px !important;
}

.spoiler-overlay {
	position: absolute;
	height: 100%;
	display: flex;
	align-content: center;
	justify-content: center;
	color: rgba(0,0,0,0.8);
	z-index: 1;
	font-size: 64px;
	cursor: pointer;
}

.spoiler {
	filter: blur(8px);
}

/*
 * Animations
 *
 * Various animations
 *
 */

@keyframes border-animation {
	0% {
		border-top: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-left: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-right: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	}

	33% {
		border-top: solid light-dark(var(--light-color), var(--dark-color)) 2px;
		border-left: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-right: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	}

	66% {
		border-left: solid light-dark(var(--light-color), var(--dark-color)) 2px;
		border-right: solid light-dark(var(--light-color), var(--dark-color)) 2px;
		border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	}

	100% {
		border-bottom: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	}
}

@keyframes border-reversed {
	0% {
		border-bottom: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	}

	32% {
		border-bottom: solid light-dark(var(--light-color), var(--dark-color)) 2px;
	}

	33% {
		border-left: solid light-dark(var(--light-color), var(--dark-color)) 2px;
		border-right: solid light-dark(var(--light-color), var(--dark-color)) 2px;
		border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	}

	66% {
		border-top: solid light-dark(var(--light-color), var(--dark-color)) 2px;
		border-left: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-right: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	}

	100% {
		border-top: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-left: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-right: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
		border-bottom: solid light-dark(var(--light-bg), var(--dark-bg)) 2px;
	}
}

@keyframes button-animation {
	0% {
		background-image: url('/data/dithering_1.png');
	}

	25% {
		background-image: url('/data/dithering_2.png');
	}

	50% {
		background-image: url('/data/dithering_3.png');
		color: light-dark(var(--light-bg), var(--dark-bg));
	}

	75% {
		background-image: url('/data/dithering_4.png');
		color: light-dark(var(--light-bg), var(--dark-bg));
	}

	100% {
		background-image: url('/data/dithering_5.png');
		color: light-dark(var(--light-bg), var(--dark-bg));
	}
}

@keyframes button-reversed {
	0% {
		background-image: url('/data/dithering_5.png');
		color: light-dark(var(--light-bg), var(--dark-bg));
	}

	25% {
		background-image: url('/data/dithering_4.png');
		color: light-dark(var(--light-bg), var(--dark-bg));
	}

	50% {
		background-image: url('/data/dithering_3.png');
		color: light-dark(var(--light-bg), var(--dark-bg));
	}

	75% {
		background-image: url('/data/dithering_2.png');
	}

	99% {
		background-image: url('/data/dithering_1.png');
	}

	100% {
		background-image: unset;
	}
}

/*
 * Dark mode
 *
 * Additional changes for the dark mode
 *
 */

@media (prefers-color-scheme: dark) {
	#previous, #next {
		filter: invert(1);
	}

	#burger {
		background-image: url('/data/burger_rev.png');
	}

	@keyframes button-animation {
		0% {
			background-image: url('/data/dithering_1_rev.png');
		}

		25% {
			background-image: url('/data/dithering_2_rev.png');
		}

		50% {
			background-image: url('/data/dithering_3_rev.png');
		}

		75% {
			background-image: url('/data/dithering_4_rev.png');
		}

		100% {
			background-image: url('/data/dithering_5_rev.png');
		}
	}

	@keyframes button-reversed {
		0% {
			background-image: url('/data/dithering_5_rev.png');
		}

		25% {
			background-image: url('/data/dithering_4_rev.png');
		}

		50% {
			background-image: url('/data/dithering_3_rev.png');
		}

		75% {
			background-image: url('/data/dithering_2_rev.png');
		}

		99% {
			background-image: url('/data/dithering_1_rev.png');
		}

		100% {
			background-image: unset;
		}
	}
}

/* 1920x1080 */

/* 320x568 */

@media screen and (min-width: 320px) and (max-width: 1365px) {
	header {
		position: fixed;
		width: 100%;
		background-color: light-dark(var(--light-bg), var(--dark-bg));
		border-bottom: unset;
		z-index: 1001;
		top: 0;
	}

	#about, #settings, #characters {
		width: 80%;
	}

	#main-navigation {
		display: none;
		margin-top: 12px;
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		border-bottom: unset;
	}

	#main-navigation a {
		width: 100%;
		text-align: center;
	}

	#burger {
		display: unset;
		margin-top: 8px;
		margin-right: 8px;
		opacity: 0.6;
	}

	.navigation-wrapper {
		width: 100%;
		text-align: center;
		margin: unset;
		margin-top: 24px;
		margin-bottom: 12px;
	}

	.container div {
		width: unset;
		max-width: 90%;
	}

	.container div img {
		width: 100%;
	}

	/* Main page */

	#cover-description {
		width: 90%;
		margin-left: unset;
		margin-right: unset;
	}

	#cover-description h2 {
		margin-bottom: unset;
	}

	#cover-description p {
		text-align: center;
	}

	#cover-container img {
		width: 100%;
	}

	#bookmarks, #recent-pages {
		padding-left: 16px;
		padding-right: 16px;
	}

	.container {
		justify-content: space-evenly;
	}

	#bookmarks-container div, #recent-container div {
		max-width: 100%;
	}

	/* Pages */

	#popup {
		padding-top: 8px;
		padding-bottom: 16px;
	}

	#popup div {
		margin: 16px;
		margin-left: 12px;
		margin-right: 12px;
	}

	#popup button {
		margin-left: 4px;
		margin-right: 4px;
	}

	/*#page-wrapper #main-wrapper, #main-page, .page{
		width: 98%;
	}*/

	#main-wrapper {
		width: 96%;
	}

	#page-wrapper, #page-wrapper img {
		width: 98%;
	}

	#page-wrapper img {
		min-height: 220px;
	}

	#content-wrapper {
		width: 96%;
	}

	#page-navigation {
		justify-content: space-between;
	}

	#page-navigation button {
		width: 48%;
		margin-left: unset;
		margin-right: unset;
	}

	#page-number {
		margin-top: 16px;
		margin-bottom: 16px;
	}

	#bookmark {
		width: 92% !important;
	}

	.basic-info, .note-info, .date-info {
		margin-right: unset;
		width: 45%;
	}

	.info {
		justify-content: space-between;
	}

	#note {
		width: 100%;
	}

	#title {
		width: 100%;
	}
}

/* 360x800 */

@media screen and (min-width: 360px) and (max-width: 1365px) {
	#burger {
		padding-top: 10px;
		padding-right: 10px;
	}
}

/* 390x844 */

@media screen and (min-width: 390px) and (max-width: 1365px) {
	#burger {
		padding-top: 12px;
		padding-right: 12px;
	}
}

/* pre-768 */

@media screen and (min-width: 620px) and (max-width: 1365px) {
	#bookmark {
		width: 94% !important;
	}
}

@media screen and (min-width: 712px) and (max-width: 1365px) {
	#burger {
		padding-top: 16px;
		padding-right: 16px;
	}

	#bookmarks-container div, #recent-container div, .container div {
		max-width: 320px;
	}

	#bookmarks-container div div, #recent-container div div {
		max-width: 100%;
	}

	.container div div {
		max-width: 100%;
	}

	#bookmark {
		width: 96% !important;
	}
}

/* 768x1024 */

/* 834x1112 */

/* 1024x768 */

@media screen and (min-width: 1024px) and (max-width: 1365px) {
	#cover-container a {
		font-size: 64px;
	}

	#cover-container img {
		width: 90%;
	}
}

/* 1280x720 */

@media screen and (min-width: 1280px) and (max-width: 1365px) {
	#cover-container img {
		width: 80%;
	}
}

/* 1366x768 */

@media screen and (min-width: 1366px) {
	#cover-description h2 {
		font-size: 64px;
		margin-bottom: 12px;
	}

	#cover-container {
		width: 50%;
	}

	#empty {
		width: 100%;
	}

	.container div {
		width: 329px;
	}

	.container img {
		max-width: 100%;
	}

	.container {
		justify-content: space-evenly;
	}
}

@media screen and (min-width: 1367px) {
	.container div {
		width: 330px;
	}
}

/* 1920x1080 */

/* 2560x1440 */

/* 3840x2160 */