#sceneContainer {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: center;
    width:700px;
    background-image: url("./graphics/scene_backdrop.png");
    background-size: 100% 100%;
}

#animalContainer {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 200px;
    justify-content: center;
    align-items: flex-end;
    align-content: flex-end;
}

#houseContainer {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 350px;
    justify-content: center;
    align-items:center;
    align-content:center;
}

#brickContainer {
    display:flex;
    flex-wrap:wrap-reverse;
    width:200px;
    height:100%;
    /*min-height:300px;*/
    background-color:grey;
    justify-content: space-between;
    align-items:flex-start;
    align-content:flex-start;
}


.roof,
 .roofIncomplete,
 .roofComplete {
    width:300px;
    height:200px;
    background-image: url('./graphics/roof.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
 }
 
 .roofImage,
 .roofImageIncomplete {

     width: 300px;
     height: 200px;
 }

.roofImageIncomplete { opacity: 0.2 }

 .roofIncomplete {
     opacity: 0.2;
 }
 
.wordBrickContainerComplete,
.wordBrickContainerIncomplete {
    /*width: 4.0em;*/
    height: 2.5em;
    display:flex;
    align-items:center;
    justify-content: center;
    border-radius: 0px;
    margin: 0px;
    flex-grow:1;
}

.wordBrickContainerComplete {
    background-size: 100% 100%;
    background-image: url("./graphics/brick_background.png");
}


.brick, 
.brickIncomplete,
.brickFirstTry,
.brickMultipleTries,
.brickSkipped
{
    background-size: 100% 100%;
    /*width: 4.0em;*/
    height: 2.5em;
    display:flex;
    align-items:center;
    justify-content: center;
    border-radius: 5px;
    margin: 0px;
    flex-grow:1;
}

.brickIncomplete {
    opacity: 0.10;
    background-image: url('./graphics/brick_empty.png');
}

.brickFirstTry {
    background-image: url('./graphics/brick_green.png');
}

.brickMultipleTries {
    background-image: url('./graphics/brick_yellow.png');
}

.brickSkipped {
    background-image: url('./graphics/brick_orange.png');
}

.brickText, 
.brickTextFirstTry,
.brickTextMultipleTries,
.brickTextIncomplete,
.brickTextSkipped {
    color:black;
    font-size: 1.0em;
    border-radius: 5px;
    margin: .5em;
    padding: 0.25em;
    font-weight: bold;
}

.brickTextFirstTry {
    background-color: rgba(0,128,0,.7);
}

.brickTextMultipleTries {
    background-color: rgba(255,200,0,.7);
}

.brickTextSkipped {
    background-color: rgba(255,100,0,.7);
}

.brickTextIncomplete {
    visibility: hidden;
}