@font-face {
	font-family: 'LucidaFax';
	src: url('LucidaFax.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {
	margin: 0;
	padding: 0;
	background-color: #010101;
	display: flex;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	font-family: 'LucidaFax', serif;
	font-smooth: unset;
}
p{padding:0;margin:0;}
#ui {
  position: relative;
  display: inline-block; 
  height: 100%;
  width: auto;
 /* margin: 0;
  padding: 0;*/
  box-sizing: border-box;
}

.nameTag {
  position: absolute;
  bottom: 26.5%;
  left: 4%;
  font-size: 4.5vh;
  color:white;
}

.nameTagInside{
  position:absolute;
  left:0px;
}

.border {
  height: 100%;
  width: auto; 
    user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* Edge */
}

.nextButtonContainer {
  position: absolute;
  bottom: 0.5vh;
  right: 3vh; 
}

.prevButtonContainer {
  position: absolute;
  bottom: 0.5vh;
  right: 16.5vh;
}

.prevButton {
  width:13vh;
}
.nextButton {
  width:13vh;
}

.controlButton {
  position: absolute;
  bottom: 21.4vh;
  right: 8vh;
  width:23vh;
}

.textContainerOver {
  position: absolute;
  bottom: 0px;
  background:white;
  left: 0px;
  height: 25%;
  width: 100%;
  z-index: -1;
  box-sizing: border-box; /* Ensure it doesn't overflow */
}
.textContainer {
  position: absolute;
  bottom: 0px;
  background: white;
  left: 0px;
  height: 25%;
  width: 100%;
  z-index: -2;
  box-sizing: border-box; /* Ensure it doesn't overflow */
}

/*.textBox{*/
#textBoxBackground{
  position: absolute;
  bottom:2.3%;
  left:3.8%;
  width:92.2%;
  height:17.7%;
  font-size:4vh;
}
/*.textBoxInside(*/
#text{
  position: absolute;
  left:0px;
}

/*NOTE: comic will be applied to bg and bgbg and comic(id)*/
.comic{
  position:absolute;
  height:69.54vh;
  top:3.1vh;left:4.7vh;
}

#spriteHouse{
  width:111.264vh;
  overflow: hidden;
}

.uiButton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  position: absolute;
  cursor: pointer;
}

.uiButton img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}


#skipButton	{bottom: 21.4vh;	right:  5.0vh;	width: 4.5vh;}
#homeButton	{bottom: 21.4vh;	right:  9.5vh;	width: 4.5vh;}
#muteButton	{bottom: 21.4vh;	right:   14vh;	width: 4.5vh;}
#skipLButton{bottom: 21.4vh;	right: 18.5vh;	width: 4.5vh;}

#moveButton {bottom:	1vh;	right:    3vh;	height: 4.8vh;}
#moveButton img { /*Not very good, a little hack so i can keep my height in here*/
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;
}






.full{
  position:absolute;
  height:93.9vh;
  top:3.1vh;left:4.7vh;
}

.chatDef{
  position:absolute;
  height:67vh;
  width:53.8vh;
  top:14.8vh;left:7.8vh;
  z-index:10;
  font-size:16px;
  font-family:Tahoma;
  overflow-y: auto;
}

.chatPad{
	padding:6px;
	
}


/* Firefox equivalent */
* {
  scrollbar-width: thin;              /* auto or thin */
  scrollbar-color: #C2E0B3 #E9F4E3;  /* thumb color, track color */
}


#typingDisplay {
  z-index:50;
  position:absolute;
  height:2.8vh;
  width:45vh;
  top:83.8vh;left:7.8vh;
  overflow: hidden;
  line-height: 2.3vh;
}