#table-of-contents-wrapper, #colophon-wrapper {
    background-image: url('../images/pomegranate.png');
    position: relative;
    margin-right: auto;
    margin-bottom: 1.5rem;
    margin-left: auto;
}

#table-of-contents, #colophon {
    font-family: 'Old Standard TT', garamond;
    color: #000000;
}

ol {
    list-style-type: upper-roman;
    font-size: .9rem;
    line-height: 1rem;
    text-transform: uppercase;
}

li {
    padding: .3rem;
}

ol a, ol a:hover {
    border: 0;
}

p {
    font-size: 1rem;
    line-height: 1.5rem;
}

a { 
    color: #4F4F4F;
    text-shadow: 1px 1px #e3ddd5;
    text-decoration: none;
    border-bottom: 1px solid #4F4F4F;
}

a:hover {
    color: #939391;
    border-bottom: 1px solid #939391;
}

h1 {
    font-size: 1.8rem;
    text-shadow: 1px 1px #e3ddd5;
}

h2 {
    text-transform: lowercase;
    font-size: 1.2rem;
    letter-spacing: 0px;
    text-shadow: 1px 1px #e3ddd5;
}

.lacuna-item {
    font-style: italic;
    text-transform: lowercase;
}

.lacuna-item a {
    color: #939391;
}

#table-of-contents-lion-dog {
    float: right;
    margin: 1.4rem;
}

#table-of-contents-lion-dog img {
    width: 100px;
}

@media only screen and (min-width: 501px) {
    #table-of-contents-wrapper, #colophon-wrapper {
        max-width: 800px;
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 100px;
    }

    #table-of-contents, #colophon {
        margin: 0px 140px 0px 140px;
    }
}

@media only screen and (max-width: 500px) {
    #table-of-contents-wrapper, #colophon-wrapper {
        width: 100%;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 50px;        
    }

    #table-of-contents, #colophon {
        padding: 1% 1% 70px 1%;
    }
}