/* Extracted from the inline <style> in
 * https://github.com/jmhodges/howsmyssl/blob/main/templates/index.html
 * so blog.howsmyssl.com matches the main How's My SSL? site. */

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.hero-unit-okay {
  color: #1B9E77;
}

.hero-unit-improvable {
  color: #7570B3;
}

.hero-unit-bad {
  color: #D95F02;
}

@media screen and (max-width: 480px) {
  .hero-unit h1 { font-size: 35px; }
}

.label.okay {
  background-color: #1B9E77;
  font-size: 1em;
}

.label.improvable {
  background-color: #7570B3;
  font-size: 1em;
}

.label.bad {
  background-color: #D95F02;
  font-size: 1em;
}

/* With a grid or flexbox set up, we may not need to reflow the text in the
   list items, but given Bootstrap v3's creaky grid, this is the best way to
   prevent wide cipher-suite names from overlapping neighboring columns. */
.col-sm-4 ul li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Blog-specific readability tweaks (modeled on somethingsimilar.com/static/css/style.css). */

#footer {
  margin-top: 60px;
  margin-bottom: 60px;
  color: #888;
}

code {
  color: #333;
}

a code {
  /* drop the bootstrap border on code inside a link, and match the link color */
  border: none;
  color: #08C;
}

.entry-title h3 {
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 0;
}

.entry-date {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
  margin-bottom: 2px;
}

.entry-byline {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}

.entry-byline a {
  color: #888;
  text-decoration: underline;
}

.entry-content {
  margin-top: 20px;
}

.entry-content blockquote {
  font-size: 15px;
  margin-left: 1em;
}

ul.archive {
  list-style: none;
  padding-left: 0;
}

ul.archive li {
  margin-bottom: 10px;
}

/* gradient hr — same trick somethingsimilar.com uses
   (style14 from https://codepen.io/ibrahimjabbari/pen/ozinB) */
hr.fancy {
  border: 0;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image:    -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image:     -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image:      -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image:         linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
}