html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  width: 100%;
  top: 0px;
  background-color: #000000;
}

header {
  padding-bottom: 5px;
}

main {
  background-color: #ffffff;
  color: #000000;
}

.content {
  width: 50%; 
  min-width: 400px; 
  margin: 0 auto; 
  text-align: center;
}

#desktop-menu {
  margin: 0px;
  padding: 5px 0px 5px 0px;
  display: flex;
  list-style-type: none;
  background-color: #000000;
}

#desktop-menu li {
  text-align: center;
  flex-grow: 1;
}

#desktop-menu li a {
  text-decoration: none;
  color: #dddddd;
  font-weight: bold;
}
#desktop-menu li a:hover {
  color: #ffffff;
}

#desktop-menu li.self a {
  color: orange;
}

.schedule-pickup {
  display: block;
  background-color: #23395d;
  font-weight: bold;
}

.schedule-pickup:hover {
  background-color: #41557c;
  cursor: pointer;
}

.schedule-pickup-button {
  width: 50%;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  background-color: #23395d;
  font-weight: bold;
  font-size: large;
}

.schedule-pickup-button:hover {
  background-color: #41557c;
  cursor: pointer;
}

.schedule-pickup-button a {
  text-decoration: none;
  color: #ffffff;
}

.schedule-pickup-button a:visited {
  color: #ffffff;
}

footer {
  text-align: center;
  background-color: #000000;
  color: #dddddd;
  padding-bottom: 10px;
  width: 100%;
}

.footer-content {
  max-width: 500px;
  margin: 0 auto;
}

#logo {
  max-width: 25%;
  height: auto;
  margin-top: 5px;
}

.hours-group {
  font-weight: bold;
}

.social-media {
  display: flex;
  text-align: center;
  margin: 10px auto;
  max-width: 300px;
}

.social-media a {
  flex-grow: 1;
}

.social-media-icon {
  width: 40px;
  height: 40px;
}


.blog-post {
  width: 800px;
  max-width: 100%;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.blog-post > h1 > a {
text-decoration: none;
color: #000000;
}

.blog-post > h1 {
  width: 100%;
  border-bottom: 1px solid grey;
}

.blog-post img {
  max-width: 800px;
  height: auto;
}

.blog-meta {
  font-style: italic;
}

.blog-footer {
  display: flex;
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.blog-footer > div {
  flex-grow: 1;
}

.blog-footer a {
  text-decoration: none;
  font-weight: bold;
  font-size: large;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.hidden {
display: none;
}

.frozen {
overflow: hidden;
max-height: 100vh;
}

#mobile-menu {
display: none;
position: fixed;
top: 0;
}

#mobile-menu-icon {
width: 2.5rem;
height: 2.5rem;
}

#content {
width: 100%;
max-height: 100vh;
}

@media screen and (max-width: 56.25rem) {

header {
  padding-bottom: 0;
}

.content {
  width: 100%;
  min-width: 0;
}

#desktop-menu {
  display: none;
}

#logo {
  max-width: 40%;
}

#mobile-menu {
  display: block;
}

}

#mobile-menu-icon {
position: sticky;
padding-left: .25rem;
background-color: white;
margin: .125rem;
}

.mobile-menu-icon-dash {
width: 2.5rem;
height: .21rem;
margin: .5625rem 0;
color: black;
background-color: black;
}

#mobile-menu-body {
position: fixed;
top: 0;
left: 0;  
width: 100%;
height: 100%;
z-index: 2;
background-color: white;
}

#mobile-menu-close-icon {
width: 2.25rem;
float: right;
position: relative;
border: .5rem solid white;
background: url(/images/close-icon.svg) no-repeat;
display: block;
height: 2rem;
width: 2rem;
}

#mobile-menu-body > ul {
text-align: left;
list-style: none;
font-size: x-large;
margin: 0 .5rem 0 0;
}

#mobile-menu-body > ul > li {
padding: 0 0 1rem 0;
margin: 1rem 2rem 0 0;
border-bottom: 1px solid lightslategray;
}

#mobile-menu-body > ul > li.self {
list-style: disc;
}

#mobile-menu-body > ul > li > a {
text-decoration: none;
font-weight: bold;
color: black;
}

.mobile-menu-schedule-pickup {
margin: 2rem 0 2rem 0;
}