:root {
	color-scheme: light;
	
	--font-family-monotalic: "monotalic", sans-serif; /*400,500,700*/
	--font-family-monotalic-narrow: "monotalic-narrow", sans-serif; /*400,700*/
	--font-family-komu-new-f: "komu-new-f", sans-serif; /*400*/

	--color-bg-movie: #5f18e8;
	--color-text-movie: #faa4ff;
	--color-bg-series: #ffed43;
	--color-text-series: #e8862d;
	--color-bg-book: #e57b1c;
	--color-text-book: #f4cda2;
	--color-bg-game: #a0e717;
	--color-text-game: #055b00;
	--color-bg-manga: #ff76d8;
	--color-text-manga: #8e1e4c;
	--color-bg-music: #2727d8;
	--color-text-music: #72cea4;

	--responsive-margin-hero: max(4rem, 8.5vw);
}

.bg-movie { background: var(--color-bg-movie); }				.text-movie { color: var(--color-text-movie); }
.bg-reverse-movie { background: var(--color-text-movie); }		.text-reverse-movie { color: var(--color-bg-movie); }
.bg-series { background: var(--color-bg-series); }				.text-series { color: var(--color-text-series); }
.bg-reverse-series { background: var(--color-text-series); }	.text-reverse-series { color: var(--color-bg-series); }
.bg-book { background: var(--color-bg-book); }					.text-book { color: var(--color-text-book); }
.bg-reverse-book { background: var(--color-text-book); }		.text-reverse-book { color: var(--color-bg-book); }
.bg-game { background: var(--color-bg-game); }					.text-game { color: var(--color-text-game); }
.bg-reverse-game { background: var(--color-text-game); }		.text-reverse-game { color: var(--color-bg-game); }
.bg-manga { background: var(--color-bg-manga); }				.text-manga { color: var(--color-text-manga); }
.bg-reverse-manga { background: var(--color-text-manga); }		.text-reverse-manga { color: var(--color-bg-manga); }
.bg-music { background: var(--color-bg-music); }				.text-music { color: var(--color-text-music); }
.bg-reverse-music { background: var(--color-text-music); }		.text-reverse-music { color: var(--color-bg-music); }

.btn-movie { color: var(--color-text-movie); background-color: var(--color-bg-movie); border-color: var(--color-bg-movie); }
.btn-movie:hover { color: var(--color-text-movie) !important; background-color: color-mix(in srgb, var(--color-bg-movie), black 20%) !important; border-color: color-mix(in srgb, var(--color-bg-movie), black 20%) !important; }
.btn-movie:focus { color: var(--color-text-movie) !important; background-color: color-mix(in srgb, var(--color-bg-movie), black 30%) !important; border-color: color-mix(in srgb, var(--color-bg-movie), black 30%) !important; }
.btn-series { color: var(--color-text-series); background-color: var(--color-bg-series); border-color: var(--color-bg-series); }
.btn-series:hover { color: var(--color-text-series) !important; background-color: color-mix(in srgb, var(--color-bg-series), white 20%) !important; border-color: color-mix(in srgb, var(--color-bg-series), white 20%) !important; }
.btn-series:focus { color: var(--color-text-series) !important; background-color: color-mix(in srgb, var(--color-bg-series), white 30%) !important; border-color: color-mix(in srgb, var(--color-bg-series), white 30%) !important; }
.btn-book { color: var(--color-text-book); background-color: var(--color-bg-book); border-color: var(--color-bg-book); }
.btn-book:hover { color: var(--color-text-book) !important; background-color: color-mix(in srgb, var(--color-bg-book), black 20%) !important; border-color: color-mix(in srgb, var(--color-bg-book), black 20%) !important; }
.btn-book:focus { color: var(--color-text-book) !important; background-color: color-mix(in srgb, var(--color-bg-book), black 30%) !important; border-color: color-mix(in srgb, var(--color-bg-book), black 30%) !important; }
.btn-game { color: var(--color-text-game); background-color: var(--color-bg-game); border-color: var(--color-bg-game); }
.btn-game:hover { color: var(--color-text-game) !important; background-color: color-mix(in srgb, var(--color-bg-game), white 20%) !important; border-color: color-mix(in srgb, var(--color-bg-game), white 20%) !important; }
.btn-game:focus { color: var(--color-text-game) !important; background-color: color-mix(in srgb, var(--color-bg-game), white 30%) !important; border-color: color-mix(in srgb, var(--color-bg-game), white 30%) !important; }
.btn-manga { color: var(--color-text-manga); background-color: var(--color-bg-manga); border-color: var(--color-bg-manga); }
.btn-manga:hover { color: var(--color-text-manga) !important; background-color: color-mix(in srgb, var(--color-bg-manga), white 20%) !important; border-color: color-mix(in srgb, var(--color-bg-manga), white 20%) !important; }
.btn-manga:focus { color: var(--color-text-manga) !important; background-color: color-mix(in srgb, var(--color-bg-manga), white 30%) !important; border-color: color-mix(in srgb, var(--color-bg-manga), white 30%) !important; }
.btn-music { color: var(--color-text-music); background-color: var(--color-bg-music); border-color: var(--color-bg-music); }
.btn-music:hover { color: var(--color-text-music) !important; background-color: color-mix(in srgb, var(--color-bg-music), black 20%) !important; border-color: color-mix(in srgb, var(--color-bg-music), black 20%) !important; }
.btn-music:focus { color: var(--color-text-music) !important; background-color: color-mix(in srgb, var(--color-bg-music), black 30%) !important; border-color: color-mix(in srgb, var(--color-bg-music), black 30%) !important; }

.btn-reverse-movie { color: var(--color-bg-movie); background-color: var(--color-text-movie); border-color: var(--color-text-movie); }
.btn-reverse-movie:hover { color: var(--color-bg-movie) !important; background-color: color-mix(in srgb, var(--color-text-movie), white 20%) !important; border-color: color-mix(in srgb, var(--color-text-movie), white 20%) !important; }
.btn-reverse-movie:focus { color: var(--color-bg-movie) !important; background-color: color-mix(in srgb, var(--color-text-movie), white 30%) !important; border-color: color-mix(in srgb, var(--color-text-movie), white 30%) !important; }
.btn-reverse-series { color: var(--color-bg-series); background-color: var(--color-text-series); border-color: var(--color-text-series); }
.btn-reverse-series:hover { color: var(--color-bg-series) !important; background-color: color-mix(in srgb, var(--color-text-series), black 20%) !important; border-color: color-mix(in srgb, var(--color-text-series), black 20%) !important; }
.btn-reverse-series:focus { color: var(--color-bg-series) !important; background-color: color-mix(in srgb, var(--color-text-series), black 30%) !important; border-color: color-mix(in srgb, var(--color-text-series), black 30%) !important; }
.btn-reverse-book { color: var(--color-bg-book); background-color: var(--color-text-book); border-color: var(--color-text-book); }
.btn-reverse-book:hover { color: var(--color-bg-book) !important; background-color: color-mix(in srgb, var(--color-text-book), white 20%) !important; border-color: color-mix(in srgb, var(--color-text-book), white 20%) !important; }
.btn-reverse-book:focus { color: var(--color-bg-book) !important; background-color: color-mix(in srgb, var(--color-text-book), white 30%) !important; border-color: color-mix(in srgb, var(--color-text-book), white 30%) !important; }
.btn-reverse-game { color: var(--color-bg-game); background-color: var(--color-text-game); border-color: var(--color-text-game); }
.btn-reverse-game:hover { color: var(--color-bg-game) !important; background-color: color-mix(in srgb, var(--color-text-game), black 20%) !important; border-color: color-mix(in srgb, var(--color-text-game), black 20%) !important; }
.btn-reverse-game:focus { color: var(--color-bg-game) !important; background-color: color-mix(in srgb, var(--color-text-game), black 30%) !important; border-color: color-mix(in srgb, var(--color-text-game), black 30%) !important; }
.btn-reverse-manga { color: var(--color-bg-manga); background-color: var(--color-text-manga); border-color: var(--color-text-manga); }
.btn-reverse-manga:hover { color: var(--color-bg-manga) !important; background-color: color-mix(in srgb, var(--color-text-manga), black 20%) !important; border-color: color-mix(in srgb, var(--color-text-manga), black 20%) !important; }
.btn-reverse-manga:focus { color: var(--color-bg-manga) !important; background-color: color-mix(in srgb, var(--color-text-manga), black 30%) !important; border-color: color-mix(in srgb, var(--color-text-manga), black 30%) !important; }
.btn-reverse-music { color: var(--color-bg-music); background-color: var(--color-text-music); border-color: var(--color-text-music); }
.btn-reverse-music:hover { color: var(--color-bg-music) !important; background-color: color-mix(in srgb, var(--color-text-music), white 20%) !important; border-color: color-mix(in srgb, var(--color-text-music), white 20%) !important; }
.btn-reverse-music:focus { color: var(--color-bg-music) !important; background-color: color-mix(in srgb, var(--color-text-music), white 30%) !important; border-color: color-mix(in srgb, var(--color-text-music), white 30%) !important; }

.font-monotalic { font-family: var(--font-family-monotalic); }
.font-monotalic-narrow { font-family: var(--font-family-monotalic-narrow); }
.font-komu-new-f { font-family: var(--font-family-komu-new-f); }

.fs-responsive-2 { font-size: clamp(2rem, 3vw, 4rem); }
.fs-responsive-hero { font-size: max(4rem, 7.9vw); line-height: .85; }

.custom-tooltip-subscribe { --bs-tooltip-bg: var(--color-bg-movie); line-height: 1.2; }
.custom-tooltip-subscribe .tooltip-inner { padding: .75rem; text-align: left; width: 250px; max-width: none; }
.custom-tooltip-subscribe .tooltip-inner ul { padding: .5rem 0 0 .75rem; }

.contentBasic { }
.contentBasic .contentBasicImg { aspect-ratio: 3/4; width: 10%; transition: all .4s; }
.contentBasic .contentBasicContentCtr { width: 90%; transition: all .4s; cursor: pointer; }
.contentBasic .contentBasicMoreCtr { display: none; }
.contentBasic .changePictureBtn { opacity: 0; transition: all .4s; }

.contentBasic.open {  }
.contentBasic.open .contentBasicImg { width: 15%; }
.contentBasic.open .contentBasicContentCtr { width: 85%; }
.contentBasic.open .changePictureBtn { opacity: 1; }

.liztBasic { }
.liztBasic .liztBasicImg { aspect-ratio: 3/4; width: min(10%, 70px); transition: all .4s; }


.drop-zone { border: 2px dashed #ccc !important; transition: all 0.3s; cursor: pointer; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #666; background-color: #f8f9fa; }

.scrolling-text-container { width: 100%; overflow: hidden; white-space: nowrap; container-type: inline-size; }
.scrolling-text-wrapper { display: flex; }
.scrolling-text { display: flex; white-space: nowrap; align-items: center; }

/*****************************************************/

.appearOnScroll { transition-delay: 300ms; }
.appearOnScroll { opacity: 0; transition: all .4s; }
.appearOnScroll.appearOnScroll-visible { opacity: 1; }

.appearOnScroll.aosTranslateShow { transform: scale(.9) translateY(2rem); }
.appearOnScroll.aosTranslateShow.appearOnScroll-visible { transform: scale(1) translateY(0); }

.appearOnScroll.aosTranslateHide { transform: scale(.9) translateY(0rem); }
.appearOnScroll.aosTranslateHide.appearOnScroll-visible { transform: scale(1) translateY(-2rem); }

/*****************************************************/

.move-handle { cursor: grab; }
.delete-handle { cursor: pointer; }
.drag-ghost { opacity: 0.4; }
.drag-chosen { background: #f8f9fa; }
.drag-dragging { cursor: grabbing; }

.repeaterLine:first-child .delete-handle { display: none !important; }

/*****************************************************/

body { font-family: var(--font-family-monotalic-narrow); font-weight: 400; font-style: normal; }
#mainContainer { min-height: 100%; }


/*****************************************************/