@font-face {
    font-family: PixelMplus;
    src: url(PixelMplus.ttf);
  }

html, body{
    margin: 0;
    padding:0;
    }

canvas{
    display:block;
    }

body {
    background: url("Material/background_sprites.png") no-repeat;
    background-color: black;
    background-position: 0px -151px;
}

#game_info{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%,-10%);
    z-index: -2;
    font-size: 20px;
    color: white;
    left: 50%;
}

.mainArea {
    position: absolute;
    width: 60%;
    height: 40%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#eb_number{
    font-family: 'PixelMplus', serif;
    position: absolute;
    transform-origin: left;
    border-radius: 10px;
    width: 40%;
    height: 15%;
    top: 30%;
    text-align: center;
    font-size: 20px;
}

#eb_name{
    font-family: 'PixelMplus', serif;
    transform-origin: left;
    position: absolute;
    border-radius: 10px;
    width: 40%;
    height: 15%;
    top: 55%;
    text-align: center;
    font-size: 20px;
}

#login {
    font-family: 'PixelMplus', serif;
    border-radius: 10px;
    position: absolute;
    background: none;
    border: none;
    color: white;
    width: auto;
    height: auto;
    top: 80%;
    text-align: center;
    font-size: 40px;
}

.login_logo_area{
    position: absolute;
    font-family: 'PixelMplus', serif;
    transform-origin: left;
    background: none;
    top: 0;
    width: 100%;
}

.logoFormat{
    position: absolute;
    color: white;
    font-size: 70px;
    text-align: center;
}

#login_click_area{
    position: absolute;
    font-family: 'PixelMplus', serif;
    transform-origin: left;
    width: 100%;
    height: 15%;
    top: 40%;
    background: none;
    color: white;
}

.clickFormat{
    position: absolute;
    color: rgb(26, 24, 24);
    color: white;
    font-size: 40px;
    text-align: center;
}

#start_game_area{
    font-family: 'PixelMplus', serif;
    background: none;
    text-align: center;
    font-size: 40px;
    top: 55%;
    position: absolute;
    padding: 20px;
    color: white;
}

.start_game_button{
    border: 5px #FFFACD solid;
    border-radius: 10px;
    color: #FFFACD;
}

.start_game_button:hover{
    color: #F08080;
    border: 5px #87CEFA solid;
    border-radius: 10px;
}

[draggable="true"] {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.dragging {
    box-shadow:3px 3px 5px 6px white;
    z-index: 1;
  }
  
.draghover {
    box-shadow:3px 3px 5px 6px #FFFF93;
  }

#identification_card{
    font-family: 'PixelMplus', serif;
    position: absolute;
    background: url("Material/Identification_card.png") no-repeat;
    background-size: contain;
    top: 2%;
    left: 88%;
    width: 7.5%;
    height: 10%;
}

#back{
    width: 1920px;
    height: 929px;
    background: url("Material/re_2249567.jpg") no-repeat;
    background-size: cover;
    background-position: 0px -151px;
}

.user_infoFormat{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 1%;
    left: 1%;
    width: 40%;
    height: 10%;
    font-size: 30px;
    z-index: 1;
}

#hint_button{
    font-family: 'PixelMplus', serif;
    position: absolute;
    background: url("Material/button.png") no-repeat;
    background-size: contain;
    top: 2%;
    left: 93%;
    width: 7%;
    height: 7%;
    z-index: 1;
}

#factory{
    position: absolute;
    top: 65%;
    left: 1%;
    width: 18%;
    height: 33%;
    z-index: -1;
}

#home{
    position: absolute;
    top: 66%;
    left: 30%;
    width: 20%;
    height: 32%;
    z-index: -1;
}

#neighborA{
    position: absolute;
    top: 63%;
    left:56%;
    width: 13.5%;
    height: 35%;
    z-index: -1;
}


#neighborB{
    position: absolute;
    top: 68%;
    left: 84%;
    width: 15%;
    height: 28%;
    z-index: -1;
}

#dialogboxA{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 25%;
    height: 15%;
}

#dialogboxB{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 50%;
    left: 45%;
    width: 25%;
    height: 15%;
    text-align: right;
}

#dialogboxC{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 50%;
    left: 78%;
    width: 20%;
    height: 15%;
}

#Sky{
    position: absolute;
    top: 1%;
    left: 1%;
    width: 98%;
    height: 30%;
    z-index: -1;
}

#night{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 50%;
    left: 88.9%;
    width: 2%;
    height: 4%;
    z-index: -1;
}

#home_key{
    font-family: 'PixelMplus', serif;
    position: absolute;
    background: url(Material/key.png) no-repeat;
    background-size: contain;
    top: 70%;
    left: 10%;
    width: 5%;
    height: 10%;
}

#anvil_hint{
    position: absolute;
    background: url(Material/anvil_hint.png) no-repeat;
    background-size: contain;
    top: 2%;
    left: 94%;
    width: 5.5%;
    height: 10%;
    z-index: -1;
}

#obj_anvil_hint{
    position: absolute;
    background: url(Material/anvil_hint.png) no-repeat;
    background-size: contain;
    top: 2%;
    left: 94%;
    width: 5%;
    height: 10%;
}

#host{
    position: absolute;
    top: 84.5%;
    left: 73%;
    width: 5.5%;
    height: 12%;
    z-index: -1;
}

#girl{
    position: absolute;
    top: 72%;
    left: 58%;
    width: 5.5%;
    height: 12%;
    z-index: -1;
}

#mural{
    position: absolute;
    background: url(Material/frame_nutn_baby.png) no-repeat;
    background-size: contain;
    transform-origin: left top;
    top: 21.5%;
    left: 21%;
    width: 8.5%;
    height: 17%;
    z-index: -1;
}

#safe_box{
    position: absolute;
    top: 21.5%;
    left: 21.1%;
    width: 8.5%;
    height: 17%;
    z-index: -1;
}

#book{
    position: absolute;
    top: 62.5%;
    left: 8%;
    width: 7.5%;
    height: 7%;
    z-index: -1;
}

#box{
    position: absolute;
    top: 80.5%;
    left: 9.3%;
    width: 4.5%;
    height: 5.5%;
    z-index: -1;
}

#dog{
    position: absolute;
    top: 81%;
    left: 39.5%;
    width: 4.5%;
    height: 15.5%;
    z-index: -1;
}

#donut{
    position: absolute;
    background: url(Material/dount.png) no-repeat;
    background-size: contain;
    top: 80.5%;
    left: 9.3%;
    width: 4.5%;
    height: 8.5%;
}

#eraser{
    position: absolute;
    background: url(Material/eraser.png) no-repeat;
    background-size: contain;
    top: 80.5%;
    left: 9.3%;
    width: 4.5%;
    height: 8.5%;
}

#penties{
    position: absolute;
    background: url(Material/pentie.png) no-repeat;
    background-size: contain;
    top: 80%;
    left: 58%;
    width: 4.5%;
    height: 8.5%;
}

#bar{
    position: absolute;
    background: url(Material/bar.png) no-repeat;
    background-size: contain;
    top: 80%;
    left: 58%;
    width: 4.5%;
    height: 8.5%;
}

#safe_key{
    position: absolute;
    background: url(Material/key.png) no-repeat;
    background-size: contain;
    top: 80.5%;
    left: 9.3%;
    width: 4.5%;
    height: 8.5%;
}

#flashlight_light{
    position: absolute;
    background: url(Material/flashlight_light.png) no-repeat;
    background-size: contain;
    top: 53%;
    left: 30%;
    width: 4.5%;
    height: 8.5%;
}

#flashlight{
    position: absolute;
    background: url(Material/flashlight.png) no-repeat;
    background-size: contain;
    top: 80.5%;
    left: 9.3%;
    width: 4.5%;
    height: 8.5%;
}

#fh_password{
    font-family: 'PixelMplus', serif;
    position: absolute;
    background: #ffffff;
    border-radius: 5px;
    transform: translate(-50%, 0);
    font-size: 45px;
    display: flex;
    align-content: space-between;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    top: 48.5%;
    left: 20%;
    width: 10.2%;
    height: 5.5%;
}

#school{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 48.5%;
    left: 20%;
    width: 10.2%;
    height: 5.5%;
    font-size: 60px;
    text-align: center;
}

#school_halo{
    position: absolute;
    top: 49.5%;
    left: 20%;
    width: 10.5%;
    height: 5.5%;
    background: #fcfc6750;
    box-shadow:3px 3px 5px 6px #96964d;
}

#book_hint{
    position: absolute;
    background: url(Material/paper_hint.png) no-repeat;
    background-size: contain;
    top: 38%;
    left: 8%;
    width: 30%;
    height: 40%;
}

#dialogDOG{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 73%;
    left: 38%;
    width: 10.2%;
    height: 5.5%;
    z-index: -1;
    font-size: 20px;
}

#dialogGT{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 50%;
    left: 58%;
    width: 15%;
    height: 5.5%;
    z-index: -1;
    color: white;
    font-size: 30px;
}

#jiugongge_one{
    position: absolute;
    background: url(Material/rw9-1.png) no-repeat;
    background-size: contain;
    top: 2%;
    left: 94%;
    width: 5%;
    height: 10%;
}

#jiugongge_three{
    position: absolute;
    background: url(Material/rw9-3.png) no-repeat;
    background-size: contain;
    top: 81%;
    left: 39.5%;
    width: 5%;
    height: 10%;
}

#jiugongge_four{
    position: absolute;
    background: url(Material/rw9-4.png) no-repeat;
    background-size: contain;
    top: 63%;
    left: 10%;
    width: 5%;
    height: 10%;
}

#screen{
    position: absolute;
    background: url(Material/re_5797247.jpg) no-repeat;
    background-size: contain;
    border-radius: 10px;
    top: 58%;
    left: 65.7%;
    width: 7.5%;
    height: 8.5%;
}

#screen_close_button{
    position: absolute;
    background: url(Material/close.png) no-repeat;
    background-size: contain;
    top: 5%;
    left: 93%;
    width: 5%;
    height: 8%;
}

#screen_password{
    position: absolute;
    font-family: 'PixelMplus', serif;
    color: white;
    font-size: 40px;
    width: 90%;
    height: 20%;
    text-align: center;
    top: 40%;
    left: 50%;
    border: 0;
    background: transparent;
    transform: translate(-50%, 0%);
    border: 0px;
}

#screen_submit{
    position: absolute;
    font-family: 'PixelMplus', serif;
    color: black;
    font-size: 20px;
    width: 30%;
    height: 13%;
    text-align: center;
    top: 72%;
    left: 50%;
    border: 2px black solid;
    border-radius: 5px;
    transform: translate(-50%, 0%);
}

#screen_submit:hover{
    position: absolute;
    font-family: 'PixelMplus', serif;
    color: black;
    font-size: 20px;
    width: 30%;
    height: 13%;
    text-align: center;
    top: 72%;
    left: 50%;
    border: 2px rgb(255, 167, 167) solid;
    border-radius: 5px;
    transform: translate(-50%, 0%);
}

#wall{
    position: absolute;
    background: url(Material/wall_hole.png)no-repeat;
    background-size: cover;
    border-radius: 10px;
    top: 25%;
    left: 35%;
    width: 30%;
    height: 40%;

}

#fire{
    position: absolute;
    background: url(Material/fire.gif)no-repeat;
    background-size: contain;
    top: 30%;
    left: 30%;
    width: 25%;
    height: 35%;
}

#music{
    position: absolute;
    background: url(Material/app_mymusic.png)no-repeat;
    background-size: contain;
    top: 13%;
    left: 10%;
    width: 9%;
    height: 18%;

}

#zip{
    position: absolute;
    background: url(Material/app_rar.png)no-repeat;
    background-size: contain;
    top: 55%;
    left: 10%;
    width: 9%;
    height: 18%;

}

#scissors{
    position: absolute;
    background: url(Material/app_scissors.png)no-repeat;
    background-size: contain;
    top: 10%;
    left: 80%;
    width: 9%;
    height: 18%;

}

#garbage{
    position: absolute;
    background: url(Material/app_recyclebin.png) no-repeat;
    background-size: contain;
    top: 70%;
    left: 80%;
    width: 9%;
    height: 18%;

}

#sticker{
    position: absolute;
    background: url(Material/transicon.png)no-repeat;
    background-size: contain;
    top: 75.5%;
    left: 82.5%;
    width: 4%;
    height: 6%;

}

#converter{
    position: absolute;
    background: url(Material/app_imgtrans.png)no-repeat;
    background-size: contain;
    top: 40%;
    left: 80%;
    width: 9%;
    height: 18%;

}

#water{
    position: absolute;
    background: url(Material/water.png)no-repeat;
    background-size: contain;
    top: 80%;
    left: 75%;
    width: 12%;
    height: 20%;

}

#word_water{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 50%;
    left: 45%;
    color: white;
    font-size: 40px;
    text-align: center;
}

.s_bug{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 55%;
    left: 10%;
    color: white;
    font-size: 40px;
    text-align: center;
}

#word_magnifier{
    font-family: 'PixelMplus', serif;
    position: absolute;
    top: 47%;
    left: 30%;
    color: white;
    font-size: 30px;
    text-align: center;
}

#magnifier{
    position: absolute;
    background: url(Material/magnifier.png)no-repeat;
    background-size: contain;
    top: 40%;
    left: 80%;
    width: 7%;
    height: 10%;

}

#end_info{
    position: absolute; 
    top: 35%; 
    left: 50%; 
    transform: translate(-50%,-100%); 
    color: white; 
    font-size: 60px; 
    font-family: 'PixelMplus', serif;
}

#end_title{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    color: white; 
    font-size: 150px; 
    font-family: 'PixelMplus', serif;
}