.bouncy {
    position: absolute;

    background-color:#000;
    -webkit-mask-image: url(/assets/DVD_logo.svg);
    mask-image: url(/assets/DVD_logo.svg);
    background-size:contain;
    background-repeat:no-repeat;

    transition: background-color;
    transition-duration: 1s;
}

.sakura {
    top: calc(100% - 96px - 30px);
    left: -5px;
    position: absolute;
    background-image: url(/assets/sakura.gif);
    width: 144px;
    height: 96px;
    pointer-events: auto;
    user-drag: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    transition: transform 80ms ease-out;
}

.sakura:active {
    transform: scale(0.9);
}

.particle {
    user-select: none;
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.sakura:hover {
    cursor: url(/assets/alternate-cursor.png) 32 16, pointer;
}

@media (max-height: 390px) {
    .sakura {
        top: calc(100% - 96px - 10px);
        left: calc(100% - 144px + 5px);
    }
}
