body {
  font-family: "Droid Sans", sans-serif;
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
  padding-right: 15px;
  padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
  border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
  color: #f37846;
  text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

a:visited {
  color: #f37846;
  text-decoration: underline;
}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ~~ Site layout ~~ */
/** Default layout **/
div.main-content {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "menu" "header" "content" "footer";
}
div.main-content #menu {
  grid-area: menu;
  display: flex;
  justify-content: center;
  background-color: #2e2929;
  padding: 5px;
  border-bottom: 2px solid #f37846;
}
div.main-content #menu div.container {
  width: 1024px;
  display: flex;
  justify-content: space-between;
}
div.main-content #menu div.container h1 {
  font-family: "Homenaje", sans-serif;
  font-size: 200%;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF;
  margin: 0;
}
div.main-content #menu div.container h1 a {
  text-decoration: none;
  color: #FFF;
}
div.main-content #menu div.container h1::first-letter {
  font-size: 120%;
  color: #f37846;
}
div.main-content #menu div.container nav#navitems {
  align-self: center;
  display: flex;
}
div.main-content #menu div.container nav#navitems a {
  font-family: "Homenaje", sans-serif;
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 125%;
  font-weight: bold;
  text-transform: uppercase;
  max-width: 200px;
  margin-right: 15px;
  background-color: #f37846;
  padding: 5px 10px;
}
div.main-content #menu div.container nav#navitems a:hover {
  background-color: white;
  color: #f37846;
}
div.main-content #page-main-area {
  grid-area: content;
  display: flex;
  justify-content: center;
}
div.main-content #page-main-area div.container {
  width: 1024px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}
div.main-content #footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 170px;
  background-color: #2e2929;
  color: white;
  margin-top: 100px;
}
div.main-content #footer div.container {
  width: 1024px;
  position: relative;
  font-family: "Droid Sans", sans-serif;
  text-align: center;
  font-size: 100%;
}

#landing-page #header {
  grid-area: header;
  display: flex;
  justify-content: center;
  height: 450px;
  background-color: #2e2929;
  padding: 0;
}
#landing-page #header div.container {
  width: 1024px;
  position: relative;
  height: inherit;
  color: white;
  background: #2e2929 url("/media/site/header-yennick-image.jpg") no-repeat left top;
}
#landing-page #header div.container div.intro {
  position: relative;
  left: 550px;
  top: 25px;
  max-width: 474px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#landing-page #header div.container div.intro .book-wrapper {
  display: inline-block;
}
#landing-page #header div.container div.intro .book-wrapper .book-cover {
  position: relative;
  /* Add a subtle spine effect */
}
#landing-page #header div.container div.intro .book-wrapper .book-cover img {
  border-radius: 0 8px 8px 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 280px;
  height: auto;
}
#landing-page #header div.container div.intro .book-wrapper .book-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 325px;
  background: linear-gradient(90deg, rgb(243, 120, 70) 0%, rgb(243, 120, 70) 25%, rgb(36, 36, 36) 50%, rgb(243, 120, 70) 100%);
  border-radius: 2px 0 0 2px;
}
#landing-page #header div.container div.intro .slogan {
  font-family: "Homenaje", sans-serif;
  font-size: 210%;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 5px;
  text-align: center;
}
#landing-page #page-main-area {
  font-size: 120%;
}
#landing-page #page-main-area .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "why-explain                    why-explain                     why" "learn                          learn-explain                   learn-explain" "log-issues-listing             log-issues-listing              log-issues-listing" "troubleshooting-costly-explain troubleshooting-costly-explain  troubleshooting-costly" "deep-knowledge                 deep-knowledge-explain          deep-knowledge-explain" "call-to-action                 call-to-action                  call-to-action" "subscribe                      subscribe                       subscribe";
  column-gap: 50px;
  row-gap: 50px;
}
#landing-page #page-main-area .why {
  grid-area: why;
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
}
#landing-page #page-main-area .why-explain {
  grid-area: why-explain;
  font-family: "Droid Sans", sans-serif;
  line-height: 1.5;
}
#landing-page #page-main-area .learn {
  grid-area: learn;
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
}
#landing-page #page-main-area .learn-explain {
  grid-area: learn-explain;
  font-family: "Droid Sans", sans-serif;
  line-height: 1.5;
}
#landing-page #page-main-area .learn-explain ul li {
  line-height: 1.8;
}
#landing-page #page-main-area .log-issues-listing {
  grid-area: log-issues-listing;
  font-family: "Droid Sans", sans-serif;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#landing-page #page-main-area .log-issues-listing .log-issues-title {
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
  margin-bottom: 10px;
}
#landing-page #page-main-area .log-issues-listing .log-message {
  font-style: italic;
  background-color: #eee;
}
#landing-page #page-main-area .troubleshooting-costly {
  grid-area: troubleshooting-costly;
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
}
#landing-page #page-main-area .troubleshooting-costly-explain {
  grid-area: troubleshooting-costly-explain;
  font-family: "Droid Sans", sans-serif;
  line-height: 1.5;
}
#landing-page #page-main-area .deep-knowledge {
  grid-area: deep-knowledge;
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
}
#landing-page #page-main-area .deep-knowledge-explain {
  grid-area: deep-knowledge-explain;
  font-family: "Droid Sans", sans-serif;
  line-height: 1.5;
}
#landing-page #page-main-area .call-to-action {
  grid-area: call-to-action;
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
  line-height: 1.6;
}
#landing-page #page-main-area .call-to-action .action {
  display: inline-block;
  margin-top: 50px;
  font-size: 120%;
  color: #f37846;
}
#landing-page #page-main-area .subscribe {
  grid-area: subscribe;
  justify-self: center;
}

.subscription-form {
  margin: 50px 10px;
}

#post {
  color: #454646;
  line-height: 1.5;
  font-size: 19px;
}
#post h1 {
  font-family: "Homenaje", sans-serif;
  font-size: 250%;
  margin-bottom: 10px;
}
#post h2 {
  font-family: "Homenaje", sans-serif;
  font-size: 200%;
  color: #2e2929;
}
#post h3 {
  font-family: "Homenaje", sans-serif;
  font-size: 150%;
}
#post .post-metadata {
  font-size: 80%;
  color: #999;
  margin-bottom: 50px;
}
#post strong {
  color: #2e2929;
}
#post pre {
  white-space: pre-wrap;
  white-space: moz-pre-wrap;
  padding: 0.1em 0.5em 0.3em 0.7em;
  border-left: 11px solid #ccc;
  margin: 1.7em 0 1.7em 0.3em;
  overflow: auto;
  width: 93%;
  font-family: "Courier New", Courier, monospace, sans-serif;
  font-size: 0.8em;
}
#post blockquote {
  white-space: pre-wrap;
  white-space: moz-pre-wrap;
  padding: 0.1em 0.5em 0.3em 0.7em;
  border-width: 1px 1px 1px 11px;
  border-style: solid;
  border-color: #ccc;
  margin: 1.7em 0 1.7em 0.3em;
  overflow: auto;
  width: 93%;
}
#post blockquote.quote {
  border-width: 0px;
  font-family: "Homenaje", sans-serif;
  text-align: center;
  font-size: 150%;
}
#post ul, #post ol {
  margin-left: 20px;
  margin-bottom: 10px;
}
#post img {
  margin: 5px;
}
#post .language-plaintext.highlighter-rouge {
  background-color: #EEE;
  padding: 2px 3px;
}
#post .share-buttons {
  display: flex;
  align-items: baseline;
  margin: 25px 0;
}
#post .share-buttons .share-btn {
  display: inline-block;
  color: #ffffff;
  border: none;
  padding: 5px 15px;
  outline: none;
  text-align: center;
  font-size: 100%;
  margin: 0 5px;
}
#post .share-buttons .share-btn:focus,
#post .share-buttons .share-btn:hover {
  text-decoration: none;
  opacity: 0.8;
}
#post .share-buttons .share-btn:active {
  color: #e2e2e2;
}
#post .share-buttons .share-btn.bluesky {
  background: #55acee;
}
#post .share-buttons .share-btn.twitter {
  background: black;
}
#post .share-buttons .share-btn.hackernews {
  background: #ff6600;
}
#post .article-book-promotion {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
#post .article-book-promotion .book-promotion-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
#post .article-book-promotion .call-to-action {
  font-family: "Homenaje", sans-serif;
  font-size: 150%;
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  justify-self: center;
  align-self: center;
}
#post .article-book-promotion .action {
  display: inline-block;
  margin-top: 50px;
  font-size: 120%;
  color: #f37846;
}
#post .article-book-promotion #subscribe {
  align-self: center;
}

/** layout for mobile devices **/
@media all and (max-width: 768px) {
  div.main-content #menu div.container {
    width: 100%;
    flex-wrap: wrap;
    padding: 0 15px;
    justify-content: center;
    align-items: center;
  }
  div.main-content #menu div.container h1 {
    margin-left: 0;
    font-size: 150%;
  }
  div.main-content #menu div.container nav#navitems a {
    font-size: 100%;
    padding: 8px 12px;
    margin-right: 10px;
  }
  div.main-content #page-main-area div.container {
    width: 100%;
    margin: 20px 15px 0 15px;
  }
  div.main-content #footer {
    height: 300px;
  }
  div.main-content #footer div.container {
    width: 100%;
    padding: 0 15px;
  }
  #landing-page #header {
    height: auto;
    min-height: 300px;
    padding: 30px 0;
  }
  #landing-page #header div.container {
    width: 100%;
    padding: 0 15px;
    background: #2e2929;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #landing-page #header div.container div.intro {
    position: static;
    left: auto;
    top: auto;
    max-width: 100%;
    text-align: center;
  }
  #landing-page #header div.container div.intro .book-wrapper {
    margin-bottom: 25px;
  }
  #landing-page #header div.container div.intro .book-wrapper .book-cover img {
    max-width: 200px;
    border-radius: 8px;
  }
  #landing-page #header div.container div.intro .book-wrapper .book-cover::after {
    display: none;
  }
  #landing-page #header div.container div.intro .slogan {
    font-size: 140%;
    padding: 0 10px;
    line-height: 1.3;
    margin-top: 0;
  }
  #landing-page #page-main-area {
    font-size: 100%;
  }
  #landing-page #page-main-area .container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  #landing-page #page-main-area .why, #landing-page #page-main-area .why-explain, #landing-page #page-main-area .learn, #landing-page #page-main-area .learn-explain, #landing-page #page-main-area .log-issues-listing,
  #landing-page #page-main-area .troubleshooting-costly, #landing-page #page-main-area .troubleshooting-costly-explain,
  #landing-page #page-main-area .deep-knowledge, #landing-page #page-main-area .deep-knowledge-explain, #landing-page #page-main-area .call-to-action, #landing-page #page-main-area .subscribe {
    grid-area: auto;
  }
  #landing-page #page-main-area .why, #landing-page #page-main-area .learn, #landing-page #page-main-area .troubleshooting-costly, #landing-page #page-main-area .deep-knowledge {
    font-size: 180%;
    text-align: center;
    margin-bottom: 20px;
  }
  #landing-page #page-main-area .why-explain, #landing-page #page-main-area .learn-explain, #landing-page #page-main-area .troubleshooting-costly-explain, #landing-page #page-main-area .deep-knowledge-explain {
    font-size: 110%;
    line-height: 1.6;
    text-align: center;
  }
  #landing-page #page-main-area .learn-explain ul {
    list-style-type: none;
  }
  #landing-page #page-main-area .learn-explain ul li {
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: center;
  }
  #landing-page #page-main-area .log-issues-listing .log-issues-title {
    font-size: 160%;
    margin-bottom: 20px;
  }
  #landing-page #page-main-area .log-issues-listing .log-message {
    font-size: 95%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    text-align: left;
  }
  #landing-page #page-main-area .call-to-action {
    font-size: 140%;
    text-align: center;
    line-height: 1.7;
    padding: 30px 15px;
  }
  #landing-page #page-main-area .call-to-action .action {
    font-size: 110%;
    margin-top: 30px;
    display: block;
  }
  #landing-page #page-main-area .subscribe {
    justify-self: stretch;
    align-self: center;
    margin: 0 -15px;
  }
  #landing-page #page-main-area .subscribe .formkit-form {
    margin: 0 !important;
  }
}
/** Additional mobile improvements for very small screens **/
@media all and (max-width: 480px) {
  #landing-page #header div.container div.intro .book-wrapper .book-cover img {
    max-width: 160px;
  }
  #landing-page #header div.container div.intro .slogan {
    font-size: 120%;
    padding: 0 5px;
  }
  #landing-page #page-main-area .container {
    gap: 30px;
  }
  #landing-page #page-main-area .why, #landing-page #page-main-area .learn, #landing-page #page-main-area .troubleshooting-costly, #landing-page #page-main-area .deep-knowledge {
    font-size: 160%;
  }
  #landing-page #page-main-area .call-to-action {
    font-size: 150%;
    padding: 20px 10px;
  }
  div.main-content #menu div.container h1 {
    font-size: 130%;
  }
  div.main-content #menu div.container nav#navitems a {
    font-size: 90%;
    padding: 6px 10px;
  }
}

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