* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: #444;
}

#main {
    position: relative;
    margin: 20px auto;
    background: #666;
    border-radius: 72px;
    overflow: hidden;
}

.thing {
    position: absolute;
}

.slime {
    z-index: 1;
    background: url("slime.png") no-repeat;
}

.item {
    z-index: 2;
}

.item.food {
    background: url("food.png") no-repeat;
}

.item.toy {
    background: url("toy.png") no-repeat;
}

.item.bed {
    background: url("bed.png") no-repeat;
}

.item.plant {
    background: url("plant.png") no-repeat;
}

#showGoals:checked + #main .goal {
    z-index: 2;
    border: 1px dotted orange;
}

#showGoals:checked + #main .ultimate {
    z-index: 2;
    border: 1px solid orange;
}

#moodmap {
    position: relative;
    margin: 20px auto;
    border: 1px solid white;
    border-radius: 1000px;
}

#moodmap .mood {
    z-index: 1;
    border: 1px solid white;
    border-radius: 100px;
    background: white;
}

#moodmap .goal {
    border: 1px solid white;
    border-radius: 100px;
}