* {
    font-family: "Minion Pro", "Georgia", "Times New Roman", serif;
}
/*I know what you're thinking: Why go through this much hassle for a background image?
Well, we want to give the background a tasteful bur. But there's a problem. Due to the
way blurs work, the blur would have a transparent edge, a "fade" if you will. I'd rather
this BG appear solid, even on the edges. If we'd straight '*/
.backgroundimg {
    /*This is required for Z-Index and positioning*/
    position: fixed;
    /*The blur will mess up BG border opacity, so the BG container will be resized
    a bit above 100% (100+50) with it moved top left at half of the offset.*/
    left: -25%;
    top: -25%;
    width: 150%;
    height: 150%;
    /*By default the BG will take the same Z-Index as all other content. With its
    given width and height, this will mess things up. Setting the Z-Index down will
    ensure the BG takes on a BG role.*/
    z-index: -1;
    display: block;
    background-image: url("../images/top13.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(10px);
}
/*This is used to give the actual content that lovely light blue backing.*/
.container {
    margin: auto;
    width: 90%;
    max-width: 900px;
    padding: 24px;
    background-color: rgba(217, 233, 246, 0.95);
}

p {
    text-align: justify;
}
img {
    align-self: center;
    width: 100%;
    border:5px solid white;
}

figure {
    margin: auto;
    width: 90%;
    max-width: 800px;
}
figcaption {
    font-style: italic;
}

/*And now for the table work*/
table {
    margin: 36px auto;
    border-collapse: collapse;
    border-style: hidden;
    /**/
}
th, td {
    padding: 6px;
}
th {
    background-color: rgba(134, 192, 240, 1);
    color: white;
}
td {
    border: 2px solid rgba(134, 192, 240, 1);
}
tbody > tr:hover {
    background-color: rgba(134, 192, 240, 0.5);
}
td:hover {
    background-color: rgba(134, 192, 240, 1);
    color: white;
}