


.dropshadow {
                width: 15em;
                border: 1px solid #333333;
                box-shadow: 8px 8px 5px #444444;
                padding: 8px 12px;
                background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
             }



/* Transitions */
@keyframes appear
{
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes appear
{
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in-out
{
    0%, 100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

@-webkit-keyframes fade-in-out
{
    0%, 100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

@keyframes rumble
{
    0%, 100% {
    }

    50% {
        transform: translateY(-0.2em)
    }
}

@-webkit-keyframes rumble
{
    0%, 100% {
    }

    50% {
        -webkit-transform: translateY(-0.2em)
    }
}

@keyframes shudder
{
    0%, 100% {
    }

    50% {
        transform: translateX(0.2em)
    }
}

@-webkit-keyframes shudder
{
    0%, 100% {
    }

    50% {
        -webkit-transform: translateX(0.2em)
    }
}

mark
{
    color: rgba(0, 0, 0, 0.6);
    background-color: #ff9;
}

ins
{
    color: rgba(0, 0, 0, 0.6);
    background-color: hsla(45, 100%, 90%, 0.5);
    /* Yellowed correction fluid */
    border-radius: 0.5em;
    box-shadow: 0em 0em 0.2em hsl(45, 100%, 80%);
    text-decoration: none;
}

del
{
    background-color: #000;
    /* Censored text */
    text-decoration: none;
}

/* Who am I to tell authors not to use non-standard tags? */
center
{
    text-align: center;
    margin: 0 auto;
    width: 60%;
}

blink
{
    text-decoration: none;
    animation: fade-in-out 1s steps(1, end) infinite alternate;
    -webkit-animation: fade-in-out 1s steps(1, end) infinite alternate;
}

/* Secondary text styles, for general use by Twine authors */
outline
{
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

shadow
{
    text-shadow: 0.08em 0.08em 0.08em #000;
}

condense
{
    letter-spacing: -0.08em;
}

expand
{
    letter-spacing: 0.1em;
}

box
{
    border: 1px solid #222;
    border-radius: 0.1em;
}

blur
{
    color: transparent;
    text-shadow: 0em 0em 0.08em #000;
}

blurrier
{
    color: transparent;
    text-shadow: 0em 0em 0.2em #000;
}

blurrier::selection {
    background-color: transparent;
    color: transparent;
}

blurrier::-moz-selection {
    background-color: transparent;
    color: transparent;
}

smear
{
    color: transparent;
    text-shadow: 0em 0em 0.02em rgba(0, 0, 0, 0.75), -0.2em 0em 0.5em rgba(0, 0, 0, 0.5), 0.2em 0em 0.5em rgba(0, 0, 0, 0.5);
}

mirror
{
    display: inline-block;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

upsidedown
{
    display: inline-block;
    transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}

/* Animated effects follow */
fadein-out
{
    text-decoration: none;
    animation: fade-in-out 2s ease-in-out infinite alternate;
    -webkit-animation: fade-in-out 2s ease-in-out infinite alternate;
}

rumble
{
    -webkit-animation: rumble linear 0.1s 0s infinite;
    animation: rumble linear 0.1s 0s infinite;
    display: inline-block;
}

shudder
{
    -webkit-animation: shudder linear 0.1s 0s infinite;
    animation: shudder linear 0.1s 0s infinite;
    display: inline-block;
}
