body {
    margin: 0px;
    padding: 0px;
}

img, svg, .costume-part, .jim-default-costume, #eyes-drop, #potrait-inner-shadow {
    pointer-events: none;
    user-select: none;
}

#portrait-holder {
    width: 200px;
    height: 150px;
    background-color: #3d89c7;
}

#potrait-inner-shadow {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 160px;
    height: 120px;
    box-shadow: inset 0 0 7px #000000;
    z-index: 1;
}

.jim-default-costume {
    background: url("../img/default_costume_spritesheet.png") no-repeat;
}

#jim-no-eyes {
    position: absolute; /*Necessary for z-index to work*/
    z-index: 5;
    background-position: -2px -0px;
    width: 200px;
    height: 150px;
}

#jim-eye-left {
    position: absolute;
    top: 58px;
    left: 78px;
    z-index: 3;
    transition-duration: 0.05s;
    transition-property: transform;
    background-position: -46px -152px;
    width: 8px;
    height: 9px;
}

#jim-eye-right {
    position: absolute;
    top: 59px;
    left: 99px;
    z-index: 3;
    transition-duration: 0.05s;
    transition-property: transform;
    background-position: -56px -152px;
    width: 6px;
    height: 6px;
}

#eyes-drop {
    position: absolute;
    top: 57px;
    left: 78px;

    width: 30px;
    height: 10px;
    background-color: white;

    z-index: 2;
}

#eyes-drop-faceoff {
    position: absolute;
    top: 57px;
    left: 78px;

    width: 30px;
    height: 10px;
    background-color: white;

    z-index: 6;
    opacity: 0;
}

.food-item {
    position: absolute;
    z-index: 14;
    opacity: 0;
    transition-property: left;

    background: url("../img/food/food_spritesheet.png") no-repeat;
}
#burrito-sprite {
    width: 62px;
    height: 26px;
}
#cupcake-sprite {
    width: 30px;
    height: 29px;
}


#mouth-gape {
    z-index: 6;
    position: absolute;
    top: 86px;
    left: 85px;
    background-position: -26px -152px;
    width: 18px;
    height: 16px;
}
#mouth-chin {
    position: absolute;
    top: 86px;
    left: 85px;
    z-index: 8;
}

#mouth-chin .jim-default-costume {
    position: absolute;
    z-index: 9;

    background-position: -2px -152px;
    width: 22px;
    height: 20px;
}

.eyelid-sprite {
    position: absolute;
    z-index: 3;
    top: 58px;
    left: 76px;
    opacity: 0;
    width: 32px;
    height: 7px;

    background: url("../img/eyelids/eyelids_spritesheet.png") no-repeat;
}

.debug-cell {
    border: 1px black solid;
    display: inline;
    padding: 10px;
    background-color: gray;
}

.puke-particle {
    display: inline-block;
    position: absolute;

    width: 7px;
    height: 7px;

    z-index: 5;

    transition-duration: 0.05s;
}

#arrow-left {
    transform: rotate(180deg);
    position: absolute;
    top: 110px;
    left: 25px;
    z-index: 13;
    transition-duration: 0.2s;
    opacity: 0;
    mix-blend-mode: screen;

    height: 20px;
}

#arrow-left-blur {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    filter: blur(5px);
    z-index: 12;
}


#arrow-right {
    position: absolute;
    top: 110px;
    left: 140px;
    z-index: 13;
    transition-duration: 0.2s;
    opacity: 0;
    mix-blend-mode: screen;
}

#arrow-right-blur {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    filter: blur(5px);
    z-index: 12;
}

#border {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 13;
}

#vis-eat-area {
    position: absolute;
    top: 80px;
    left: 45px;

    width: 67px;
    height: 20px;
    background-color: red;
    z-index: 9;
    opacity: 0;
}

.costume-part {
    background: url("../img/costumes/costumes_spritesheet.png") no-repeat;
}

#costume-body-wizard {
    position: absolute;
    top: 3px;
    left: 42px;

    z-index: 7;
    opacity: 0;
    background-position: -2px -144px;
    width: 142px;
    height: 142px;
}

#costume-jaw-wizard {
    position: absolute;
    left: -9px;
    top: 5px;

    z-index: 9;
    opacity: 0;
    background-position: -40px -534px;
    width: 36px;
    height: 44px;
}

#costume-body-santa {
    position: absolute;
    top: 3px;
    left: 42px;

    z-index: 7;
    opacity: 0;
    background-position: -2px -0px;
    width: 142px;
    height: 142px;
}

#costume-jaw-santa {
    position: absolute;
    left: -9px;
    top: 5px;

    z-index: 9;
    opacity: 0;
    background-position: -2px -531px;
    width: 36px;
    height: 44px;
}

#costume-body-blackmetal {
    position: absolute;
    top: 15px;
    left: 44px;

    z-index: 7;
    opacity: 0;
    background-position: -2px -288px;
    width: 139px;
    height: 129px;
}

#costume-jaw-blackmetal {
    position: absolute;
    left: 0px;
    top: 0px;

    z-index: 9;
    opacity: 0;
    background-position: -103px -534px;
    width: 22px;
    height: 20px;
}

#costume-body-faceoff {
    position: absolute;
    top: 19px;
    left: 72px;

    z-index: 7;
    opacity: 0;
    background-position: -72px -419px;
    width: 62px;
    height: 113px;
}

#costume-jaw-faceoff {
    position: absolute;
    left: 0px;
    top: 0px;

    z-index: 9;
    opacity: 0;
    background-position: -78px -534px;
    width: 23px;
    height: 21px;
}


#costume-body-accident {
    position: absolute;
    top: 19px;
    left: 67px;

    z-index: 7;
    opacity: 0;
    background-position: -2px -419px;
    width: 68px;
    height: 110px;
}

#costume-jaw-accident {
    position: absolute;
    left: -2px;
    top: 0px;

    z-index: 9;
    opacity: 0;
    background-position: -127px -534px;
    width: 15px;
    height: 18px;
}

#costume-accident-flames {
    position: absolute;
    left: 120px;
    top: 13px;

    z-index: 6;
    opacity: 0;

    transform: scaleX(-1);
}


.snowflake-particle {
    position: absolute;
    transition-duration: 0.2s;
}