@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@200;400;600;800&family=Source+Code+Pro&display=swap');

body {
   font-family: "Noto Sans", sans-serif;
   margin: 1em;
}

main {
   color: #333;
   margin-bottom: 10em;
}

main > * {
   max-width: 50rem;
   margin-left: auto;
   margin-right: auto;
}

hr {
   max-width: unset;
   border: none;
   margin: 3em auto;
}
hr:before {
   content: '( Insérez ici une pause bien méritée. )';
   display: block;
   text-align: center;
   color: #bbb;
   margin: auto;
   padding: 4em;
   background: linear-gradient(#eeeeee, #fefefe 15%, #fefefe 85%, #eeeeee);
   border-top: 1px solid #dfdfdf;
   border-bottom: 1px solid #dfdfdf;
}

a {
   color: #EC249E;
}
a:visited {
   color: #803161;
}

h1, h2, h3, h4, h5, h6 {
   font-family: "Raleway", sans-serif;
   font-weight: 800;
}

h1 {
   font-size: 2.5em;
}
h2 {
   font-size: 2em;
}
h3, h4, h5, h6 {
   font-size: 1.5em;
}
h4 {
   font-weight: 600;
}
h5 {
   font-weight: 400;
}
h6 {
   font-weight: 200;
}

h1:before {
   content: '';
}
h2:before {
   content: '# ';
}
h3:before {
   content: '## ';
}
h4:before {
   content: '### ';
}
h5:before {
   content: '#### ';
}
h6:before {
   content: '##### ';
}

#toc {
   background: #faeded;
   padding: 2em;
   border-radius: 1em;
}
#toc > strong {
   display: block;
   margin: auto;
}
#toc > ol {
   padding-left: 0;
}
#toc > ol ol {
   border-left: 1px solid #e8d1dc;
   padding-left: 1.5em;
}

@media screen and (min-width: 55rem) {
#toc {
   float: right;
   padding: 1em;
   max-width: 30em;
   margin-top: -20vw;
   margin: 1em;
}
#toc > ol {
   padding-left: 2.5em;
}
main {
   margin: 25vw auto;
}
body {
   background-image: url("godot.svg");
   background-repeat: no-repeat;
   background-size: calc(95vw - 30em);
   margin: 0;
}
}

@media screen and (any-hover) and (min-width: 70rem) {
   body {
      background-size: 85vw;
      background-position-x: center;
      padding-top: 12vw;
   }
   #toc {
      position: fixed;
      overflow-y: scroll;
      margin: 0;
      top: 1em;
      height: 9.5em;
      right: -29.5em;
      transition: all .2s ease-in-out;
   }
   #toc > strong {
      position: absolute;
      rotate: -90deg;
      left: -3.5em;
      top: 5em;
      transition: all .2s ease-in-out;
   }
   #toc:hover {
      right: 0;
      height: 90vh;
      height: calc(100vh - 4em);
      transition: all .2s;
   }
   #toc:hover > strong {
      position: static;
      rotate: 0deg;
      left: 0;
      top: 0;
   }
}

code {
   color: #482743;
   font-family: 'Source Code Pro', monospace;
}
pre > code {
   color: #fff6f6;
   display: block;
   max-width: 50rem;
   min-width: max-content;
   margin: auto;
}
pre {
   background: #482743;
   color: #fff6f6;
   margin: unset;
   max-width: unset;
   min-width: max-content;
   padding: 1em;
   font-size: smaller;
}

@media (prefers-color-scheme: dark) {
   body {
      background-color: #111;
   }
   #toc {
      background-color: #6c525e;
      color: #eee;
   }
   #toc a {
      color: #F9DFE7;
   }
   main {
      color: #ddd;
   }
   code {
      color: #b37eab;
   }
   a:visited {
      color: #b3779b;
   }
   hr:before {
      color: #eee;
      background: linear-gradient(#0c0c0c, #1c1c1c 20%, #1c1c1c 80%, #0c0c0c);
      border-top: 1px solid #222;
      border-bottom: 1px solid #222;
   }
}