@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


body {
	margin:0px;
	height:100%;
	background-color: #C7A5AB;
}
.row {
	width:100%;
}

/*visibility sections*/
#myVisibleDiv {
	
}

/*image that appears whenever you click on somebody*/
#mainImage {
	position:absolute;
	margin-left:36%;
	margin-top:150px;
	height: 500px;
	width: 500px;
	background-color: #F8F0C6;
}

/*blur with image*/
#blurrer {
	position:absolute;
	margin-left: 0%;
}

.blur {
	filter: brightness(40%) blur(10px);
}

/*menu section*/
.menuBar {
	position:fixed;
	width:10%;
	height:100%;
	float:left;
	background-color: #5c4033;
}
.home {
	margin-top: 20px;
	margin-left: 5px;
	height:250px;
}
.info {
	margin-top: 20px;
	margin-left: 5px;
	height:250px;
}
.reset {
	margin-top: 20px;
	margin-left: 5px;
	height:250px;
}

/*content section*/
.columnR {
	width:90%;
	float:right;
	background-color: #C7A5AB;
}
.screen {
	height:750px;
	margin-left: auto;
	background-image: url("screenBackground.png");
	background-repeat: no-repeat;
		
}
.convictBtn {
	float: right;
	position: fixed;
	margin-top: 30px;
	margin-left: 80%;
	height: 100px;
	width: 100px;
	cursor: pointer;
}
/*Suspect Section*/
.suspectOneOverview {
	position: absolute;
	margin-top: 20%;
	margin-left: 12.5%;
	height: 200px;
	width: 200px;
	cursor: pointer;
}

.suspectTwoOverview {
	position: absolute;
	margin-top: 18%;
	margin-left: 33%;
	height: 200px;
	width: 200px;
	cursor: pointer;
}

.suspectThreeOverview {
	position: absolute;
	margin-top: 11.5%;
	margin-left: 77%;
	height: 200px;
	width: 200px;
	cursor: pointer;
}

.suspectFourOverview {
	position: absolute;
	margin-top: 17.5%;
	margin-left: 58.5%;
	height: 200px;
	width: 200px;
	cursor: pointer;
}

.suspectFiveOverview {
	position: absolute;
	margin-top: 21.5%;
	margin-left: 0%;
	height: 200px;
	width: 200px;
	cursor: pointer;
}

.suspectSixOverview {
	position: absolute;
	margin-top: 32%;
	margin-left: 50%;
	height: 200px;
	width: 200px;
	cursor: pointer;
}




/*Text Section*/
.textBox {
	position: absolute;
	margin-top: 680px;
	margin-left: 70px;
	padding-bottom: 50px;
	width: 80%;
	height: 180px;
	background-image: url("dialogueBox.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.optionOne {
	position: relative;
	margin-top: 920px;
	margin-left: 2%;
	float:left;
	width: 20%;
	height: 80px;
	cursor: pointer;
	text-align: center;
}
.optionTwo {
	position: relative;
	margin-top: 920px;
	margin-left: 5%;
	float:left;
	width: 20%;
	height: 80px;
	cursor: pointer;
	text-align: center;
}
.optionThree {
	position: relative;
	margin-top: 920px;
	margin-left: 5%;
	float:left;
	width: 20%;
	height: 80px;
	cursor: pointer;
	text-align: center;
}
.optionFour {
	position: relative;
	margin-top: 920px;
	margin-left: 5%;
	float:left;
	width: 20%;
	height: 80px;
	cursor: pointer;
	text-align: center;
}

.centered {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -50%);
	color: #FFFFFF;
	font-size: 30px;
	padding-bottom: 20px;
	font-family: "VT323";

}

/*Text Format*/
p{
	font-size: 14px;
	text-align: justify;
	position: relative;
	font-family: "Times New Roman";
}

.textBoxText {
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	margin-top: 60px;
	height: 100%;
	Width: 90%;
	position: relative;
}

.questionBoxText {
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	height: 100%;
	Width: 90%;
	position: relative;
}

.textBoxFont {
	color: #FFFFFF;
	font-size: 30px;
	padding-bottom: 20px;
	text-align: center;
	position: relative;
	font-family: "VT323";
}

.menuBarFont {
	color: #FFFFFF;
}

.suspectFont {
	color: #FFFFFF;
	font-size: 30px;
	margin-top: 200px;
	text-align: center;
	position: relative;
	font-family: "VT323";
}

/*Opening Animation*/

.openText {
	position: absolute;
	margin-top: 450px;
	margin-left:40%;
	cursor:pointer;
}

#animOneOpen {
	position:absolute;
	width:300px;
	height:300px;
	margin-top:10px;
	margin-left:10px;
	animation: animOne;
	animation-duration: 7s;
	opacity: 0;
}

	@keyframes animOne {
	0% {opacity: 0;}
	20% {opacity: 100;}
	50% {opacity: 100;}
	80% {opacity: 100;}
	100% {opacity: 0;}
	}

#animTwoOpen {
	position:absolute;
	width:300px;
	height:300px;
	margin-top:10px;
	margin-left:150px;
	animation: animTwo;
	animation-duration: 7s;
	animation-delay: 7s;
	opacity: 0;
}

	@keyframes animTwo {
	0% {opacity: 0;}
	20% {opacity: 100;}
	50% {opacity: 100;}
	80% {opacity: 100;}
	100% {opacity: 0;}
	}

#animThreeOpen {
	position:absolute;
	width:300px;
	height:300px;
	margin-top: -50px;
	margin-left:300px;
	animation: animThree;
	animation-duration: 7s;
	animation-delay: 14s;
	opacity: 0;
}

	@keyframes animThree {
	0% {opacity: 0;}
	20% {opacity: 100;}
	50% {opacity: 100;}
	80% {opacity: 100;}
	100% {opacity: 0;}
	}

#animFourOpen {
	position:absolute;
	width:300px;
	height:300px;
	margin-top: 10px;
	margin-left:500px;
	animation: animFour;
	animation-duration: 7s;
	animation-delay: 21s;
	opacity: 0;
}

	@keyframes animFour {
	0% {opacity: 0;}
	20% {opacity: 100;}
	50% {opacity: 100;}
	80% {opacity: 100;}
	100% {opacity: 0;}
	}

#animFiveOpen {
	position:absolute;
	width:300px;
	height:300px;
	margin-top: -20px;
	margin-left:800px;
	animation: animFive;
	animation-duration: 7s;
	animation-delay: 28s;
	opacity: 0;
}

	@keyframes animFive {
	0% {opacity: 0;}
	20% {opacity: 100;}
	50% {opacity: 100;}
	80% {opacity: 100;}
	100% {opacity: 0;}
	}

#animSixOpen {
	position:absolute;
	width:400px;
	height:400px;
	margin-top: -30px;
	margin-left: 100px;
	animation: animSix;
	animation-duration: 100s;
	animation-delay: 35s;
	opacity: 0;
}

	@keyframes animSix {
	0% {opacity: 0;}
	5% {opacity: 100;}
	20% {opacity: 100;}
	50% {opacity: 100;}
	80% {opacity: 100;}
	100% {opacity: 100;}
	}