/* Inserts the styles required by various options
on the services page of the dashboard */
{{{appCSS}}}
{{{body_font.styles}}}
{{{syntax_highlighter.styles}}}

:root {
  {{#body_font}}
  --font-family: {{{stack}}};
  --font-size: {{{font_size}}}px;
  --line-height: {{{line_height}}};
  {{/body_font}}
  --background-color: {{background_color}};
  --text-color: {{text_color}};
  --off-background-color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.08);
  --light-text-color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.3333);
  --medium-text-color: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.6666);
  --link-color: {{link_color}};
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: {{dark_background_color}};
    --off-background-color: rgba({{#rgb}}{{dark_text_color}}{{/rgb}}, 0.08);
    --text-color: {{dark_text_color}};
    --light-text-color: rgba({{#rgb}}{{dark_text_color}}{{/rgb}}, 0.3333);
    --medium-text-color: rgba({{#rgb}}{{dark_text_color}}{{/rgb}}, 0.6666);
    --link-color: {{dark_link_color}};
  }
}

html,
body {
  width: 100%;
  padding: 0;
  max-width: 40em;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  color: var(--text-color);
  background: var(--background-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height)
}

body {
  padding: clamp(1.6em,calc((100vw - 40em) / 2), 4.8em) 2em;
  box-sizing: border-box;
}

ul, ol {
  padding:0
}

ul {
  list-style-type: circle;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  margin-bottom: 0;
  font-size: 1.33333333em;
}

h2 {
  font-size: 100%;
  font-weight: 600;
  margin: 4em 0 0 0;
}

h2 a {display:inline-block;margin-right: 2em;padding-bottom: 0.5em;color:var(--light-text-color);font-weight: normal;margin-bottom: 1em;}
h2 a:hover {text-decoration: none;}
h2 a.selected {border-bottom: 1px solid var(--link-color);color:var(--link-color)}

.header h1 + p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--medium-text-color)
}

.header h1 + p + ul {
  display: flex;
  list-style-type: none;
  margin: 0.5em 0;
  padding: 0;
  margin-bottom: 3em;
}

.header h1 + p + ul li {
  margin-right: 0.5em;
}

.header h1 + p + ul li a {
  font-size: 0.8em;
  background: var(--off-background-color);
  color: var(--medium-text-color);
  display: block;
  border-radius: 1em;
  padding: 0.25em 0.75em;
}

.header.subpage a:hover {text-decoration: none;}
.header.subpage ul {display: none!important;}
.header.subpage h1 {font-size: 15px;color:var(--light-text-color);font-weight: normal;}
.header.subpage h1 + p {display: none;}
.header.subpage p:first-of-type img {width:3em;height:3em;float:none;font-size: 18px;}


.header p:first-of-type img {
  max-width: 100%;
  width: 6.13333333em;
  height: 6.13333333em;
  border-radius: 50%;
  float: left;
  margin-right: 1.333em;
}

span.caption {
  display: none;
}

h3 {
  color: var(--light-text-color);
  font-size: {{{body_font.font_size}}}px;
  font-weight: normal;
}

/* Align the dates (h3 tags) in a column on the left */
.subheading-column h3 {
  display: flex;
  position: relative;
  margin: 0 0 0.75em 0;
  float: left;
}


/* Indent the content following h3 (paragraphs, lists) */
.subheading-column h3 ~ p, .subheading-column h3 ~ ul {
  margin-left: 8em; /* Add space to align content after the date column */
  color: var(--medium-text-color);
}

/* collapse the h3 and p elements on small screens */
@media (max-width: 600px) {
  .subheading-column h3 {
    display: block;
    float: none;
    margin-left: 0;
  }
  .subheading-column h3 ~ p, .subheading-column h3 ~ ul {
    margin-left: 0;
  }
}

p img, .entry img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.subheading-column h3 ~ p img {
  max-height: 6em;
  width: auto;
  border-radius: 0.25em;
  margin-right: 0.75em;
  margin-bottom: 0.5em;
  display: inline-block;
}

.subheading-column h3 + p {
  color: #000
}

.subheading-column h3, .subheading-column h3 + p {
  padding-top: 1.6em;
  margin-top: 0;
  margin-bottom: 0;
}
 
.subheading-column h3 + p + p,
.subheading-column h3 + p + ul {
  margin-top: 0;
}

kbd {
  background: var(--off-background-color);
  color: var(--medium-text-color);
  padding: 0.1em 0.25em;
  border-radius: 0.25em;
  font-size: 0.9em;
}


/* add an arrow to the right of the links */
.arrow-after-link h3 + p a:after {
  content: "→";
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25;
  font-size:0.8em;
  border-radius:100%;
  overflow:hidden;
  text-align: center;
  background:#f0f0f0;
  transform: rotate(-45deg);
  display:inline-block;
  text-indent: 0px;
  margin-left:6px;
}

.arrow-after-link h3 + p:hover a:after {
  animation: chevronLoop 0.4s linear;
}

@keyframes chevronLoop {
      0% {
        text-indent: 0;
      }
      50% {
        text-indent: 15px;
      }
      51% {
        text-indent: -15px;        
      }
      100% {
        text-indent: 0;
      }
    }
  
.fade-in {
  animation: fadeIn 0.5s; 
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}