@keyframes fadein_watermark {
    from {
        color: rgba(255,255,255,0);
    }
    to {
        color: rgba(200,200,200,0.5);
    }
}
@keyframes fadein_main {
    0%, 30% {
        color: rgba(255,255,255,0);
    }
    100% {
        color: rgba(20,20,20,0.8);
    }
}
@keyframes ink_blot {
    0% {
        opacity: 0.02;
    }
    50% {
        opacity: 0.12;
    }
    80% {
        opacity: 0.08;
    }
    100% {
        opacity: 0.30;
    }
}
@keyframes contact {
    0%, 1.5%, 2.3%,100% {
        bottom: 0px;
    }
    1% {
        bottom: 10px;
    }
    2.1% {
        bottom: 5px;
    }
}
body {
    background-image: url(background/creampaper/creampaper.png);
}
header > span {
    font-family: Tangerine, "Helvetica";
    font-weight: bold;
}
span#watermark {
    color: rgba(200,200,200,0.5);
    font-size: 500px;
    position: fixed;
    top: -1in;
    left: -2in;
    animation-name: fadein_watermark;
    animation-duration: 5s;
}
span#main {
    color: rgba(20,20,20,0.8);
    font-size: 2in;
    position: fixed;
    left: 10%;
    top: 15%;
    animation-name: fadein_main;
    animation-duration: 8s;
}
article {
    position: fixed;
    top: 55%;
    left: 30%;
    font-style: italic;
    font-size: 12pt;
}
article > div {
    text-align: right;
    position: relative;
    padding-right: 1em;
}
p#tagline {
    position: relative;
    right: 2em;
}
p#contact {
    color: rgba(100,100,100,0.7);
    position: relative;
    animation-name: contact;
    animation-duration: 20s;
    animation-delay: 7s;
    animation-iteration-count: infinite;
}
p#contact > a:link {
    text-decoration: none;
    border-bottom: 1px dotted;
    color: rgba(180,180,180,0.7);
    text-shadow: 1px 1px black;
}
img#ink {
    position: fixed;
    top: 4in;
    left: 0in;
    opacity: 0.3;
    animation-name: ink_blot;
    animation-duration: 10s;

}
p::first-letter {
    border-bottom: 1px solid;
}
footer {
    position: fixed;
    right: 1in;
    bottom: 1em;
    font-family: Tangerine;
    font-size: 2em;
}