:root {
 --phoneWidth: (max-width: 684px);
 --tabletWidth: (max-width: 900px)
}
.check {
display: none
}

@font-face {
 font-display:swap;
 font-family:'Fira Code';
 font-style:normal;
 font-weight:400;
 src:url("../fonts/FiraCode-Regular.woff") format("woff")
}
@font-face {
 font-display:swap;
 font-family:'Fira Code';
 font-style:normal;
 font-weight:800;
 src:url("../fonts/FiraCode-Bold.woff") format("woff")
}
.button-container {
 display:table;
 margin-left:auto;
 margin-right:auto
}
button,
.button,
a.button {
 position:relative;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:8px 18px;
 margin-bottom:5px;
 text-decoration:none;
 text-align:center;
 border-radius:8;
 border:1px solid #78e2a0;
 background:#78e2a0;
 color:#222129;
 font:inherit;
 font-weight:bold;
 appearance:none;
 cursor:pointer;
 outline:none
}
button:hover,
.button:hover,
a.button:hover {
 background:rgba(255,168,106,0.9)
}
button.outline,
.button.outline,
a.button.outline {
 background:transparent;
 box-shadow:none;
 padding:8px 18px
}
button.outline :hover,
.button.outline :hover,
a.button.outline :hover {
 transform:none;
 box-shadow:none
}
button.link,
.button.link,
a.button.link {
 background:none;
 font-size:1rem
}
button.small,
.button.small,
a.button.small {
 font-size:.8rem
}
button.wide,
.button.wide,
a.button.wide {
 min-width:200px;
 padding:14px 24px
}

input,
textarea,
select {
 background:transparent;
 color:#78e2a0;
 border:1px solid #78e2a0;
 border-radius:0;
 padding:10px;
 font:inherit;
 appearance:none
}
input:focus,
input :active,
textarea:focus,
textarea :active,
select:focus,
select :active {
 border-color:#fff;
 outline:1px solid #fff
}
input:active,
textarea:active,
select:active {
 box-shadow:none
}
select {
 background:#222129
}
select option {
 background:#222129
}
::placeholder {
 color:rgba(255,168,106,0.5)
}
.header {
 display:flex;
 flex-direction:column;
 position:relative
}
@media print {
 .header {
  display:none
 }
}
.header__inner {
 display:flex;
 align-items:center;
 justify-content:space-between
}
.header__logo {
 display:flex;
 flex:1
}
.header__logo:after {
 content:'';
 background:repeating-linear-gradient(90deg, #78e2a0, #78e2a0 2px, transparent 0, transparent 10px);
 display:block;
 width:100%;
 right:10px
}
.header__logo a {
 flex:0 0 auto;
 max-width:100%;
 text-decoration:none
}
.navigation-menu {
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 margin:20px 1px
}
@media (max-width: 684px) {
 .navigation-menu {
  margin:0
 }
}
.navigation-menu__inner {
 display:flex;
 flex:1;
 flex-wrap:wrap;
 list-style:none;
 margin:0;
 padding:0
}
.navigation-menu__inner>li {
 flex:0 0 auto;
 margin-bottom:10px;
 white-space:nowrap
}
.navigation-menu__inner>li:not(:last-of-type) {
 margin-right:20px
}
@media (max-width: 684px) {
 .navigation-menu__inner {
  flex-direction:column;
  align-items:flex-start;
  padding:0
 }
 .navigation-menu__inner li {
  margin:0;
  padding:5px
 }
}
.navigation-menu .spacer {
 flex-grow:1 !important
}
.menu {
 display:flex;
 flex-direction:column;
 position:relative;
 list-style:none;
 padding:0;
 margin:0
}
.menu__trigger {
 margin-right:0 !important;
 color:#78e2a0;
 user-select:none;
 cursor:pointer
}
.mobile-lang {
 display:none
}
@media (max-width: 684px) {
.mobile-lang {
 display:flex
}
.desktop-lang {
 display:none
}
}
.menu__dropdown {
 display:none;
 flex-direction:column;
 position:absolute;
 background:#222129;
 box-shadow:0 10px rgba(34,33,41,0.8),-10px 10px rgba(34,33,41,0.8),10px 10px rgba(34,33,41,0.8);
 color:white;
 border:2px solid;
 margin:0;
 padding:10px;
 top:40px;
 left:0;
 list-style:none;
 z-index:99
}
.check:checked ~ .menu__dropdown{
 display:flex;
}

.menu__dropdown>li {
 flex:0 0 auto
}
.menu__dropdown>li:not(:last-of-type) {
 margin-bottom:10px
}
.menu__dropdown>li a {
 display:flex;
 padding:5px
}
.menu--mobile .menu__trigger {
 color:#78e2a0;
 border:2px solid;
 margin-left:10px;
 height:100%;
 padding:3px 8px;
 margin-bottom:0 !important;
 position:relative;
 cursor:pointer;
 display:none
}
@media (max-width: 684px) {
 .menu--mobile .menu__trigger {
  display:block
 }
}
@media (max-width: 684px) {
 .menu--mobile .menu__dropdown {
  left:auto;
  right:0
 }
}
.menu--mobile li {
 flex:0 0 auto
}
.menu--mobile li:not(:last-of-type) {
 margin-bottom:10px
}
.menu--language-selector .menu__trigger {
 color:#78e2a0;
 border:2px solid;
 margin-left:10px;
 height:100%;
 padding:3px 8px;
 margin-bottom:0 !important;
 position:relative;
 cursor:pointer
}
.menu--language-selector .menu__dropdown {
 left:auto;
 right:0
}
.logo {
 display:flex;
 align-items:center;
 text-decoration:none;
 background:#78e2a0;
 color:black;
 padding:5px 10px
}
html {
 box-sizing:border-box
}
*,
*:before,
*:after {
 box-sizing:inherit
}
body {
 margin:0;
 padding:0;
 font-family: Monaco, Consolas, Ubuntu Mono, monospace;
 font-size:1rem;
 line-height:1.54;
 letter-spacing:-0.02em;
 background-color:#222129;
 color:#fff;
 text-rendering:optimizeLegibility;
 -webkit-font-smoothing:antialiased;
 font-feature-settings:"liga", "tnum", "zero", "ss01", "locl";
 font-variant-ligatures:contextual;
 -webkit-overflow-scrolling:touch;
 -webkit-text-size-adjust:100%
}
@media (max-width: 684px) {
 body {
  font-size:1rem
 }
}
.headings--one-size h1,
.headings--one-size h2,
.headings--one-size h3,
.headings--one-size h4,
.headings--one-size h5,
.headings--one-size h6 {
 line-height:1.3
}
.headings--one-size h1:not(first-child),
.headings--one-size h2:not(first-child),
.headings--one-size h3:not(first-child),
.headings--one-size h4:not(first-child),
.headings--one-size h5:not(first-child),
.headings--one-size h6:not(first-child) {
 margin-top:40px
}
.headings--one-size h1,
.headings--one-size h2,
.headings--one-size h3 {
 font-size:1.4rem
}
.headings--one-size h4,
.headings--one-size h5,
.headings--one-size h6 {
 font-size:1.2rem
}
a {
 color:inherit
}
img {
 display:block;
 max-width:100%
}
img.left {
 margin-right:auto
}
img.center {
 margin-left:auto;
 margin-right:auto
}
img.right {
 margin-left:auto
}
p {
 margin-bottom:20px
}
code,
kbd {
 font-family:'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
 font-feature-settings:normal;
 background:rgba(255,168,106,0.2);
 color:#78e2a0;
 padding:1px 6px;
 margin:0 2px;
 font-size:.95rem
}
code code,
code kbd,
kbd code,
kbd kbd {
 background:transparent;
 padding:0;
 margin:0
}
pre {
 background:transparent !important;
 padding:20px 10px;
 margin:40px 0;
 font-size:.95rem !important;
 overflow:auto;
 border-top:1px solid rgba(255,255,255,0.1);
 border-bottom:1px solid rgba(255,255,255,0.1)
}
pre+pre {
 border-top:0;
 margin-top:-40px
}
@media (max-width: 684px) {
 pre {
  white-space:pre-wrap;
  word-wrap:break-word
 }
}
pre code {
 background:none !important;
 margin:0;
 padding:0;
 font-size:inherit;
 border:none
}

table {
 table-layout:auto;
 border-collapse:collapse;
 width:100%;
 margin:40px 0
}
table,
th,
td {
 border:1px dashed #78e2a0;
 padding:10px
}
th {
 color:#78e2a0
}
ul,
ol {
 margin-left:2px;
 list-style: none;
 padding:0
}
ul li,
ol li {
 position:relative
}
@media (max-width: 684px) {
 ul,
 ol {
  margin-left:20px
 }
}
ol {
 list-style:none;
 counter-reset:li
}
ol li {
 counter-increment:li
}
ol li:before {
 content:counter(li);
 position:absolute;
 right:calc(100% + 10px);
 color:#78e2a0;
 display:inline-block;
 text-align:right
}
ol ol {
 margin-left:38px
}
ol ol li {
 counter-increment:li
}
ol ol li:before {
 content:counters(li, ".") " "
}
mark {
 background:#78e2a0;
 color:#222129
}
.container {
 display:flex;
 flex-direction:column;
 padding:40px;
 max-width:864px;
 min-height:100vh;
 border-right:1px solid rgba(255,255,255,0.1)
}
.container.full,
.container.center {
 border:none;
 margin:0 auto
}
.container.full {
 max-width:100%
}
@media (max-width: 684px) {
 .container {
  padding:20px
 }
}
@media print {
 .container {
  display:initial
 }
}
.content {
 display:flex;
 flex-direction:column
}
@media print {
 .content {
  display:initial
 }
}
hr {
 width:100%;
 border:none;
 background:rgba(255,255,255,0.1);
 height:1px
}
.hidden {
 display:none
}
sup {
 line-height:0
}
.index-content {
 margin-top:20px
}
.framed {
 border:1px solid #78e2a0;
 padding:20px
}
.framed *:first-child {
 margin-top:0
}
.framed *:last-child {
 margin-bottom:0
}
.posts {
 width:100%
}
.post {
 width:100%;
 text-align:left;
 margin:20px auto;
 padding:20px 0
}
.post:not(:last-of-type) {
 border-bottom:1px solid rgba(255,255,255,0.1)
}
.post-meta {
 font-size:1rem;
 margin-bottom:10px;
 color:rgba(255,168,106,0.7)
}
.post-title {
 position:relative;
 color:#78e2a0;
 margin:0 0 15px;
 padding-bottom:15px;
 border-bottom:3px dotted #78e2a0
}
.post-title:after {
 content:'';
 position:absolute;
 bottom:2px;
 display:block;
 width:100%;
 border-bottom:3px dotted #78e2a0
}
.post-title a {
 text-decoration:none
}
.post-tags {
 display:block;
 margin-bottom:20px;
 font-size:1rem;
 opacity:.5
}
.post-tags a {
 text-decoration:none
}
.post-content {
 margin-top:30px
}
.post-cover {
 border:20px solid #78e2a0;
 background:transparent;
 margin:40px 0;
 padding:20px
}
@media (max-width: 684px) {
 .post-cover {
  padding:10px;
  border-width:10px
 }
}
.post ul {
 list-style:none
}
.post ul li:not(:empty):before {
 content:'-';
 position:absolute;
 left:-20px;
 color:#78e2a0
}
h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a {
 visibility:visible
}
.footnotes {
 color:rgba(255,255,255,0.5)
}
.button {
 position:relative;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 font-size:1rem;
 padding:0;
 appearance:none
}
@media (max-width: 684px) {
 .button {
  flex:1
 }
}
.button a {
 display:flex;
 justify-content:center;
 flex:1;
 padding:8px 16px;
 text-decoration:none;
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden
}
.button__text {
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden
}
.button.next .button__icon {
 margin-left:8px
}
.button.previous .button__icon {
 margin-right:8px
}
.footer {
 padding:40px 0;
 flex-grow:0;
 opacity:.5
}
.footer__inner {
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin:0;
 width:760px;
 max-width:100%
}
@media (max-width: 900px) {
 .footer__inner {
  flex-direction:column
 }
}
.footer a {
 color:inherit
}
.footer .copyright {
 display:flex;
 flex-flow:row wrap;
 flex:1;
 align-items:center;
 font-size:1rem;
 justify-content:center
}
.footer .copyright--user {
 margin:auto;
 text-align:center
}
.footer .copyright>*:first-child:not(:only-child) {
 margin-right:10px
}
.footer .copyright span {
 white-space:nowrap
}
pre[data-line] {
 position:relative
}
pre[class*="language-"] {
 margin:0;
 padding:0;
 overflow:auto
}
.milieu {
  position: absolute;
  left: 25%;
  top: 5%;
  width: 50%;
}
@media (max-width: 684px) {
.milieu {
  position: absolute;
  left: 10%;
  top: 5%;
  width: 80%;
}
}