/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* ICON */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* CSS VARIABLE */
:root {
	/* COLOR */
	--bg: #fef2f3;
	/* --bg: #fdf7f7; */
	--pr-color: #f9858b;
	--sc-color: #ed335f;
	/* --pr-color: #d9393d; */
	--txt-color: #761135;
	/* --txt-color: #0c0202; */
	--transp: #0c02022e;
	--gradient: linear-gradient(135deg, var(--pr-color), var(--sc-color));
	/* FONT */
	--pr-font: "Roboto", sans-serif;
	--sc-font: "Bebas Neue", sans-serif;

	/* MARGIN & PADDING */
	--mp-0: 0.25rem;
	--mp-1: 0.5rem;
	--mp-2: 0.75rem;
	--mp-3: 1rem;
	--mp-4: 2rem;

	/* UTILS */
	--shadow: 1px 1px 4px var(--transp);
	--dop-shadow: drop-shadow(1px 1px 1px var(--transp));
	--transition: all 250ms ease;
}

.dark {
	--bg: #2b2b2b;
	--txt-color: #fdf2f2;
	--transp: #fdf2f234;
}
/* RE-USEABLE CLASS */
.flex {
	display: flex;
	align-items: center;
	gap: var(--mp-0);
}

.jcc {
	justify-content: center;
}

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

.grid {
	display: grid;
	align-content: start;
	gap: var(--mp-1);
}

.resp_layout {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

/* DEFAULT FORMATER STYLE */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
	transition: var(--transition);
	/* scrollbar-width: none; */
}

::-webkit-scrollbar {
	width: 3px;
	background: var(--pr-color);
}

::-webkit-scrollbar-thumb {
	background: var(--sc-color);
	border-radius: 1rem;
}

.search_cont ::-webkit-scrollbar,
.single_manga_cont ::-webkit-scrollbar {
	width: 0px;
}

img {
	max-width: 100%;
}

button,
input {
	border: none;
	outline: none;
}

/* GENERAL STYLE */
body {
	display: grid;
	font-family: var(--pr-font);
	color: var(--txt-color);
	width: min(1440px, 100%);
	background: var(--bg);
	margin: auto;
}

header {
	position: sticky;
	top: 0;
	background: var(--bg);
	padding: var(--mp-3) var(--mp-4);
	box-shadow: var(--shadow);
	z-index: 2;

	a {
		color: var(--txt-color);
	}
}

.site_logo {
	font-family: var(--sc-font);
	font-size: 1.5rem;
	color: transparent;
	background-clip: text;
	background: var(--gradient);
	-webkit-background-clip: text;
}

.app_body {
	padding: var(--mp-3) var(--mp-4);
	/* min-height: 87vh; */
}

.search_cont,
.single_manga_cont,
.read_cont {
	position: fixed;
	width: min(1440px, 100%);
	height: 0;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bg);
	transform-origin: top;
	z-index: 99;
	scrollbar-width: none;
	overflow: hidden;
}

.single_manga_cont {
	overflow: auto;
}

.search_cont.active,
.single_manga_cont.active,
.read_cont.active {
	padding: var(--mp-3) var(--mp-4);
	height: 100vh;
}

.utils > div,
.back_search_btn,
.close_btn,
.read_back {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fdf7f7;
	background: var(--gradient);
	filter: drop-shadow(1px 1px 1px #00000049);
	cursor: pointer;
	z-index: 1;
	overflow: hidden;
}

.utils > div:hover,
.back_search_btn:hover,
.close_btn:hover,
.read_back:hover {
	color: var(--pr-color);
	background: var(--bg);
	border: 1px solid var(--pr-color);
}

.mode.active .mode_icon {
	transform: translateX(calc(-100% - var(--mp-0)));
}

.mode_icon {
	min-width: 100%;
	height: 100%;
	flex-basis: 100%;
	pointer-events: none;
	z-index: 0;
}

.search_input {
	width: min(250px, 100%);
	border-radius: var(--mp-1);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.search_input input {
	flex-basis: 100%;
	padding: var(--mp-1);
}

.search_input button {
	color: var(--bg);
	height: 100%;
	padding: var(--mp-1);
	background: var(--gradient);
	cursor: pointer;
}

.result_query {
	display: flex;
	margin: 3rem 0 1rem;
}

.rs {
	margin-left: var(--mp-0);
	color: var(--pr-color);
	text-decoration: underline;
	text-transform: capitalize;
}

.search_body {
	overflow-y: auto;
	height: 79vh;
}

.manga_card {
	position: relative;
	height: 238px;
	border-radius: var(--mp-1);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.manga_card:hover {
	border: 1px solid var(--pr-color);
	transform-origin: top;
	filter: drop-shadow(5px 5px 0px #00000049);
	transform: skewY(-3deg) translateY(3px);
}

.manga_card:hover .manga_cover {
	transform: scale(1.2);
}

.manga_card:hover .manga_det_bottom {
	transform-origin: bottom;
	height: 100%;
}

.manga_card:hover .manga_name {
	display: none;
}

.manga_det_head {
	padding: var(--mp-0) var(--mp-1);
}

.manga_det_head > span {
	text-transform: capitalize;
	font-weight: 600;
	font-size: 10px;
	background: var(--gradient);
	border-radius: var(--mp-1);
	padding: var(--mp-0);
	color: #fdf7f7;
}

.manga_det_bottom {
	position: absolute;
	padding: var(--mp-1);
	width: 100%;
	height: 60px;
	bottom: 0;
	background: #0101019d;
	backdrop-filter: blur(5px);
	pointer-events: none;
}

.read_manga_logo i {
	display: none;
	font-size: 35px;
	color: var(--pr-color);
}

.manga_card:hover .read_manga_logo i {
	display: initial;
}

.manga_cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.manga_name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-align: justify;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
	color: #fef2f3;
	font-size: 18px;
}

.ct {
	gap: var(--mp-1);
}

.manga_card_single {
	position: relative;
	width: min(220px, 100%);
	height: 250px;
	border-radius: var(--mp-1);
	overflow: hidden;
}

.manga_det_single {
	align-self: start;
}

.manga_det_single .name {
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 600;
	text-align: justify;
	word-break: break-all;
	word-wrap: break-word;
}

.statistic {
	align-items: flex-start;
	margin: var(--mp-1) 0;
	gap: var(--mp-3);
}

.genres {
	flex-wrap: wrap;
	color: #fdf2f2;
}

.genre {
	padding: var(--mp-0);
	border-radius: var(--mp-1);
	background: var(--gradient);
	text-transform: capitalize;
	cursor: pointer;
}

.summary_head,
.chapter_count {
	margin: var(--mp-2) 0;
	font-weight: 600;
}

.more_btn {
	cursor: pointer;
	color: var(--pr-color);
}

.summary_body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-align: justify;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}

.summary_body.active {
	display: grid;
}

.chapter_count {
	margin: 0;
}

.single_manga_body,
.chapter_body {
	/* overflow: auto; */
	height: 100%;
}

.read_head {
	padding: var(--mp-2) 0;
	text-transform: capitalize;
}

.read_body {
	display: grid;
	position: relative;
	height: 80vh;
	overflow: auto;
}

.read_body img {
	width: 100%;
}

.read_foot {
	padding: var(--mp-2) 0;
}

.read_foot > div {
	color: #fef2f3;
	padding: var(--mp-1);
	border-radius: var(--mp-1);
	background: var(--gradient);
}

#chapter_val {
	width: 50px;
	font-size: 18px;
	text-align: center;
}

iframe {
	border: none;
	background: var(--gradient);
	width: 100%;
	height: 36vmax;
	border-radius: var(--mp-1);
	overflow: hidden;
}

footer {
	flex-direction: column;
	padding: var(--mp-3);
}

.loader {
	width: 50px;
	aspect-ratio: 1;
	--_c: no-repeat linear-gradient(var(--pr-color) 0 0) 50%;
	background: var(--_c) / 100% 50%, var(--_c) / 50% 100%;
	border-radius: 50%;
	animation: l29 2s infinite linear;
}

.abs {
	position: absolute;
	left: 50%;
	top: 50%;
}

@keyframes l29 {
	100% {
		transform: rotate(1turn);
	}
}
/* RESPONSIVE PART */

@media screen and (max-width: 600px) {
	:root {
		--mp-4: var(--mp-2);
	}

	.resp_layout {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}
}

@media screen and (max-width: 375px) {
	.ct {
		display: grid;
	}

	.manga_card_single {
		width: min(100%);
	}
}