/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

.dimmed {
	display: inline-block;
	position: relative;
  }
  .dimmed:after {
	content: " ";
	z-index: 10;
	display: block;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.3);
  }
  .dimmed img {
	display: block;
  }

.vhs {
	margin-bottom: 80px;
	margin-right: 219px;
}

.scene {
	/* border: 1px solid #CCC; */
	/* margin: 40px 0; */
	position: absolute;
	/* width: 210px;
	height: 140px; */
	width: 480px;
	height: 296px;
	/* margin: 80px auto; */
	perspective: 100000px;
	overflow: hidden;
	margin-top: 15px;
	margin-left: 79px;
}

.carousel {
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translateZ(-288px);
	transform-style: preserve-3d;
	transition: transform 3s;
}

.carousel__cell {
	position: absolute;
	width: 480px;
	height: 296px;
	/* left: 10px; */
	/* top: 10px; */
	/* border: 2px solid black; */
	line-height: 116px;
	font-size: 80px;
	font-weight: bold;
	color: white;
	text-align: center;
	transition: transform 1s, opacity 1s;
}

.carousel__cell:nth-child(9n+1) {
	/* background: hsla(0, 100%, 50%, 0.8); */
	background: rgb(0, 0, 0);
	opacity: 0;
}

.carousel__cell:nth-child(9n+2) {
	/* background: hsla(40, 100%, 50%, 0.8); */
	/* background-image: url("/img/scenes/pere2.png"); */
	opacity: 0;
}

.carousel__cell:nth-child(9n+3) {
	/* background: hsla(80, 100%, 50%, 0.8); */
	/* background-image: url("/img/scenes/station.png"); */
}

.carousel__cell:nth-child(9n+4) {
	
}

.carousel__cell:nth-child(9n+5) {
	background: hsla(160, 100%, 50%, 0.8);
	opacity: 0;
	/* background-image: url("/img/scenes/pere.png"); */
}

.carousel__cell:nth-child(9n+6) {
	background: hsla(200, 100%, 50%, 0.8);
	opacity: 0;
}

.carousel__cell:nth-child(9n+7) {
	background: hsla(240, 100%, 50%, 0.8);
}

.carousel__cell:nth-child(9n+8) {
	background: hsla(280, 100%, 50%, 0.8);
}

.carousel__cell:nth-child(9n+0) {
	background: hsla(320, 100%, 50%, 0.8);
}

.carousel__cell:nth-child(1) {
	transform: rotateY(0deg) translateZ(288px);
}

.carousel__cell:nth-child(2) {
	transform: rotateY(40deg) translateZ(288px);
}

.carousel__cell:nth-child(3) {
	transform: rotateY(80deg) translateZ(288px);
}

.carousel__cell:nth-child(4) {
	transform: rotateY(120deg) translateZ(288px);
}

.carousel__cell:nth-child(5) {
	transform: rotateY(160deg) translateZ(288px);
}

.carousel__cell:nth-child(6) {
	transform: rotateY(200deg) translateZ(288px);
}

.carousel__cell:nth-child(7) {
	transform: rotateY(240deg) translateZ(288px);
}

.carousel__cell:nth-child(8) {
	transform: rotateY(280deg) translateZ(288px);
}

.carousel__cell:nth-child(9) {
	transform: rotateY(320deg) translateZ(288px);
}

.carousel-options {
	text-align: center;
	position: relative;
	z-index: 2;
	background: hsla(0, 0%, 100%, 0.8);
}

/**
 * ===========================
 * General Styling
 * ===========================
**/

[data-ui="frame"] {
	margin-top: 15px;
	margin-left: 79px;
	position: absolute;
	perspective: 400px;
	z-index: 2;
	perspective-origin: center center;
	width: 480px;
	height: 296px;
	top: 0;
	left: 0;
	/* overflow: hidden; */
}

#cube {
	/* display: none; */
}

.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 296px;
	height: 296px;
	transform-style: preserve-3d;
	animation: rotate 60s infinite alternate;
}

.side {
	position: absolute;
	width: 260px;
	height: 260px;
	/* overflow: hidden; */
	background-size: contain;
	background-position: center center;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.back {
	transform: translateZ(-130px);
	/* background-image: url("/img/3.png"); */
}

@keyframes rotate {
	10% {
		transform: rotateX(3deg) rotateY(2deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(-3deg) rotateY(0deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(3deg) rotateY(2deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(-3deg) rotateY(-3deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(3deg) rotateY(1deg) rotateZ(-1deg);
	}
	95% {
		transform: rotateX(-3deg) rotateY(-3deg) rotateZ(-3deg);
	}
	100% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
}

@keyframes rotate2 {
	10% {
		transform: rotateX(3deg) rotateY(92deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(-3deg) rotateY(90deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(3deg) rotateY(92deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(-3deg) rotateY(87deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(3deg) rotateY(91deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(-3deg) rotateY(87deg) rotateZ(-3deg);
	}
}

@keyframes rotate3 {
	/* 10% {
		transform: rotateX(3deg) rotateY(182deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(-3deg) rotateY(180deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(3deg) rotateY(182deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(-3deg) rotateY(177deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(3deg) rotateY(181deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(-3deg) rotateY(177deg) rotateZ(-3deg);
	}  */
	10% {
		transform: rotateX(3deg) rotateY(92deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(-3deg) rotateY(90deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(3deg) rotateY(92deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(-3deg) rotateY(87deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(3deg) rotateY(91deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(-3deg) rotateY(87deg) rotateZ(-3deg);
	}
}

@keyframes rotate4 {
	10% {
		transform: rotateX(3deg) rotateY(272deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(-3deg) rotateY(270deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(3deg) rotateY(272deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(-3deg) rotateY(267deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(3deg) rotateY(271deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(-3deg) rotateY(267deg) rotateZ(-3deg);
	}
}

@keyframes rotate5 {
	10% {
		transform: rotateX(93deg) rotateY(2deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(87deg) rotateY(0deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(93deg) rotateY(2deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(87deg) rotateY(-3deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(93deg) rotateY(1deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(87deg) rotateY(-3deg) rotateZ(-3deg);
	}
}

@keyframes rotate6 {
	10% {
		transform: rotateX(-87deg) rotateY(2deg) rotateZ(1deg);
	}
	30% {
		transform: rotateX(-93deg) rotateY(0deg) rotateZ(-3deg);
	}
	40% {
		transform: rotateX(-87deg) rotateY(2deg) rotateZ(-3deg);
	}
	60% {
		transform: rotateX(-93deg) rotateY(-3deg) rotateZ(1deg);
	}
	80% {
		transform: rotateX(-87deg) rotateY(1deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(-93deg) rotateY(-3deg) rotateZ(-3deg);
	}
}

@font-face {
	font-family: 'terminus';
	src: URL('../fonts/terminus.ttf') format('truetype');
}

/* General Style */

body {
	font-family: 'terminus';
	font-size: 16px;
	/* background-color: black; */
}

/* Simple Button styles*/

button {}

/* Simple Button Style on Hover */

button:hover {}

.svg {
	background-size: contain;
}

/* General Styling for Menu Screens */

[data-menu] {
	background: rgba(0, 0, 0, 0) url("../img/ui/menu.png") no-repeat scroll center center / cover;
	/* margin-top: 150px; */
}

[data-ui="inner-menu"] {
	/* position: relative; */
	margin-top: 150px;
}

[data-string="Start"] {
	position: absolute;
	/* padding-top: 150px; */
	/* transform: translate(0, -50%) */
}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */

[data-menu="main"] {
	font-family:
}

/* Main Menu Buttons Styling */

[data-menu="main"] button {}

[data-component="modal"] {
	overflow-y: hidden;
}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

[data-ui="message-content"] {
	text-align: center;
	/* max-width: 100%; */
	font-size: 23px;
	padding: 0;
}

[data-ui="messages"] div {
	width: auto;
	padding: 0;
}

/* Slots Style */

[data-ui="slots"] figure {}

/* Slot's Image Style */

[data-ui="slots"] img {}

/* Slots Title Style */

[data-ui="slots"] figcaption {}

/* Slots Delete Button Style */

[data-ui="slots"] button {}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/
[data-component="video"] {
	height: auto;
	margin: 0 auto;
	z-index: 15;
	top: 164px;
}
#frame {
	position: relative;
	background-color: black;
	/* width: 640px;
	height: 400px; */
	/* padding-top: 15px;
	padding-left: 79px; */
	/* background: rgb(0, 0, 0) url("../img/ui/frame.png") no-repeat fixed center center / auto; */
	/* background-attachment: local; */
}
:root {
	--visi: block;
  }
#frame::before {
	background: rgb(0, 0, 0) url("../img/ui/frame.png") no-repeat center center;
	background-size: cover;
    content: ' ';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
	z-index: -1;
	display: var(--visi);
}

/* Choice Buttons style */

[data-ui="choices"] button {}

[data-ui="background"] {
	/* display: none; */
	/* background-size: contain; */
	margin-top: 15px;
	margin-left: 79px;
	/* perspective: 400px;
	perspective-origin: center center; */
}

/* Choice Button Style on Hover */

[data-ui="choices"] button:hover {}

/* Text Box styling */

[data-ui="text"] {
	background-color: rgba(0, 0, 0, 0);
	min-height: 72px;
	max-height: 72px;
	overflow-y: auto;
	width: 80%;
	z-index: 10;
	text-align: left;
	position: absolute;
	bottom: 6px;
	color: rgb(255, 255, 255);
}

[data-ui="text"] p {
	padding: 0;
}

[data-ui="textframe"] {}

[data-ui="player"] {
	max-height: 400px;
	max-width: 640px;
	z-index: 2;
}

/* Character Name Style */

[data-ui="who"] {
	display: block;
	width: 100%;
	padding: 0;
	padding-top: 5px;
	margin: 0;
	line-height: 1;
}

[data-ui="say"] {
	padding: 0;
	line-height: 1;
}

/* Style for Centered Text */

[data-ui="centered"] {
	color: rgb(255, 255, 255);
}

/* Character Images Styles */

#game [data-character] {
	bottom: 88px;
}

#game [data-character].left {
	padding-left: 60px;
}

#game [data-character].right {
	padding-right: 60px;
}

/* #game [data-character=tv] {
	bottom: 168px;
} */
/* Other Images Styles */

#game [data-image] {
	bottom: 88px;
	top: 16px;
	/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/
	/* These styles are applied to the Mobile version of the Quick Menu */
	/* Quick Menu Style */
	[data-ui="quick-menu"] {}
	/* Quick Menu Buttons Style */
	[data-ui="quick-menu"] span {}
	/* Quick Menu Buttons Style on Hover */
	[data-ui="quick-menu"] span:hover {}
	/* Quick Menu Buttons Icon Style */
	[data-ui="quick-menu"]>span>.fa {}
	/* Styles for the desktop version of the Quick Menu*/
	@media screen and (min-width: 37.56255em) {
		/* Quick Menu Style */
		[data-ui="quick-menu"] {}
		/* Quick Menu Buttons Style */
		[data-ui="quick-menu"] span {}
		/* Quick Menu Buttons Style on Hover */
		[data-ui="quick-menu"] span:hover {}
	}