body {
    background-image: url("../images/planks_big_oak.png");
    background-repeat: repeat;
    background-size: 8em;
    image-rendering: pixelated;
    /*background-color: black;*/
}

#mainframe{
    padding: 20px;
}

.hero-unit {
    padding: 16px 20.8px;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 20px;
    color: #ffffff;
    background-color: #00aaaa;
    border: 4px double #ffffff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
   /* box-shadow: 0 0 0 4px #00aaaa; */
}

#output{
    height: 50vh;
    overflow: auto;
}

#inventar{
    padding-top: 1em;
    padding-bottom: 1em;
}

#input{
    padding: 10px;
}

.box2{
    padding: 6px;
}

#subRow{
    flex-direction: column-reverse;
}

#playButton{
    position: absolute;
    bottom: 30px;
    left: 40px;
}
#helpButton{
    position: absolute;
    bottom: 30px;
    right: 40px;
}

.panel{
    box-shadow: 0 0 0 4px #bbbb;
}

.listItem{
    margin-bottom: 5px;
}

.spacer{
    margin: 30px;
}

#clickme{
    z-index: 1;
    background-color: black;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: fixed;

}


img {
    display: block ;
    margin: 0 auto ;
    width: 100%;
    position: center;
}


#startbild{
    background-image: url(../images/candle.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 100vh;
}
#schrift{
    padding-top: 15%;
    padding-left: 2%;
    padding-right: 2%;
}