.dm-serif-display-regular {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
}
.dm-serif-text-regular {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;
}
html {
    font-family: Georgia, serif;
    font-size: 12pt;
}
body {
    background-color: #dddddd;
    min-height: 100%;
    margin: 0;
}
#entire-page {
    max-width: 40rem;
    height: 100%;
    margin: 0 auto;
    background-color: #ffffff;
}
hr {
    margin: 0.5rem 2rem;
    color: #f0f0f0;
}
.desktop-only {
    display: none;
    visibility: hidden;
}
.fancy {
    font-family: "DM Serif Text", Georgia, serif;
    font-size: 1.8rem;
    line-height: 1;
}
#header {
    width: 100%;
    padding: 2rem;
}
#header td {
    height: 5rem;
}
#logo {
    width: 12rem;
}
#logo img {
    height: 100%;
}
#banner {
    background: url("../images/golden_gate_bridge.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;
}
#content {
    background-color: #ffffff;
    width: 100%;
    padding: 1rem 2rem;
    line-height: 1.4;
}
#nav-bar {
    width: 100%;
    margin-top: -0.5rem;
    padding: 0 2rem;
    font-family: "DM Serif Display", "DM Serif Text", Georgia, serif;
    font-size: 2.4rem;
    line-height: 1.1;
    text-align: center;
}
#nav-bar.mobile-ok {
    display: block;
}
#nav-bar tbody {
    display: block;
}
#nav-bar tr {
    display: block;
}
#nav-bar td {
    display: inline;
}
#nav-bar a:link, #nav-bar a:visited {
    color: #000000;
    text-decoration: none;
}
#nav-bar a:hover {
    color: #000000;
    text-decoration: underline;
}
#nav-bar a:active {
    color: #ff0000;
    text-decoration: none;
}
#nav-bar .selected a {
    color: #ff0000;
}
#content h1 {
    margin: -1rem 0 1rem;
    text-align: center;
    font-family: "DM Serif Display", "DM Serif Text", Georgia, serif;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.2;
}
#content h2 {
    font-family: "DM Serif Text", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 300;
    margin: 0.5rem 0 0.3rem;
    line-height: 1.2;
}
#content h3 {
    font-family: "DM Serif Text", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 200;
    margin: 0.5rem 0 0.2rem;
    line-height: 1.2;
}
#content ul {
    margin: 0.2rem 0 0.7rem;
}
#content p {
    margin: 0.4rem 0 1.0rem;
}
#content .center-img {
    margin: 1rem 0;
    max-width: 100%;
    text-align: center;
}
#content .center-img img {
    margin: 0 auto;
    width: 25rem;
    max-width: 100%;
    display: inline-block;
}
#content .center-img p {
    font-style: italic;
    font-size: 0.8em;
    margin: 0.3rem 0 1rem;
}
#nav-stack {
    list-style: none;
    margin-top: 1rem;
    margin-left: calc(-1rem + 3vw);
    font-family: "DM Serif Display", "DM Serif Text", Georgia, serif;
    font-size: 2.4rem;
}    
#nav-stack .selected {
    display: none;
    visibility: hidden;
}
#nav-stack a:link, #nav-stack a:visited {
    color: #000000;
    text-decoration: underline;
}
#nav-stack a:hover {
    color: #000000;
    text-decoration: underline;
}
#nav-stack a:active {
    color: #ff0000;
    text-decoration: underline;
}
#footer-img {
    height: 30rem;
    background: url("../images/luxembourg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}
@media screen and (min-width: 50rem) {
    #entire-page {
	width: 50rem;
	max-width: 50rem;
    }
    html {
	height: 100%;
    }
    body {
	background-color: #dddddd;
	height: 100%;
    }
    #header {
	padding: 2rem;
    }
    #header td {
	height: 6rem;
    }
    #nav-bar {
	display: table;
    }
    #nav-bar.mobile-ok {
	display: table;
    }
    #nav-bar tbody {
	display: table-row-group;
    }
    #nav-bar tr {
	display: table-row;
    }
    #nav-bar td {
	display: table-cell;
    }
    #content {
	padding: 0 3rem;
	margin-top: 2rem;
	padding-bottom: 3rem;
    }
    #content-right-column {
	width: 24rem;
	padding-left: 2rem;
	padding-right: -1rem;
	/*padding-bottom: 6rem;*/
    }
    .mobile-only {
	display: none;
	visibility: hidden;
    }
    .desktop-only {
	visibility: visible;
    }
    .desktop-only.block {
	display: block;
    }
    .desktop-only.inline {
	display: inline;
    }
    .desktop-only.table {
	display: table;
    }
}