div.title {
    position: relative;
    margin: .072em 0;

    font: calc(30px + 8vw)/1.1 Lobster, serif;
    transform: rotate(-1deg);
}
@media (min-width: 1160px) {
    div.title {
        font-size: 123px;
    }
}
div.title:before,
div.title:after {
    content: attr(data-title);
    position: absolute;
    width: 100%;
    top: 1px;
    left: -1px;
    padding-bottom: .05em;
    pointer-events: none;

    text-align: center;
    color: transparent;
    background: linear-gradient(179deg, #ebca85 20%, #685230, #a28247 90%);
    -webkit-background-clip: text;
}
div.title:after {
    background: linear-gradient(103deg, transparent 30px, #fff 40px, transparent 45px, transparent 55px, #fff 60px, transparent 100px) no-repeat -90px 0;
    background-size: 100px 100%;
    -webkit-background-clip: text;
    animation: quing 3s ease-in;
}
@keyframes quing {
    to { background-position-x: calc(100% + 100px); }
}
div.title a {
    text-decoration: none;
}

h1, div.title > h2 {
    color: #9e814c;

    font-size: inherit;
    font-weight: inherit;
    text-align: center;
    text-shadow:
        0 1px 0 rgb(158, 129, 76),
        0 2px 0 rgb(143, 116, 70),
        0 3px 0 rgb(130, 105, 64),
        0 4px 0 rgb(115, 93, 57),
        0 5px 0 rgb(102, 82, 51),
        -1px -1px 1px #fffccc,
        0 6px 1px rgba(0, 0, 0, 0.0980392),
        0 0 5px rgba(0, 0, 0, 0.0980392),
        0 1px 3px rgba(0, 0, 0, 0.298039),
        0 3px 5px rgba(0, 0, 0, 0.2),
        0 5px 10px rgba(0, 0, 0, 0.247059),
        0 10px 10px rgba(0, 0, 0, 0.2),
        0 20px 20px rgba(0, 0, 0, 0.14902)
    ;
}
div.title.h2 {
    font-size: 100px;
}
div.title > h2 {
    margin: 0;
    padding: 0;
}
div.title > h2 > a {
    text-decoration: none;
}
div.title.h2:after {
    animation: none;
}
div.title.h2:hover:after {
    animation: quing .7s;
}
