@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

body {
	background-color:#2C2C2C; 
	color:#CDC9C9; /*off white*/
	font-family: "Tinos", serif;
	
}

#mainDiv {
	background-color:#9E1010;
	width:40%;
	max-height: 40%;
	display:flex;
	margin:3% auto;
	box-shadow: 0 20px #4d0707;
	border-radius: 10px;
	padding:10px;
	border-left: solid 2px #a5513c;
	border-top: solid 2px #a5513c;
	transition:width 0.5s;
}

.leftColumn {
	width:70%;
	margin:5px;
	padding:5px;
	flex:1;
	overflow:hidden;
}

.mainImg img {
	background-color:#000000;
	width:90%;
	margin:10px;
	padding:10px;
}

.dialogue {
	background-color:#4d4d4d;
	width:88%;
	max-width:88%;
	padding:15px;
	margin:10px;
	color: #fff;
	font-size:24px;
	box-shadow: 5px 5px #000;
	border-left: solid 2px #767676;
	border-top: solid 2px #7e7e7e;
	overflow:hidden;
}

.choicesCl {
	background-color:#125A4B;
	width:30%;
	
}


.choicesCl button {
	display:block;
	margin: 10% auto;
	width: 90%;
	padding:20%;
	border:solid 5px;
	border-color: #5e8c73;
	box-shadow: 0 10px #132126;
	background-color: #000;
	color: #fff;
	font-size:20px;
	font-family: "Tinos", serif;
}

.playAnim {
	opacity:0;
	animation: fadeIn 1s ease;
	animation-fill-mode: forwards;
	animation-delay:2s;
}
@keyframes fadeIn {
	from {opacity:0}
	to {opacity:100}
}

 button:hover {
	 background-color: #44544d;
	 cursor: pointer;
	 transition: background-color 0.25s;
}

#choiceList {
	padding:20px;
	visibility:hidden;
	position:absolute;
	transform-origin:left;
	transform: scaleX(0);
	overflow:hidden;
	flex:0;
	animation: test 1s ease;
	animation-play-state: paused;
	animation-fill-mode: forwards;
}

@keyframes test {
	from {transform:scaleX(0);flex-grow:0;}
	to {transform: scaleX(1); flex-grow:0.4;}
}

#txtAdv {
	background-color: black;
	color: white;
	padding:15px;
	margin:10px;
	margin-left:auto;
	border:none;
	display:block;
	visibility: visible;
	font-family: "Tinos", serif;
	font-size: 16px;
}

#text {
    position:relative;
    line-height:1.5em;
    overflow:hidden;
}
#fadingEffect {
    position:absolute;
    top:0; bottom:0; right:0;
    width:100%;
	height:100%;
	transform-origin:bottom;
    background:#4d4d4d;
    animation: showText 1s linear;
	animation-fill-mode: forwards;
}

@keyframes showText {
	0% {transform:scaleY(1)}
    100% {transform:scaleY(0)}
}


#userName, #submit {
	margin: 20px;
	background-color: #000;
	color: #fff;
	display: inline;
	border-color: #a5a5a5;
}

#submit {
	padding: 10px;
	font-size:18px;
	border-color: #7e7e7e;
	font-family: "Tinos", serif;
}

#nameInput {
	display:block;
}

#nextButton {
	display:none;
}