* {
background-image: url(images/background.png);
background-position: center;
background-size: 20%;
color: white;
}

/* ------- scroll bar -------- */

::-webkit-scrollbar {
display: none;
}

/* ------flashlight effect------- */

#flashlight {
  --Xpos: 50vw;
  --Ypos: 50vh;
}
#flashlight:before {
  content: "";
  display: block;
  width: 72%;
  height: 100%;
bottom-margin: 10px;
  position: absolute;
  pointer-events: none;
  background: radial-gradient(
    circle 15em at var(--Xpos) var(--Ypos),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1)
  );
border-style: dotted;
border-color: grey;
border-width: 1px;
}


/* ----- chat ---- */

::-webkit-input-placeholder { 
color: grey;
font-size: 8px;
font-family: "Courier New", "Lucida Console", monospace;
}
 
input { 
z-index: 5;
padding: 3px; 
border-style: dotted;
border-color: grey;
border-width: 1px;

font-style: italic;
font-size: 8px;
color: grey ;
font-family: "Courier New", "Lucida Console", monospace;
position: fixed;
bottom: 50px;
right: 50px;
}


.messages {
z-index: 5;
height: 150px;
width: 150px;
bottom: 75px;
right: 50px;
position: fixed;
overflow-y: auto;
padding: 20px;
font-style: italic;
line-height: 20px;
color: white;
margin-left: auto;
font-family: "Courier New", "Lucida Console", monospace;
font-size: 8px;
}


.bot {
z-index: 5;
font-family: "Lucida Console", "Courier New", monospace;
font-size: 8px;
}

/* -------- log eye --------- */

.imglink {
background: none;
position: absolute;
opacity: 100%;
z-index: -2;
}

.imglink:hover {
background: none;
position: absolute;
opacity: 0%;
}

.imglinkbis {
background: none;
z-index: -3;
position: absolute;
}

/*-----------------*/

div.sidebar {
  content: "";
  display: block;
  width: 28%;
  height: 100%;
  position: fixed;
  background-color: white;
z-index: 10;
border-style: dotted;
border-color: grey;
border-width: 1px;
}