html{
    height: 100%;
}
body{
    height: 100%;
    background-image: url('bitifull.jpg');
     background-image: no-repeat;
     background-size: cover;
     z-index: -100;
}




#wrapper{
    
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 40px 1fr 1fr 1fr 1fr 40px;
    grid-template-rows: 100px 1fr 1fr 1fr 1fr 1fr;
 
}
.resetButton{
    grid-row: 4;
    grid-column: 3;
    display: none;
    z-index: 10;
    width: 200px;
    height: 40px;
  
}
#bild{
    width: 30%;
    grid-row: 2;
    grid-column: 3;
}
.loggor{
    width: 30%;
    border-radius: 50%;
}
.box{
    grid-row:3/5;
    grid-column: 3/5;
    border: solid 3px white;
    background-color: rgb(153, 138, 118);
    opacity: 84%;
    z-index: -100;
}
#inputs{
    grid-row:4;
    grid-column: 4;
}
.resultParas{
    grid-row:3;
    grid-column: 4;
    z-index: 100;
    background-color: gb(172, 147, 115);
}

#bildkeeper{
    width: 100%;
    background-color: brown;
    grid-row: 4;
    grid-column: 3/4;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#guessField{
    z-index: 100;
}
#guessCountDisplay {
    font-size: 16px;
    color: black;
    margin-top: 10px;
}

#main-head {
grid-row: 3;
grid-column: 3/3;
display: flex;
justify-content: center;


}