.game-canvas {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    z-index: -1; 
}

.player-input {
	background:transparent;
    outline:none;
    border:none;
    width:100%;
    font-size:15px;
    resize: none;
    padding: 8px;
    overflow: hidden;
    font-family: monospace;
    color: white;
}

html {
	background-color: black;
	color: white;
}

.player-input-container {
	display: flex;
	align-items: center;
}

.chat-history {
    width:95%;
    font-size:15px;
    resize: none;
    color: #FFF;
/*    padding: 8px;*/
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
    font-family: monospace;
    display: flex;
  flex-direction: column-reverse;

  /* Base opacity */
    opacity: 0.6;

    /* Gradient mask */
    /*-webkit-mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,0.2), 
        rgba(0,0,0,1)
    );
    mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,0.2), 
        rgba(0,0,0,1)
    );*/

    
      transition: 
        opacity 0.4s ease;

}

.chat-history p {
    margin: 3px;
}

.chat-history:hover {
    opacity: 1;

}
/*.chat-history:active {
      opacity: 0.7;
}

.chat-history:focus {
      opacity: 0.7;
}*/

.fix {
	position: fixed;
	width: 450px;
	height: 200px;
/*    top: 85%;
    left: 80%;*/
	display: flex;
	flex-direction: column; /* Stacks children vertically */
  	justify-content: flex-end; /* Aligns content to the bottom */
    margin-top: -100px; 
    /* Negative half of height. */
	margin-left: -250px; /* Negative half of width. */
}



/* ============ */


body.fade-start {
  background: black;
  opacity: 1;
  transition: opacity 2.5s ease;
}

body.fade-end {
  opacity: 1;
}

#introTitle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-family: monospace;
  color: white;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
  z-index: 9999;
}

#introTitle.visible {
  opacity: 1;
}


.start-button {
  position: fixed;     /* so it stays on screen */
  top: 50%;
  left: 50%;
  font-size: 50px;
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  color: rgba(255, 255, 255, 1);
  z-index: 99999;      /* HIGHER than the canvas */
    display: none;
    transition: color 1s ease;
}

.start-button:hover {
    color: rgba(100, 100, 100, 1);
}