/* colors
sunset: top yellow #F3CC73, bottom orange #C87230, middle orange #F4B150, light #FDEFDC
background: far #494452, near #2D2D37
turquoise: #40e0d0, light #D9F9F6;
*/

:root {

--bkgDark: #2D2D37;
--bkgLight: #494452;
--ltYellow: #FFD679;
--Orange: #C87230;
--dkOrange: #80491F;
--Turq: #40e0d0;
--ltTurq: #D9F9F6;

}

html {
margin: 0;
padding: 0;
}

body {
width: auto;
height: auto;
margin: 0;
padding: 0;
background-color: var(--bkgDark);
font-size: 18px;
font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif;
}


@media all and (max-device-width: 720px){
body {
font-size: 17px;
}
}

@media all and (max-device-width: 640px){
body {
font-size: 16px;
}
}

@media all and (max-device-width: 320px){
body {
font-size: 15px;
}
}

a, a:link {
color: #1D665F;
}

a:active {
color: #1D665F;
}

a:visited {
color: #258077;
}

ul, ol {
margin-left: 0;
padding-left: .5em;
}

dd, li {
margin: .5em;
margin-left: 1.5em;
}

em {
color: var(--bkgDark);
font-weight: bold;
font-style: italic;
}

h1, h2, h3, h4, h5 {
font-family: tahoma, verdana, sans-serif;
font-weight: normal;
}

h1 {
font-size: 120%;
font-weight: bold;
border-bottom: dotted 1px var(--Turq);
}

h2 {
font-size: 110%;
}

h2.stripe {
background-color: #D9F9F6;
padding: 2px;
padding-left: 5px;
border-bottom: solid 1px var(--Turq);
}

h3 {
font-size: 105%;
}

h4 {
font-size: 101%;
}

hr {
height: 1px;
color: var(--Turq);
}

address {
margin: .2em;
margin-left: 1em;
font-size: 105%;
font-style: normal;
font-family: tahoma, verdana, sans-serif;
}

blockquote {
background-color: #EAEAEB;
margin-left: 1em;
padding: .5em;
}

#header {
margin: 0;
padding: 0;
background-color: var(--bkgDark);
background-image: url(graphics/sunset5.png);
background-position: top center;
background-repeat: repeat-x;
z-index: 5;
}

#logo {
float: left;
margin: 0;
padding: 15px 30px;
}

/* begin navbar */

#navbar {
display: block;
width: auto;
margin: 0;
padding: 1rem;
padding-top: 140px;
padding-left: 270px;
}

#navbar a {
display: inline-block;
height: auto;
color: var(--ltYellow);
font-family: tahoma, verdana, sans-serif;
text-decoration: none;
background-color: var(--bkgLight);
text-align: center;
margin: .3em;
padding: .2em .6em;
border-radius: 4px;
border-top: solid 1px var(--dkOrange);
border-bottom: solid 1px black;
}

#navbar a:hover {
color: white;
color: var(--ltTurq);
}

#main {
margin: 0;
padding: 1% 10% 1% 10%;
background-color: white;
min-height: 30em;
}

#main::after {
content: "";
clear: both;
display: table;
}

#main.home {
background-image: url(graphics/psg1.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: 50% auto;
}


dl.events {
margin-left: 4px;
}

dt.date {
color: var(--bkgDark);
font-style: italic;
margin-top: 1.5em;
}

dt.event {
color: var(--bkgDark);
font-weight: bold;
}

dl.events dd {
margin-left: 1em;
}

.gallery1 img {
margin: 4px;
text-decoration: none;
border: none;
}

.imageleft {
float: left;
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
margin: 5px;
margin-right: 1em;
}

.imageright {
float: right;
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
margin: 5px;
margin-left: 1em;
}

.past {
background-color: #FDEFDC;
padding: .1em;
padding-left: 1em;
}

textarea.message {
padding: .2em;
display: block;
width: 98%;
}

.unbold {
font-weight: normal;
}

#footer {
font-size: 90%;
text-align: center;
color: var(--Orange);
padding: 1em;
}






/* adaptations for mobile screens. */

@media screen and (max-width: 50em) {

#navbar {
padding: 1rem;
}

#logo {
float: none;
display: block;
width: 30vw;
max-width: 200px;
margin: 0;
height: auto;
margin-left: 5vw;
padding: .5rem;
}

#header {
height: auto;
}

#main {padding: 2rem 4% 2rem 4%;}

#main.home {
background-size: 80% auto;
}


#footer {padding: 1em 4% 1em 4%;}


} /* end mobile adaptations */