body {
    font-family: Times;
    font-size: 22pt;
    color: purple;
    background: yellow;
    line-height: 1.5em;
}

h1 {
    color: red;
    font-size: 30pt;
}

/* 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;
}
