body {
  background-image: url("tf_images/assets/bg.jpg");
  background-repeat: repeat;
  font-family:"FreeMono", monospace;
  color: white;
  text-shadow: 1px 1px 2px black;
  scrollbar-color: #e7ccfc #8e74a3;
  cursor: url("tf_images/assets/cursor.png"), auto;
}


#selection {
	float:left;
	width: 24%;
}

#routes {
	height: 62%;
	overflow: scroll;
	border:outset;
  border-color: #e7ccfc;
}
#games {
	height:4%;
	border:outset;
  border-color: #e7ccfc;
}

#events {
	height:20%;
	overflow: scroll;
	border:outset;
  border-color: #e7ccfc;
}
#desc {
	height:10%;
	overflow: scroll;
	border:outset;
  border-color: #e7ccfc;	
	padding-top: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 3%;
}

#middle {
	float:left;
	width:60%;
	height: 100%;
  position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

#viewer {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow:auto;
	padding-bottom:30%;
}

#main_img{
	max-width:90%;
	height:auto;
	border:outset;
  border-color: #e7ccfc;
}

#desc_content{
	margin:0;
}


#char_select {
	width:15%;
	float:left;
}

#char_events {
	height:29%;
	overflow: scroll;
	border:outset;
  border-color: #e7ccfc;
	width:100%;
}

#characters {
	display: flex;
    flex-wrap: wrap;
    width: 100%;
	height:69%;
	overflow:scroll;
	border:outset;
  border-color: #e7ccfc;
}

#back_arrow{
	width:5%;
	height:auto;
}

#next_arrow{
	width:5%;
	height:auto;
}

#information{
	background:linear-gradient(0deg,rgba(42, 42, 89, 1) 0%, rgba(115, 88, 163, 1) 12%, rgba(141, 104, 189, 1) 24%, rgba(141, 104, 189, 1) 73%, rgba(229, 213, 242, 1) 100%);
	border:outset;
	font-size: 2vmin;
  border-color: #e7ccfc;
  width:99%;
  position: absolute;
  bottom: 0;
}
#information p{
	padding-top: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 3%;
}



.char-button{
	width: 49%;
	height: auto;
	opacity: 0.5;
}

.active-char {
	opacity: 1;
}

.featured_char {
	height:80%;
}

.event-button {
	float:left;
	height:24.7%;
	width:49%;
	display: flex;
	justify-content: center;
	align-items: center;
	background:linear-gradient(0deg,rgba(41, 34, 77, 1) 0%, rgba(146, 110, 184, 0.15) 41%, rgba(146, 110, 184, 0.15) 100%);
}

.event-button2 {
	font-size: 1.7vmin;
	float:left;
	height:20%;
	width:99%;
	display: flex;
	justify-content: center;
	align-items: center;
	background:linear-gradient(0deg,rgba(41, 34, 77, 1) 0%, rgba(146, 110, 184, 0.15) 41%, rgba(146, 110, 184, 0.15) 100%);

}
.active-event {
	background:linear-gradient(0deg,rgba(83, 60, 120, 0.92) 0%, rgba(170, 141, 199, 0.33) 41%, rgba(243, 237, 255, 0.78) 100%);
}

.event-button2 img{
	max-height:50%;
}

.listed_char{
	height:10%;
	width:auto;
	opacity:0.5;
}
.listed_char img{
	max-height:100%;
}

.game-button {
	float:left;
  cursor: url("tf_images/assets/arrow.cur"), auto;
  background:linear-gradient(0deg,rgba(41, 34, 77, 1) 0%, rgba(146, 110, 184, 0.15) 41%, rgba(146, 110, 184, 0.15) 100%);
	height:100%;
	width:50%;
  font-family:"FreeMono", monospace;
  color: white;
	font-size: 2vmin;
	padding:0px;
	display: flex;
	justify-content: center;
	align-items: center;
  cursor: url("tf_images/assets/cursor.png"), auto;
}
.active-game {
  background:linear-gradient(0deg,rgba(83, 60, 120, 0.92) 0%, rgba(170, 141, 199, 0.33) 41%, rgba(243, 237, 255, 0.78) 100%);

}
.arrow {
	padding:1%;
}

.active-char2 {
	opacity: 1;
	}