/*
  Le Corbusier colours
  https://www.lescouleurs.ch/en/the-colours/colour-keyboards/colour-keyboard-1959/

  bleu outremer 59 (blue)   #3957a5
  noir d'ivoire (d.grey)    #3a3b3b
  gris 59 (l.grey)          #81868a
  gris foncé 59 (l.grey)    #60646a
  vert 59 (green)           #428f70
  bleu céruléen 59 (l.blue) #7aa7cb
  rouge vermillon 59 (red)  #ac443a
  le rubis (browny-red)     #74393b
  orange vif (orange)       #c45e3a
  blanc ivoire (cream)      #eae4d7
  le jaune vif (yellow)     #f2bb1e
  rose vif (pink)           #dba3af
  vert olive vif            #b8a137
  outremer gris (l.grey)    #d8dfdb

*/

/**
 * Global layout & styles
 */
 * { box-sizing: border-box; }
html { font-size: 17px; }
body {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neu", sans-serif;
  color: #3a3b3b;
  background-color: white;
  line-height: 1.5;

  /* constrain and centre align content*/
  max-width: 700px;
  margin: 0 auto;
}

img.post-image { width: 100%; }

ul {
  padding-left: 40px;
  padding-right: 20px;
}
ul li {
  padding-bottom: 10px;
}

section { margin: 0 20px; }

footer.main {
  padding: 20px 20px 40px 20px;
  margin-top: 50px;
  background-color: #d8dfdb;
}
footer.main p {
  margin: 0;
  font-size: 0.8em;
  color: #5f6265;
}

h1 { margin-top: 0; }
h2 { margin: 1.3rem 0 0.5rem 0; }

a { color: #3765b1; }
a:hover { color:#3957a5; }

::selection { background: #eae4d7; }

figure { margin: 0; }

figure figcaption {
  height: 2em;
  padding: 0.2em 0.3em;
  margin:0;
  position: relative;
  top: -2.4em;
  background: rgba(0, 0, 0, 0.6);
  font-style: italic;
  font-size: 0.8em;
}

dl, dt, dd { margin: 0; }
dt, dd { display: inline; float; left; }
dt { font-weight: bold; }
dt::after { content: ":"; }
dd::after {
  clear: both;
  content: "";
  display: table;
}

img.avatar {
  shape-outside: circle();
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 15px;
  border-radius: 50%;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/**
 * Main navigation
 **/
body header.main {
  padding: 0 20px;
  margin-bottom: 10px;
}
body header.main h1 { margin-bottom: 2px; }
body header.main h1 a { color: #3a3b3b; text-decoration: none; }

/**
 * A nav element with a list of links
 **/
ul.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.links-list::after {
  clear: both;
  content: "";
  display: table;
}

ul.links-list li {
  float: left;
  padding: 0 3px;
  margin-bottom: 0 !important;
}

ul.links-list li a { font-weight: bold; }
ul.links-list li::after { content: " /"; }
ul.links-list li:last-child::after { content: ""; }



/**
 * Article header
 **/
article header {
  padding: 20px 20px 20px 20px;
}
article header h1 {
  margin-bottom: 0;
  line-height: 2rem;
}
article header time {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

article header p {
  font-weight: bold;
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 0;
}

article h1 { font-size: 1.7rem; }
article h2 { font-size: 1.5rem; }
article h3 { font-size: 1.1rem; }

article p {
  line-height: 1.65;
  margin: 0 0 1.4em;
  orphans: 3;
  widows: 3;
}

/**
 * Code blocks and terminal output
 **/
code {
  font-family: "Fira Code", "Lucida Console", Monaco, monospace;
  color: #ac443a;
}
pre {
  padding: 20px 0;
  background: #eef5ff;
  overflow: auto;
}
code,
pre code[class*="language-"] { font-size: 0.75rem; }
/* prism-overrides for accessibility */
span.token.constant, span.token.symbol { color: #dba3af; }

pre.terminal { background-color: #3a3b3b; line-height: 1em; }
pre.terminal code { color: #eae4d7; }
.light-blue { color: rgb(102, 187, 255); }
.light-yellow { color: #b8a137; }
.light-orange { color: #c45e3a }
.diff-red { color: #f92672; }
.diff-green { color: #a6e22e; }
.diff-blue { color: rgb(64, 134, 231); }
/* Override defaults on inline code snippets */
:not(pre) > code[class*="language-plaintext"] {
  color: #3a3b3b;
  background-color: #eef5ff;
  font-size: 0.8rem;
}


/**
 * Signup form
 **/

form {
  border: 1px solid #3957a5;
  margin-top: 30px;
  padding: 20px;
  color: #3957a5;
}
form p { margin-bottom: 0; }
form h2 { margin: 0;  color: #3957a5 !important; }
form input { margin-top: 15px; }
form input[type=email],
form input[type=text] {
  border: 1px solid #3957a5;
  padding: 10px 15px;
  width: 100%;
}
form input[type=submit] {
  border: 0;
  background: #3957a5;
  color: white;
  width: 100%;
  padding: 10px 15px;
}

section.main { margin-top: 30px; }
section.main p.description { padding-bottom: 20px;  }
section.main h1 { color: #428f70; }

/**
 * List of dated things
 **/
section ul.content-list {
  list-style: none;
  padding: 0;
}
section ul.content-list li {
  margin-bottom: 12px;
  padding-bottom: 3px;
}
section ul.content-list time {
  display: inline-block;
  float: left;
  width: 100%;
  font-size: 0.9em;
  color: #5f6265;
}
section ul.content-list h3 {
  display: inline-block;
  float: left;
  margin: 0 0 13px;
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.6rem;
}
section ul.content-list li img { width: 100%; float: left; margin-bottom: 10px; }
section ul.content-list li p { font-size: 0.9rem; }
section ul.content-list a { text-decoration: none; color: #3957a5; }
section ul.content-list a:hover { text-decoration: underline; }
section.main ul.links-list li a { text-decoration: underline; color: #ac443a; }
section.main ul.links-list li a:hover { text-decoration: none; }


/**
 * Embedded Videos
 **/
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/** Those HTML5 video tags are easy enough **/
video {
  width: 100%    !important;
  height: auto   !important;
}

/**
 * Blockqoutes
 **/
blockquote {
  margin: 40px 10px;
}
blockquote img.avatar {
  width: 100px;
  height: 100px;
}
blockquote p {
  font-style: italic;
  margin: 10px 0;
}
blockquote p::before { content: "“"; }
blockquote p::after { content: "”"; }


/**
 * Footer social icons and links
 **/
 footer nav {
  margin-bottom: 1rem;
 }
.footer_social_link {
  color: currentColor;
  text-decoration: none;
  margin-right: 0.3rem;
}
.footer_social_link .text {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.footer_social_link .icon {
  display: inline-block;
  fill: currentColor;
  height: auto;
  width: 2rem;
}
.footer_social_link .envelope {
  fill:#d8dfdb;
}

/**
 * Section overrides
 **/

 body.projects ul.content-list li img {
   border: 1px solid #d8dfdb;
 }

/**
 * Prism overrides
 **/
code[class*="language-"],
pre[class*="language-"] {
  line-height: 1.2;
}

/**
 * Desktop overrides
 **/
@media (min-width: 640px) {
  footer.main {
    padding: 40px 100px 40px 100px;
  }

  body header.main { margin-bottom: 0px; }

  /* Blog post */
  pre code { font-size: 0.8rem; }

  article header h1 {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
  article header time { font-size: 1.1rem; }

  /* Main navigation */
  body header.main h1 { float: left; }
  body header.main nav { float: left; margin-left: 20px; }
  body header.main nav ul { margin: 1em 0; }
  body header.main::after {
    clear: both;
    content: "";
    display: table;
  }

  img.avatar {
    width: 150px;
    height: 150px;
  }

  blockquote {
    margin: 50px 35px;
  }

  /* Code highlighting */
  pre code[class*="language-"], p code[class*="language-"] { font-size: 0.8rem; }

  /* List of dated things */
  section ul.content-list li { margin-bottom: 20px; }
  section ul.content-list li time { width: 20%; font-size: 1rem; }
  section ul.content-list li h3 { width: 80%; }
  section ul.content-list li p { margin-left: 20%; }
  section ul.content-list li img { margin-left: 20%; width: 80%; }
  section.main ul.links-list { margin-left: 20%; }

  /* signup form */
  form h2::after { content: ' 📨' }
}


/**
 * Darkmode support
 **/
@media (prefers-color-scheme: dark) {
  body { background-color: rgb(33, 37, 41); color: rgb(215, 215, 216); }
  body header.main h1 a { color: rgb(215, 215, 216); }

  img { opacity: .75; transition: opacity .5s ease-in-out; }
  img.normal { opacity: 1; transition: none; }
  img:hover { opacity: 1; }

  a { color: rgb(102, 187, 255); }

  section ul.content-list a { text-decoration: none; color: rgb(102, 187, 255); }
  section ul.content-list a:hover { color:#3957a5; }
  section ul.content-list time { color: rgb(159, 158, 157); }

  section.main ul.links-list li a { text-decoration: underline; color: #dba3af; }

  /* code and syntax highlighting related adjustments */
  pre[class*="language-"] { background-color: #272828; }
  /* Override defaults on inline code snippets */
  :not(pre) > code[class*="language-plaintext"] {
    background-color: #272828;
    color: #dba3af;
  }

  form {
    border: 1px solid rgb(102, 187, 255);
    color: rgb(102, 187, 255);
  }
  form h2 { margin: 0;  color: rgb(102, 187, 255)!important; }
  form input[type=email],
  form input[type=text] {
    border: 1px solid rgb(102, 187, 255);
  }
  form input[type=submit] {
    background: #3957a5;
    color: white;
  }

  footer.main { background-color: rgb(33, 37, 41); }
  footer.main p { color: rgb(159, 158, 157); }
  .footer_social_link .envelope { fill: rgb(33, 37, 41); }

}