/* colors I began with
#4F5052
#939597 a
#DAD5B7 b
#f2e79d c
#DBCC66 d
#F5DF4D */
@font-face {
  font-family: Anton;
  src: url(fonts/Anton-Regular.ttf);
  font-family: Montserrat;
  src: url(fonts/Montserrat-Regular.ttf);
}
html {
  position: relative;
  min-height: 100%;
}
body {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  background: rgb(255, 250, 206);
  margin-top: 3em;
  color: #4f5052;
  text-align: center;
  height: 100%;
  font-size: 1em;
  line-height: 2;
  padding-bottom: 20em;
}
a:link,
a:visited {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: #7c7c7c;
  text-decoration: underline;
  transition: color 0.8s;
}

/* h/e/a/d/e/r/ a/r/e/a/ */

#stickyheader {
  color: white;
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  height: 3em;
  width: 100%;
  z-index: 9;
  border-bottom: 1px solid #4f5052;
  overflow: hidden;
  text-align: center;
}

#stickyheader ul li {
  display: inline-block;
  margin-top: 1em;
  text-transform: uppercase;
}

#stickyheader li {
  padding-left: 2em;
}

#stickyheader li:last-child {
  float: right;
  margin-right: 0.5em;
}

.top-area {
  height: 25em;
  background: url(images/topmain.jpeg) no-repeat top center;
  background-size: cover;
  opacity: 0.9;
}
.top-area h1 {
  font-size: 2.5em;
  text-transform: uppercase;
  -webkit-text-stroke: 3px black;
  -webkit-text-fill-color: transparent;
  text-align: right;
  position: relative;
  top: 8.9em;
  font-family: anton, Helvetica, sans-serif;
}
.content-area {
  padding-top: 2em;
  width: 90%;
  margin-left: 5%;
  text-align: center;
  padding-bottom: 4em;
}
.content-area h2 {
  text-align: center;
  color: black;
  font-size: 1.8em;
  font-family: anton, Helvetica, sans-serif;
}
#home-main h2 {
  border-bottom: solid 1px black;
}
#history-pic img {
  width: 90%;
  margin-left: 5%;
}
#history-main h1 {
  font-size: 2.7em;
  text-transform: uppercase;
  -webkit-text-stroke: px black;
  -webkit-text-fill-color: transparent;
  text-align: center;
  position: relative;
  font-family: anton, Helvetica, sans-serif;
  border-bottom: solid 1px black;
}
.photo-cred {
  font-size: xx-small;
}
#history-main .photo-cred {
  text-align: right;
}
#history-main table {
  border-collapse: collapse;
  width: 100%;
}

#history-main th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid rgb(0, 0, 0);
}
#history-main tr:hover {
  background-color: #aaaaaa;
}

#sights-main p,
#sights-main h2,
#sights-main ul {
  width: 50%;
  text-align: center;
  display: inline-block;
  padding-bottom: 1em;
}
#sights-main img {
  transform: rotate(-90deg);
  float: right;
  width: 50%;
  padding-top: 6em;
}
#sights-main h1 {
  font-size: 2.7em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: transparent;
  text-align: center;
  position: relative;
  font-family: anton, Helvetica, sans-serif;
  padding-bottom: 0.5em;
  border-bottom: solid 1px black;
}

#stay-main p,
#stay-main h2 {
  width: 50%;
  text-align: center;
  display: inline-block;
  padding-bottom: 1em;
}

#stay-main img {
  float: left;
  width: 46%;
}
#stay-main h1 {
  font-size: 2.7em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: transparent;
  text-align: center;
  position: relative;
  font-family: anton, Helvetica, sans-serif;
  padding-bottom: 0.5em;
  border-bottom: solid 1px black;
}

#about-main h1 {
  font-size: 2.7em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: transparent;
  text-align: center;
  position: relative;
  font-family: anton, Helvetica, sans-serif;
  padding-bottom: 0.5em;
  border-bottom: solid 1px black;
}
li {
  list-style: none;
}
h3 {
  font-size: 1.2em;
  font-family: anton, Helvetica, sans-serif;
}

/* f/o/o/t/e/r/ a/r/e/a/ */

footer {
  margin-top: 5em;
  height: 3em;
  background: #000000;
  color: rgb(255, 255, 255);
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 0.7em;
  opacity: 0.8;
}
footer p {
  padding-top: 0.5em;
  line-height: 1;
}