body {
    background-color: #FFFFEE;
    color: #800000;
}

td{
    border: 2px solid #800000;
    padding: 10px 6px;
}

details.sticky {
    background-color: #f0e0d6;
    line-height: 1.25;
    box-shadow: 1px 1px 4px #3b3b3b87;
}
details.sticky:hover {cursor: grab;}
details.sticky:active {
    cursor: grabbing;
    box-shadow: 2px 2px 6px #484848;
}

.sticky {
    font-family: monospace;
    font-size: 16px;
    position: absolute;
    padding: 0 10px;
}

details.sticky > summary {
    font-size: 20px;
    font-weight: bold;
}
details.sticky > summary::before {
    content: "📌 ";
}

.shaking {
    animation: light_shake 0.25s;
    animation-iteration-count: infinite;
}

@keyframes light_shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-0.35deg); }
    20% { transform: translate(-3px, 0px) rotate(0.35deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(0.35deg); }
    50% { transform: translate(-1px, 2px) rotate(-0.35deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-0.35deg); }
    80% { transform: translate(-1px, -1px) rotate(0.35deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-0.35deg); }
}

@keyframes hard_shake {
    0% { transform: translate(2px, 2px) rotate(0deg); }
    10% { transform: translate(-2px, -4px) rotate(-1deg); }
    20% { transform: translate(-6px, 0px) rotate(1deg); }
    30% { transform: translate(6px, 4px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    50% { transform: translate(-2px, 4px) rotate(-1deg); }
    60% { transform: translate(-6px, 2px) rotate(0deg); }
    70% { transform: translate(6px, 2px) rotate(-1deg); }
    80% { transform: translate(-2px, -2px) rotate(1deg); }
    90% { transform: translate(2px, 4px) rotate(0deg); }
    100% { transform: translate(2px, -4px) rotate(-1deg); }
}

@keyframes gradient {
      0% {background-color: #f0e0d6;}
    100% {background-color: #000000;}
}

details[open] > summary::marker {
    display: none;
    content: "[-]";
}
details > summary::marker {
    display: none;
    content: "[+]";
}
summary:hover {
    text-decoration: underline;
    cursor: pointer;
}

@-moz-document url-prefix() {
    details[open] > summary {
        display: inline flow-root list-item !important; /* that's the only way to keep the '[-]' AND make the summary wrap text and no, I have no idea why... */
        margin: 15px 0 0 0;
    }
    details:not([open]) > summary {
        display: inline flow-root list-item !important;; /* same idea as before, only this time with '[+]' */
        margin: 15px 0 30px 0;
    }
}
details[open] > summary {
    display: inline list-item; /* that's the only way to keep the '[-]' AND make the summary wrap text and no, I have no idea why... */
    display: inline;
    margin: 15px 0 0 0;
}
details:not([open]) > summary {
    display: list-item; /* same idea as before, only this time with '[+]' */
    display: inline;
    margin: 15px 0 30px 0;
}

/* set initial position of stickies */
#sticky_1 {top: 25px;left: 25px;}
#sticky_2 {top: 75px;left: 525px;}
#sticky_3 {top: 238px;left: 505px;}
#sticky_4 {top: 405px;left: 100px;}
#sticky_5 {top: 319px;left: 536px;}
#sticky_6 {top: 320px;left: 740px;}
#sticky_7 {top: 406px;left: 659px;}
#sticky_8 {top: 238px;left: 904px;}
#explosion_sticky {top: 547px;left: 793px;}

.explosions * {
    position: absolute;
}