body{background-color:rgb(77,109,109);}

*{left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;}
          

#player{position:absolute;
        width: 50px;
        height: 100px;
        background-image: url('assets/witch.png');
        z-index: 1; /*verander alle positions later op basis van absolute om dit te laten werken*/
        transition: 2s;
        }
		
#fritz{position:absolute;
        width: 50px;
        height: 100px;
        background-image: url('assets/hero.png');
        transition: 2s;
        }	

#hash{position:absolute;
      width: 50px;
      height: 100px;
      background-image: url('assets/hero.png');
      transition: 2s;
      }	

#road0,#road1,#road2,#road3,#road4{position:static;
        width: 30px;
        height: 100px;
        background-image: url('assets/road.png');
        z-index: -1;
        }

#forest,#town,#church,#cave,#graveyard{
        width: 50px;
        height: 50px;
        background-image: url('assets/location.png');
        display: inline-block;
        }         

#chest{position:absolute;
        width: 50px;
        height: 50px;
        background-image: url('assets/chest.png');
        }

#info{position:absolute;
        width: 300px;
        height: 200px;
        background-color: rgb(37,69,69); 
        top: 730px;
        left: 200px;
        -webkit-box-shadow: 1px 1px 10px 5px black;
        -moz-box-shadow: 1px 1px 10px 5px black;
        box-shadow: 1px 1px 10px 5px rgb(17,49,49);
        border: solid 1px black;
        }
        
#info p{position:relative;
        font-size:3em;
        font-family: 'Niconne', cursive;
        font-weight: bold;
        text-shadow:3px 3px 0 rgba(0,0,0,0.2);
        left: 40px;
        top: -20px;
        }

#log{color:white;
     position: absolute;
     font-family: 'Niconne', cursive;
     font-size: 2em;
     left:30%;
     line-height: 200%;}