body { 
    max-width: 800px;
    min-width: 576px;
    width: 90%; 
    margin: 1em auto; 
    font-size: 1em; 
    background-image: url('https://assets.biblemapsplus.com/mountainwallpaperlakeforest.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.menu {
    overflow: hidden;
    #position: -webkit-sticky; /* Safari */
    #position: sticky;
    #top: 0;
    padding-top: 1px;
    padding-left: 2%;
    padding-right: 2%;
    width: 96%; /* Your element needs a fixed width */
    display: flex;
    justify-content: center
}

.menu-item {
    float: left;
    list-style-type: none;
}

.menu-item a {
    display: inline-block;
    color: white;
    padding: 13px 15px 13px 15px;
    text-decoration: none;
}

/*.menu-item a:hover {*/
    /*background-color: slategray;*/
/*}*/

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background: linear-gradient(0deg,rgb(77,77,77, 0.98) 0%, rgb(92, 92, 92, 0.98) 16%, rgb(125, 125, 125, 0.98) 50%, rgb(179, 179, 179, 0.98) 95%, rgba(230, 230, 230, 0.5) 100%);
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: linear-gradient(rgba(103, 134, 134, 0.98) 0%, rgba(87, 109, 109, 0.98) 65%, rgba(78, 104, 104, 0.98) 100%);
    
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: slategrey;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.bg-green-85 {
    background: rgba(0, 102, 102, 0.85);
}

.bg-green-95 {
    background: rgba(0, 102, 102, 0.95);
}

.bg-green-grad {
    background: #036767;
    background: linear-gradient(0deg,rgba(3, 103, 103, 1) 0%, rgb(27, 111, 111) 16%, rgb(38, 122, 122) 50%, rgb(147, 202, 204) 95%, rgba(230, 230, 230, 1) 100%);
    box-shadow: 0 4px 5px 1px rgba(0,0,0,0.3);
}

.bg-green-grad-2 {
    background: #698282;
    background: linear-gradient(0deg,rgba(105, 130, 130, 0.85) 0%, rgba(53, 122, 122, 0.85) 14%, rgba(0, 102, 102, 0.85) 100%);
}

.float-left {
    float: left
}

.valign-top {
    vertical-align: top
}

.reset {
    clear: both;
}

.no-deco {
    text-decoration: none;
}

.txt-ctr {
    text-align: center;
}

.color-white {
    color: white
}

.mgn-auto {
    margin: auto
}

.mgn-0 {
    margin: 0.5em
}

.mgn-1 {
    margin: 1em
}

.mgn-2 {
    margin: 2em
}

.mgn-3 {
    margin: 3em
}

.margin-5 {
    margin: 10px 0;
}

.pdng-0 {
    padding: 0.5em
}

.pdng-1 {
    padding: 1em
}

.pdng-2 {
    padding: 2em
}

.pdng-2lrt {
    padding: 2em 2em 0.75em 2em
}

.pdng-2lrb {
    padding: 0.75em 2em 2em 2em
}

.pdng-2lr {
    padding: 0.25em 2em
}

.pdng-3 {
    padding: 3em
}

.brdrds-1 {
    border-radius: 1em;
}

.brdrds-2 {
    border-radius: 2em;
}

.bdrtoprds-1 {
    border-top-left-radius: 1em;
    border-top-right-radius: 1em
}

.bdrtoprds-2 {
    border-top-left-radius: 2em;
    border-top-right-radius: 2em
}

.btmrds-1 {
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em
}

.btmrds-2 {
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em
}

.bg-lighten {
    background-blend-mode: lighten;
}

.grid-realestate {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

div.grid-books {
    border-radius: 1em;
    padding: 2em;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-row-gap: 40px;
    grid-column-gap: 20px;
}

.body-cs  { 
    max-width: 600px;
    width: 90%; 
    margin: 1em auto; 
    font-size: 1em; 
    background-image: url('https://assets.biblemapsplus.com/snow.bmp');
    background-repeat: repeat;
    background-attachment: fixed;
}

.footer {
    color: white;
    padding: 20 0 20 0;
    text-align: center;
    font-style: italic;
}

h1 {
    font-size: 4em;
    font-style: bold;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #006666;
    margin: 0.25em;
    color: white;
    text-shadow: 2 2 4 black;
}

h2 {
    font-size: 2em;
    font-style: oblique;
    padding: 0;
    margin: 0;
    color: white;
}

h3 {
    font-size: 1.25em;
    padding: 0;
    margin: 0;
    color: lightgrey;
    text-shadow: 2 2 0 #006666, 4 4 4 rgba(0,0,0,0.15);
}

.bookdesc {
    margin: 1em 0 0 0;
}

/* unvisited link */
a:link {
    color: skyblue;
}
    
/* visited link */
a:visited {
    color: lightgrey;
}

/* mouse over link */
a:hover {
    color: whitesmoke;
}

/* selected link */
a:active {
    color: blue;
}

img.profile {
    clip-path: ellipse(37% 43%);
}

img.art {
    width: 100%;
    line-height: 0;
}

img.book-cover {
    border-radius: 0.25em;
    width: 100%;
    height: auto
}

img.circle-border {
	float: left;
	width: 154px;
	clip-path: circle(45%);
	shape-outside: circle(55%);
    margin-right: 2em;
	-webkit-mask-image: radial-gradient(circle, black 60%, rgba(0, 0, 0, 0.5) 60%);
	mask-image: radial-gradient(circle, black 60%, rgba(0, 0, 0, 0.5) 60%);
}

img.ellipse-border {
	float: left;
	height: 170px;
	clip-path: ellipse(39% 44%);
	shape-outside: ellipse(47% 53%);
	margin: 0 2em 0 1em;
	-webkit-mask-image: radial-gradient(38% 45% ellipse at center, black 93%, rgba(0, 0, 0, 0.5) 93%);
	mask-image: radial-gradient(39% 45% ellipse at center, black 93%, rgba(0, 0, 0, 0.5) 93%);
}