body{
    background-color: #edc8a0;
}





.game-scenes{
    margin: 0px auto;
    display: flex;
    width: 1024px;
    height: 768px;
    flex-wrap: wrap;
    border-left: #291800 solid 3px;
    border-right: #291800 solid 3px;
}



/* character */

#mycharacter{
    height: 320px;
    margin: auto;
    position: absolute;
    top: 450px;
    left: 40%;
}


/* arrow */
.arrow-buttons{
    margin: 0 100px;

}

.arrow-buttons img{
    width: 150px;
    position: absolute;
    top: 400px;
}

.rightarrow{
    right: 100px;
    rotate: 180deg;
}

/* scene backgrounds */

#bedroom, #livingroom, #bathroom, #kitchen {
    background-size: cover; /* or 'contain' */
    width: 1024px;
}


#bedroom{
    background-image: url(../images/bedroom_bg.png);
    background-repeat: no-repeat;
    display: none;
}

#livingroom{
    position: relative;
    background-image: url(../images/livingroom_bg.png);
    background-repeat: no-repeat;
    display: none;
}

#bathroom{
    background-image: url(../images/bathroom_bg.png);
    background-repeat: no-repeat;
    display: none;
}

#kitchen{
    background-image: url(../images/kitchen_bg.png);
    background-repeat: no-repeat;
    display: none;
}

#game-over{
    display: none;
    align-items: center;
    flex-direction: column;
    margin: auto;
    background-color: white
}

#playing{
    display: block;
}


/* fridge */

#closedfridge{
    display: block;
   
}

#openfridge{
    display: none;
}

#apple{
    display: none;
    position: absolute;
    top: 0;
}

#duck{
    position: absolute;
    top: 0;
    left: auto;
}

#ball {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; /* keep it above background */
}






/* bar */

#barHolder {
    background-color: rgb(255, 0, 0);
    width: 200px;
    height: 15px;
}

#hungerbar {
    background-color: rgb(0, 255, 0);
    width:100%;
    height: 15px;
    transition: width 1s;
}

#happybar {
    background-color: rgb(0, 255, 0);
    width:100%;
    height: 15px;
    transition: width 1s;
}


#cleanbar {
    background-color: rgb(0, 255, 0);
    width:100%;
    height: 15px;
    transition: width 1s;
}

#restbarHolder {
    background-color: rgb(255, 0, 0);
    width: 200px;
    height: 15px;
}
#restbar {
    background-color: rgb(0, 255, 0);
    width:100%;
    height: 15px;
    transition: width 1s;
}


#healthbar {
    background-color: rgb(0, 255, 0);
    width:100%;
    height: 15px;
    transition: width 1s;
}


#entertainmentbar {
    background-color: rgb(0, 255, 0);
    width:100%;
    height: 15px;
    transition: width 1s;
}




.game-UI{
    margin: auto;
    background-color: rgb(254, 252, 224);
    width: 1024px;
    padding-bottom: 20px;
    border-left: #291800 solid 3px;
    border-right: #291800 solid 3px;
}

.stats{
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
}

button{
    margin: 10px auto;
	font-size: larger;
	padding: 5px 10px;
	border: #bca576 solid 2px;
	border-radius: 1em;
	background-color: #f9e99a;
	color: #291800;
	font-weight: bold;
}

#musicicon{
    width: 50px;
    position: absolute;
    top: 10px;
    right: 5%;
}