style.css

.case {
    background: red;
    height: 600px;
    width: 400px;
    margin: 10px;
    padding: 10px;
    border: solid 1px black;
}

.pockey {
    left: -80px;
    position: absolute;
}
.pockey.c1 {
    top: 310px;
    transform: rotate(85deg);
}
.pockey.c3 {
    top: 320px;
    left: -85px;
    transform: rotate(70deg);
}
.pockey.c2 {
    top: 320px;
    transform: rotate(70deg);
}
.pockey.c4 {
    top: 322px;
    transform: rotate(91deg);
}
.pockey.c6 {
    top: 320px;
    left: -90px;
    transform: rotate(85deg);
}
.pockey.c5 {
    top: 320px;
    transform: rotate(100deg);
}
.pockey.c7 {
    top: 320px;
    transform: rotate(65deg);
}
.pockey.c8 {
    top: 320px;
    transform: rotate(63deg);
}
.pockey.c9 {
    top: 307px;
    transform: rotate(120deg);
}
.pockey.c10 {
    top: 320px;
    transform: rotate(125deg);
}
.pockey.c11 {
    top: 320px;
    transform: rotate(113deg);
}
.pockey.c12 {
    top: 318px;
    left: -55px;
    transform: rotate(100deg);
}
.pockey.c13 {
    top: 317px;
    left: -102px;
    transform: rotate(89deg);
}
.pockey.c14 {
    top: 310px;
    left: -98px;
    transform: rotate(80deg);
}
.pockey.c15 {
    top: 320px;
    transform: rotate(120deg);
}

.logo-str {
    position: absolute;
    color: white;
    font-size: 100px;
    font-weight: bold;
    top: 207px;
    left: 66px;
}

.pockey div {
    float: left;
}

.stick {
    height: 14px;
    width: 150px;
    background: rgb(226, 146, 0);
    margin-top: 1px;
    border-radius: 4px 0 0 4px;
    box-shadow: inset 0px -3px 6px;
}

.chocolate {
    height: 16px;
    width: 450px;
    background: #7c1111;
    border-radius: 0 6px 6px 0;
    box-shadow: inset 0px -7px 20px;
}