/*
 * pascalpinero.com: the look of its former Bootstrap 3 site, over assets/styles/app.scss.
 * Open Sans 300 for the gallery titles, self-hosted from @fontsource/open-sans 5.2.7
 * (SIL Open Font License, see fonts/open-sans/LICENSE).
 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/open-sans/open-sans-latin-ext-300-normal-riibDKU.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/open-sans/open-sans-latin-300-normal-HJpUiky.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --pf-body-bg: #777;
  --pf-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Bootstrap 3 $link-color #333 and its hover (darken 15%). */
  --pf-link-color: #333;
  --pf-link-hover-color: #0d0d0d;
  --pf-footer-color: inherit;
  --pf-footer-font-size: 0.87em;
  --pf-gallery-title-font-family: 'Open Sans', sans-serif;
  --pf-gallery-title-font-weight: 300;
}

/* Centred column of the former layout: 10/12 from 1090px, 8/12 from 1480px. */
@media (min-width: 1090px) {
  main.container {
    max-width: 83.333%;
  }
}
@media (min-width: 1480px) {
  main.container {
    max-width: 66.667%;
  }
}

/* Header as on the former site: full column width with rounded corners, the border 16px under the logo
   (or under the 82px menu block below 1151px), a gap of 2.8% of the window below it, and the menu at the
   height its absolute positioning gave it in each width band. */
.navbar {
  align-items: flex-start;
  padding-bottom: 16px;
  padding-top: 1px;
}
@media (min-width: 992px) {
  .navbar {
    border-radius: 4px;
    margin-bottom: 2.8vw;
    margin-left: -15px;
    margin-right: -15px;
  }
  .navbar > .col-lg-8 {
    position: relative;
    top: 14px;
  }
}
@media (min-width: 992px) and (max-width: 1150px) {
  .navbar {
    min-height: 103px;
  }
}
@media (min-width: 1151px) {
  .navbar > .col-lg-8 {
    top: 13px;
  }
}
@media (min-width: 1357px) and (max-width: 1457px), (min-width: 1600px) {
  .navbar > .col-lg-8 {
    top: 29px;
  }
}

/* Gallery titles centred on the picture, like the former site (the shared style puts them near the top). */
.gallery .grid figure figcaption {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0;
}
.gallery .grid figure h2 {
  line-height: 1.1;
  margin: -1em 0 11px;
}

/* Contact message editor in the colours of the other fields ("form" outranks easymde.min.css). */
form .EasyMDEContainer {
  margin: 0.7em 0;
}
form .EasyMDEContainer .editor-toolbar {
  background-color: #444;
  border: 0;
  border-bottom: 1px solid #555;
  border-radius: 0;
  opacity: 1;
}
form .EasyMDEContainer .editor-toolbar button {
  color: #eee;
}
form .EasyMDEContainer .editor-toolbar i.separator {
  border-left-color: #555;
  border-right-color: #555;
}
form .EasyMDEContainer .editor-toolbar button:hover,
form .EasyMDEContainer .editor-toolbar button.active {
  background-color: #555;
  border-color: #555;
}
form .EasyMDEContainer .CodeMirror {
  background-color: #444;
  border: 0;
  border-radius: 0;
  color: #eee;
}
form .EasyMDEContainer .CodeMirror-cursor {
  border-left-color: #eee;
}
form .EasyMDEContainer .CodeMirror .CodeMirror-placeholder {
  color: #6c757d;
}
form .EasyMDEContainer .CodeMirror-selected,
form .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
  background-color: #666;
}

/* The author text holds a blockquote: Bootstrap 3's style, as on the former site. */
.author blockquote {
  border-left: 5px solid #eee;
  font-size: 20px;
  line-height: 1.42857143;
  margin: 0 0 22px;
  padding: 11px 22px;
}