@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: 100dvh; /* Make the body take up the full viewport height */
  overflow: hidden; /* Prevent any overflow on body */
  box-sizing: border-box;
      font-family: 'LucidaFax', serif;
      
      
      font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> value */
font-smooth: 2em;

/* Global values */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;
}
p{
  padding:0;margin:0;
}
.ui {
  position: relative;
  display: inline-block; /* Makes the div shrink to fit its content */
  height: 100%; /* Take up full height of the body */
  width: auto; /* Allow width to scale to content */
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Include padding/borders in the element's size */
}

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

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

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

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

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

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

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

.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{
  position: absolute;
  bottom:2.3%;
  left:3.8%;
  width:92.2%;
  height:17.7%;
  font-size:4dvh;
}
.textBoxInside{
  position: absolute;
  left:0px;
}
.comicUND{
  z-index:-5;
  position:absolute;
  height:69.54dvh;
  top:3.1dvh;left:4.7dvh;
}

.comic{
  position:absolute;
  height:69.54dvh;
  top:3.1dvh;left:4.7dvh;
}



#skipB{
  display:inline-block;
  position: absolute;
  bottom: 21.5dvh;
  right: 5.3dvh;
  width:4.1dvh;
  height:4.1dvh;
}

#homeB{
  display:inline-block;
  position: absolute;
  bottom: 21.5dvh;
  right: 9.5dvh;
  width:4.1dvh;
  height:4.1dvh;
}

#moveL{
  display:inline-block;
  position: absolute;
  bottom: 1.3dvh;
  right: 11.6dvh;
  width:8.2dvh;
  height:4.4dvh;
}
#moveR{
  display:inline-block;
  position: absolute;
  bottom: 1.3dvh;
  right: 3.2dvh;
  width:8.2dvh;
  height:4.4dvh;
}

#muteB{
  display:inline-block;
  position: absolute;
  bottom: 21.5dvh;
  right: 14.2dvh;
  width:4.1dvh;
  height:4.1dvh;
}

#skipLB{
  display:inline-block;
  position: absolute;
  bottom: 21.5dvh;
  right: 18.7dvh;
  width:4.1dvh;
  height:4.1dvh;
}

#theHider{background-color:black;position:absolute; width:100%; height: 100%; top:0; z-index:-2;}

#skipLButton{
  position: absolute;
  bottom: 21.4dvh;
  right: 18.5dvh;
  width:4.5dvh;
  
}

#muteButton{
  position: absolute;
  bottom: 21.4dvh;
  right: 14dvh;
  width:4.5dvh;
  
}
#homeButton{
  position: absolute;
  bottom: 21.4dvh;
  right: 9.5dvh;
  width:4.5dvh;
  
}
#skipButton{
  position: absolute;
  bottom: 21.4dvh;
  right: 5.0dvh;
  width:4.5dvh;
  
}

#moveButton{
  position: absolute;
  bottom: 1dvh;
  right: 3dvh;
  height:4.80dvh;
  
}






.full{
  position:absolute;
  height:93.9dvh;
  top:3.1dvh;left:4.7dvh;
    user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* Edge */
}

.chatDef{
  position:absolute;
  height:67dvh;
  width:53.8dvh;
  top:14.8dvh;left:7.8dvh;
  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.8dvh;
  width:44.8dvh;
  top:83.8dvh;left:7.8dvh;
  overflow: hidden;
  line-height: 2.3dvh;
  
  white-space: nowrap;
  overflow-x: auto;          /* enable horizontal scroll */
  overflow-y: hidden;

  /* Hide scrollbar (cross-browser) */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
#typingDisplay::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */

}





#fastButton{
  position: absolute;
  bottom: 1dvh;
  right: 25.9dvh;
  width:5.1dvh;
  
}
#stopButton{
  position: absolute;
  bottom: 1dvh;
  right: 20.4dvh;
  width:5.1dvh;
  
}

#fastB{
  position: absolute;
  bottom: 1dvh;
  right: 25.9dvh;
  width:5dvh;
  height:4.8dvh;
  z-index:60;
}
#stopB{
  position: absolute;
  bottom: 1dvh;
  right: 20.4dvh;
  width:5dvh;
  height:4.8dvh;
}