ul {
  list-style-type: disc;
  list-style-position: inside; }

ul ul, ol ul {
  list-style-type: circle;
  list-style-position: inside;
  margin-left: 15px; }

ol ol, ul ol {
  list-style-type: lower-latin;
  list-style-position: inside;
  margin-left: 15px; }

/* CUSTOM starting styles that elements should always have regardless of screen size, designing for mobile first */
/*universal - shared by all pages*/
html {
  background-color: rgba(0, 0, 0, 0.2);
  background-image: url(../img/beach-background-blurry.png);
  background-size: cover;
  background-attachment: fixed;
  font-size: 100%; }

.beach_header {
  background-image: url(../img/beach-background.png);
  background-size: cover;
  background-attachment: sticky;
  padding-bottom: 50%; }

body {
  background-color: rgba(250, 250, 250, 0.4);
  font-size: 100%;
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.4; }
  @media screen and (min-width: 960px) {
    body {
      box-shadow: 5px 5px 50px #000;
      width: 94%;
      max-width: 960px;
      margin: 0 auto; } }

ol ul li {
  font-size: 1.3em !important; }
  @media screen and (min-width: 720px) {
    ol ul li {
      font-size: 1.1em !important; } }

header {
  background-color: #3b0c0a;
  clear: both; }

img {
  max-width: 600px;
  width: 100%; }
  @media screen and (min-width: 720px) {
    img {
      width: 80%;
      padding-right: 3%;
      margin-top: 1%;
      margin: 0 auto; } }
  @media screen and (min-width: 960px) {
    img {
      width: 100%; } }

iframe {
  margin-top: 10%;
  max-width: 600px;
  max-height: 300px;
  width: 100%; }
  @media screen and (min-width: 720px) {
    iframe {
      border: solid 3px #3b0c0a;
      width: 400px;
      height: 200px; } }
  @media screen and (min-width: 960px) {
    iframe {
      border: none;
      width: 100%;
      height: 100%; } }

.bottom {
  text-align: center;
  line-height: 1.0; }

h1 {
  font-size: 1.9em;
  font-weight: 600;
  padding: .5rem 1rem 0 1rem;
  text-align: right; }
  @media screen and (min-width: 720px) {
    h1 {
      text-align: center;
      font-size: 2.3em; } }
  @media screen and (min-width: 960px) {
    h1 {
      font-size: 2.9em; } }

h1 a {
  text-decoration: none;
  text-align: center !important;
  color: #cf7ca6 !important;
  font-family: "Lobster", cursive !important; }

h2 {
  font-size: 0.8em;
  padding: 0 1rem .5rem 1rem;
  color: #b5a7dc;
  text-align: right;
  font-family: 'Cinzel', serif; }
  @media screen and (min-width: 720px) {
    h2 {
      font-size: 1em;
      text-align: center; } }
  @media screen and (min-width: 960px) {
    h2 {
      font-size: 1.2em; } }

article h2 {
  color: #cf7ca6 !important;
  font-family: 'Cinzel', serif;
  font-size: 1.5em !important; }
  @media screen and (min-width: 720px) {
    article h2 {
      font-size: 1.2em !important; } }

h3 {
  font-size: 1.7rem;
  font-weight: bold;
  font-family: 'Lobster', cursive;
  padding: 1rem;
  text-align: center;
  color: #3b0c0a; }
  @media screen and (min-width: 720px) {
    h3 {
      text-align: left; } }

h6 {
  font-size: .8rem;
  padding: 1rem;
  color: #3b0c0a;
  font-family: 'Cinzel', serif; }
  @media screen and (min-width: 960px) {
    h6 {
      line-height: 0 !important; } }

p {
  font-size: 1em;
  text-indent: 20px;
  font-family: 'Montserrat', sans-serif;

  margin-left: 10px !important;
  color: #000 !important;
  margin-top: 2%;
  list-style-position: inside;
  margin-left: 5px !important;
  line-height: 1.7; }
  @media screen and (min-width: 720px) {
    p {
      font-size: 0.90em; } }

#search-2 {
  font-family: 'Cinzel', serif;
  background-color: #3b0c0a; }

#searchsubmit {
  background-color: #cf7ca6;
  border-radius: 10px;
  border-color: #3b0c0a;
  color: #3b0c0a;
  font-family: "Lobster", cursive !important; }

a:link, a:visited, a:active {
  color: #b5a7dc;
  font-family: 'Cinzel', serif;
  transition: color 10s, ease-out,0.80s; }

a:focus {
  color: #cf7ca6 !important; }

a:hover {
  color: #fff !important;
  text-decoration: none; }

nav {
  display: none; }
  @media screen and (min-width: 720px) {
    nav {
      display: block;
      box-shadow: 5px 5px 50px #3b0c0a;
      position: sticky !important;
      top: 0px !important; } }

nav ul {
  text-align: center;
  list-style-type: none; }

nav ul li a {
  background-color: #b5a7dc;
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: #3b0c0a !important;
  font-family: 'Cinzel', serif;
  text-align: right !important; }

.post li {
  color: #3b0c0a;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85em;
  margin-top: 2%;
  list-style: none; }

.post ol ul li {
  font-family: 'Cinzel', serif;
  margin-top: 5%;
  margin-bottom: 2%; }
  @media screen and (min-width: 720px) {
    .post ol ul li {
      font-size: 1.4em !important; } }

#site-navigation {
  background-color: #b5a7dc; }

a#menu-button {
  margin: 0 auto;
  color: #b5a7dc;
  transition: 0s, ease-out,0.80s;
  text-decoration: none;
  margin-left: 72%;
  font-size: 1.9em;
  font-family: 'Cinzel', serif; }
  @media screen and (min-width: 720px) {
    a#menu-button {
      display: none; } }

.content-row {
  margin: 0 1rem; }

#recent-posts2 {
  position: sticky;
  top: 10px; }

#recent-posts2 li {
  text-align: center;
  list-style-type: none;
  list-style-position: none; }
  @media screen and (min-width: 960px) {
    #recent-posts2 li {
      text-align: left !important;
      font-size: 0.85em;
      line-height: 1.6; } }

/* aside styles */
#recent-posts2 ul {
  padding: 5%;
  border-top: solid 1px #000; }

#recent-posts2 a {
  color: #3b0c0a;
  font-family: 'Cinzel', serif;
  text-decoration: none; }

#recent-posts2 a:hover {
  text-decoration: underline;
  color: #cf7ca6 !important; }

#recent-posts2 h3 {
  font-size: 1.7em; }
  @media screen and (min-width: 720px) {
    #recent-posts2 h3 {
      text-align: center !important; } }
  @media screen and (min-width: 960px) {
    #recent-posts2 h3 {
      font-size: 1.5em;
      text-align: left !important; } }

.widget {
  margin: 0 0 1rem 0;
  padding: 1rem;
  color: #b5a7dc; }

.widget h3 {
  font-size: 1rem;
  padding: 0 1rem .5rem 0;
  color: #3b0c0a;
  font-family: "Lobster", cursive !important; }

.entry-footer, .author {
  font-family: 'Cinzel', serif; }

/*page specific styling*/
/*specific styles for BLOG page*/
.blog article {
  background-color: #b5a7dc;
  margin: 0 0 1rem 0; }

.blog article header, .blog article footer {
  background-color: #3b0c0a;
  padding: .25rem 1rem; }

.blog article h2 {
  font-size: 1.2rem;
  color: #b5a7dc;
  padding: 1rem 0 0 0; }

.blog article ol, .blog article ul {
  padding: 0 1rem 1rem 1rem; }

.entry-footer {
  font-size: .75rem;
  padding: 1rem;
  color: #cf7ca6; }

.posted-on {
  margin: 0 1rem;
  color: #b5a7dc; }

/* define styles that should only happen if the screen is wider */
@media screen and (min-width: 720px) {
  html {
    font-size: 120%; }

  nav ul li {
    display: inline-block;
    /*makes the <li> go side by side while still have block level appearance*/ }

  nav ul li a {
    border: none;
    padding: .25rem 1rem; } }
@media screen and (min-width: 960px) {
  html {
    font-size: 120%; }

  .content-row {
    display: flex; }

  main {
    flex: 2; }

  #site-navigation {
    position: sticky;
    top: 10px; }

  .sidebar {
    flex: 1;
    margin: 0 0 0 1rem; }

  nav ul li {
    display: inline-block;
    /*makes the <li> go side by side while still have block level appearance*/ }

  nav ul li a {
    border: none;
    padding: .25rem 1rem; } }

/*# sourceMappingURL=styles.css.map */