/**
 * =============================================================================
 * 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.
 * =============================================================================
**/

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

/* General Style */

:root {
	--primary: #7092ab;
	--primary-dark: #344f6f;
	--secondary: #f46767;
	--secondary-dark: #a7696e;
	--secondary-light: #efbebd;
	
	


background-color: black;

  }





  
body {
	font-family: "Satisfy";
		margin: 0 auto;     /* Center the game */
		overflow: hidden;   /* Hide any overflow content */
		object-fit: contain;
		object-position: 0%;
		background-color: black;

	  

};


.monogatari .text {
    display: block;
}

.monogatari .hidden {
    display: none;
}




.uc__centered_text {
	background-color: black;
	color: white;
	font-size: 2em;
	padding: .5em;
}




/* Simple Button styles*/
button {

	background-color: black;
	color: white;
	border: 3px solid white;
}

/* Simple Button Style on Hover */
button:hover {
	background-color: var(--primary-dark);

}

/* General Styling for Menu Screens */
[data-screen] {
	background-color: black;
	color: white;
	margin: 0 auto;     /* Center the game */
	overflow: hidden;   /* Hide any overflow content */


  

}

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

#monogarami {
	width: 100%;         /* Set the width of the text container */
	max-height: 100vh;
	object-fit: cover;

  }

.uc__main_screen_img {
	justify-self: center;
	position: relative;
}


#uc__title_text {
	position: absolute;
	top: 20%;
	color: black;
	text-shadow: white;
	text-align: center;
	justify-content: center;
	align-items: center;
	justify-self: center;
	align-content: center;
	justify-items: center;

}

#uc__title_text img {
	max-width: 60%;
	text-shadow: white;
}




#uc__title_wrap {

}

.uc__title_enter {
	max-width: 2em;
}


text-box p {
	font-size: 1.7em;
}


/* Main Menu Styling */
[data-screen="main"] {
	position: absolute;
	display: flex;
	margin: 0 auto;     /* Center the game */
	overflow: hidden;   /* Hide any overflow content */
	justify-content: center;
	align-items: center;
	justify-self: center;
	object-fit: cover;
	object-position: 0% 0%;  
}

/* Main Menu Buttons Styling */
[data-screen="main"] button {
	display: flex;
	flex-direction: column;
	background-color: black;
	color: white;
	justify-content: center;
	justify-self: center;
	align-items: center;
	align-content: center;
	border: 5px solid white;

}


.modal__content {
	background-color: black;
}

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

/* Slots Style 
[data-component="save-slot"] figure {

}
*/
/* Slot's Image Style 
[data-component="save-slot"] img {

}
*/
/* Slots Title Style 
[data-component="save-slot"] figcaption {

}
*/
/* Slots Delete Button Style 
[data-component="save-slot"] button {

}
*/
/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {
	color: black;
	font-weight: 900;
	background-color: var(--secondary-light);
	border: 5px solid black;
	padding: 1em;

}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {
	background-color: var(--primary);
	color: white;

}

/* Text Box styling */
[data-component="text-box"] {
	background-color: rgba(0,0,0,.9);
	font-family: 'Ubuntu';

}

/* Character Name Style */
[data-ui="who"] {
	font-family: 'Ubuntu';
	font-weight: 900;
	font-size: 2em;

}

 Style for Centered Text 
[data-component="centered-dialog"] {
	background-color: black;
	color: white;
	font-family: 'Satisfy';

}

/* Character Images Styles 
[data-screen="game"] [data-character] {

}
*/
/* Other Images Styles 
[data-screen="game"] [data-image] {

}
*/
/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {
	color: white;
	background-color: black;

}

/* Quick Menu Buttons Style 
[data-component="quick-menu"] span {

}
*/
/* Quick Menu Buttons Style on Hover 
[data-component="quick-menu"] span:hover {

}
*/
/* Quick Menu Buttons Icon Style 
[data-component="quick-menu"] > span > .fa {

}
*/
/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these 
input[type=range]:focus::-webkit-slider-runnable-track {

}

input[type=range]::-webkit-slider-runnable-track {

}

input[type=range]:focus::-ms-fill-upper {

}

input[type=range]:focus::-ms-fill-lower {

}

input[type=range]::-moz-range-track {

}

input[type=range]::-ms-fill-lower {

}

input[type=range]::-ms-fill-upper {

}
*/


/** Medium Screens, Phablets (601px) 
@media screen and (min-width: 37.56255em) {
	**/
	/* Styles for the desktop version of the Quick Menu 

	/* Quick Menu Style 
	[data-component="quick-menu"] {

	}
*/
	/* Quick Menu Buttons Style 
	[data-component="quick-menu"] span {

	}
*/
	/* Quick Menu Buttons Style on Hover 
	[data-component="quick-menu"] span:hover {

	}
}
*/
/** Medium Devices, Tablets (992px)
@media screen and (min-width: 62em) {

}
**/
/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) 
@media screen and (min-width: 75em) {

}
**/
/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) 
@media screen and (min-width: 120em) {

}
**/
/** Retina Screen , Large Devices, Wide Screens(2560px) 
@media screen and (min-width: 160em) {

}
**/
/** 4k Screens, Large Devices, Wide Screens (3840px) 
@media screen and (min-width: 240em) {

}
**/
/** 5k Screens, Large Devices, Wide Screens (5000px) 
@media screen and (min-width: 312.5em) {

}
**/
/** 8k Screens, Large Devices, Wide Screens (8000px)
@media screen and (min-width: 500em) {

}
 **/