body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color:rgb(12, 56, 81);
    background-color: rgb(130, 149, 160);
}

header {
    background-color: rgb(12, 56, 81);
    color: rgb(130, 149, 160);
    text-align: center;
    padding: 0.625em 1.25em 2.1875em;
    box-shadow: 0 0 0.4375em white;
    border-style:ridge;
}
header h1 {font-family: "Petit Formal Script", "Sirivennela", "Tangerine", cursive;}

table {border: 0.125em solid rgb(130, 149, 160); border-collapse: collapse;}
table caption {font-weight: bold; margin-bottom: 0.125em;}
table th, td {
    border-bottom: 0.0625em solid rgb(130, 149, 160);
    border-right: 0.0625em solid rgb(130, 149, 160);
    padding: 0.3125em 0.625em;
    font-size: small;
}
table th {text-align: left;}

h3 {
    font-family: "Petit Formal Script", "Sirivennela", "Tangerine", cursive;
    color: rgb(130, 149, 160);
    padding: 0.625em 1.25em 0;
    text-align: center;
    text-decoration: underline double;
}

#olympicimg, #britannicimg {float: left; box-shadow: 0 0 0.4375em white; border-radius: 0.3125em; margin-right: 0.6em;}
#titanicimg {box-shadow: 0 0 0.4375em white; border-radius: 0.3125em; float: right; margin-left: 0.6em;}

#olympicinfo, #titanicinfo, #britannicinfo {
    background-color: rgb(12, 56, 81);
    color: rgb(130, 149, 160);
    border-radius: 0.3125em;
}

#olympicinfo p, #titanicinfo p, #britannicinfo p {
    padding: 0 0.625em;
    text-align: justify;
    word-spacing: 0.3125em;
    margin: auto;
}
#olympicinfo p {padding: 1.5em 0.625em;}
#britannicinfo p {padding: 0.625em 0.625em;}

#olympicinfo table {margin: 2.1em auto;}
#titanicinfo table {margin: 0.8em auto;}
#britannicinfo table {margin: 1.3em auto;}

#summary {text-align: center;}
#summary, #legacy {border-bottom: double;}
#awkward, #movingon {
    text-align: center;
    border-bottom: double;
}
#awkward h4, #movingon h4 {text-align: left;}
#awkward img, #movingon img {box-shadow: 0.1875em 0.1875em 0.4374em black; border-radius: 0.3125em;}

/* from W3Schools' CSS Tutorial */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.linkbutton {
    display: inline-block;
    background-color: rgb(130, 149, 160);
    color: rgb(12, 56, 81);
    padding: 0.3125em 0.625em;
    text-align: center;
    text-decoration: none;
}
.linkbutton:visited {background-color: darkgray; color: dimgray;}
.linkbutton:hover, .linkbutton:active {background-color: firebrick; color: white;}