div.game {
    width: 100%;
    min-width: 200px;
    max-width: 500px;
    position: relative;
    border: 2px solid grey;
    background-color: white;
    margin: auto;
}

div.score {
    width: 20%;
    height: 20%;
    position: absolute;
    right: 5%;
    top: 5%;
}

div.score div.image {
    top: 10%;
    position: relative;
}

div.score div.number {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-family: $code-font-family;
    font-size: 1.35em;
    color: purple;
    bottom: 5%;
    position: absolute;
}

div.hedgehog, div.sheep {
    width: 50%;
    height: 50%;
    position: absolute;
}

div.hedgehog {
    left: 2%;
    top: 2%;
}

div.sheep {
    left: 40%;
    top: 45%;
}

div.sheep div.image {
    top: 10%;
    position: relative;
}

div.bubble {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-family: $font-family-posts;
    font-size: 1.1em;
    position: absolute;
}

div.hedgehog div.bubble {
    bottom: 5%;
}

div.sheep div.bubble {
    bottom: 20%;
}

div.food {
    width: 5%;
    height: 5%;
    position: absolute;
    visibility: hidden;
}

div.wrapper img {
    max-width: 100%;
    max-height: 100%;
}