body {
    background-color: black;
    color: white;
    font-size: 22px;
    font-family: 'zpix';
}

@font-face {
  font-family: 'zpix';
  src: url('fonts/zpix.ttf') format('truetype');
}

.flex {
    justify-content: center;
    display: flex;
}

.dialogue-box .npc-text {
    width: 500px;
    text-align: center;
    margin: auto;
}

p {
  color: white;
}

.game-text {
text-align: center;
width: 500px;
}

.dialogue-box {
  display:flex;
  justify-content: center;
}


.container {
    position: relative;
    min-width: 841px;
    min-height: 590px;
    max-width: 841p;
    min-height: 590px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: url("https://charlie.ophanimkei.com/assets/bg.png");
    background-size: cover;
}


.bg img {
    width: 400px;
}

.bandaids img {
  position: absolute;
  width: 16%;
  top: 240px;
  left: 85px;
}

.blackrabbit img {
  position: absolute;
  width: 23%;
  top: 160px;
  left: 55px;
}

.bows img { 
  position: absolute;
  width: 11%;
  top: 328px;
  left: 660px
}

.cake img {
  position: absolute;
  width: 12%;
  top: 390px;
  left: 0;
}  


.diary img {
  position: absolute;
  width: 42%;
  top: 433px;
  left: 523px;
}


.handcuffs img {
  position: absolute;
  width: 9%;
  top: 0px;
  left: 12px;
}


.lamp img {
  position: absolute;
  width: 17%;
  top: 0;
  left: 700px;
}

.medkit img {
  position: absolute;
  width: 10%;
  top: 268px;
  left: 0;
}

.pinkrabbit img {
  position: absolute;
  width: 22%;
  top: 0;
  left: 490px;
}

.sewingkit img {
  position: absolute;
  width: 7.8%;
  top: 350px;
  left: 775px;
}

.syringes img {
  position: absolute;
  width: 25%;
  top: 520px;
  left: 335px;
}


.teacup img {
  position: absolute;
  width: 25%;
  top: 465px;
  left: 0;
}


.computer img {
  position: absolute;
  width: 61%;
  top: 20px;
  left: 170px
}


.crteffect {
  opacity: 0.7;
  z-index:2;
  mix-blend-mode: hard-light;
}

.computer-screen img:hover {
 filter: brightness(.8);
}




/* Add hover effect to all images */
.bandaids img,
.blackrabbit img,
.bows img,
.cake img,
.diary img,
.handcuffs img,
.lamp img,
.medkit img,
.pinkrabbit img,
.sewingkit img,
.syringes img,
.teacup img,
.computer-screen img {
    transition: filter 0.3s ease;
    
}

.bandaids img:hover,
.blackrabbit img:hover,
.bows img:hover,
.cake img:hover,
.diary img:hover,
.handcuffs img:hover,
.lamp img:hover,
.medkit img:hover,
.pinkrabbit img:hover,
.sewingkit img:hover,
.syringes img:hover,
.teacup img:hover
 {
    filter: brightness(1.5);
}