body {
	background-image: url('/ui/bgarc6.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	background-attachment: fixed;
	/***background-position: top right;
	background-color: #0d0d12;***/
	overflow:auto;
	font-family: "Kosugi Maru", sans-serif;
	color:#fff;
	user-select:none;
}
	
	.character{
	position: absolute;
	width: 640px;
	height: 1036px;
	object-fit: none;
	z-index: 1;
	transform: translateY(100px);
	}
	.frame{
		position: absolute;
	width: 650px;
	height: 1199px;
	transform: translateX(-5px) translateY(-58px);
z-index:2;
	}
	.viewer{
		/***
		position:relative;
		right:500px;
		transform: rotate(90deg);
		transform-origin: bottom;
		***/
		position:absolute;
		left:50%;
		transform: translate(-50%, 0);
		padding-top: 53px;
		width: 640px;
	}
	
	.commands{
		position: absolute;
  margin-left: auto;
  margin-right: auto;
  color: white;
  top: 5px;
  left: 50%;
  transform: translate(-50%, 0);
	user-select:none;
	z-index:3;
	}
	
	.commands img{
  object-fit:contain;
  height:45px;
	}
	
	.infoBox{
	  display:table;
	  width:455px;
	  height:fit-content;
  float:right;
  transform: translate(-15px,15px);
	border-color: transparent;
	border-style: solid;
	border-width: 25px 15px;
	border-spacing: 0px;
	border-image: url(ui/textboxbg.png) 55 30 fill;
	}
	.charaInfo{
	  width:100%;
	  height:fit-content;
	  position:relative;
	  display:inherit;
	}
	.charaName{
	  position:relative;
	  float: left;
	  margin:2% 0 ;
	}
	.charaVA{
	  position:relative;
	  float: right;
	  margin:2% 0 ;
	}
	.charaDesc{
	  margin:2% 0 ;
	  width:100%;
	  position:relative;
	  display:block;
	}
	
	.voiceline audio{
	  margin:2% 0 ;
	  width:100%;
	}
	
	.voiceline{
	  display:block;
	}
	
	.voices{
	  width:455px;
	  height:fit-content;
  transform: translate(-25%,-15px);
	  scrollbar-width:thin;
  position: absolute;
  right: 0;
	  bottom:0;
	border-color: transparent;
	border-style: solid;
	border-width: 25px 15px;
	border-spacing: 0px;
	border-image: url(ui/textboxbg.png) 55 30 fill;
	  text-align:center;
visibility:hidden;
	}
	
	.selectChara{
	  width:455px;
	  height:92%;
  transform: translate(25%,15px);
	  overflow-y:scroll;
	  scrollbar-width:thin;
  position: absolute;
  top: 0;
  left: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 25px 15px;
	border-spacing: 0px;
	border-image: url(ui/textboxbg.png) 55 30 fill;
	text-align:center;
	}
	.selectChara div{
	  margin:0 auto;
	  position:relative;
	  display:inline-grid;
	}
	
	
.selectBG{
	  width:455px;
	  height:92%;
  transform: translate(-25%,15px);
	  overflow-y:scroll;
	  scrollbar-width:thin;
  position: absolute;
  top: 0;
  right: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 25px 15px;
	border-image: url(/ui/textboxbg.png) 55 30 fill;
	text-align:center;
	}

.colIcon {
	width: 0;
}

.colDesc {
	width: 100%;
}

.charaVA:before{content:'CV: '}

.backgroundbg{
	position: absolute;
  width: 640px;
  height: 1136px;
  object-fit: none;
}

@media (orientation: portrait) {
	div.infoBox{
  float: initial;
  margin: 1em auto;
  transform: initial;
  max-width:95%;
  position:relative;
	}
	
	div.viewer{
		max-width:95%;
		position:relative;
		left: initial;
		transform: initial;
		margin: 0 auto;
	}
}