ol,
 ul {
   list-style-position: outside;
 }

 dt {
   font-weight: bold;
 }

 li {
   margin-bottom: calc(1.75rem / 2);
 }

 code .bold {
   font-weight: bold;
 }

 .twitter-tweet {
   align-self: center;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
   text-rendering: optimizeLegibility;
   margin-bottom: 0;
 }

 @font-face {
    font-family: 'Bebas Neue';
    src:
        local('Bebas Neue'),
        url(BebasNeue-Regular.ttf) format('truetype');
}

 @font-face {
    font-family: 'Protest Strike';
    src:
        local('Protest Strike'),
        url(ProtestStrike-Regular.ttf) format('truetype');
}

 @font-face {
    font-family: 'Miracle Mono';
    src:
        local('Miracle Mono'),
        url(MiracleMono-Regular.otf) format('opentype');
}

 @font-face {
    font-family: 'JetBrains Mono';
    src:
        local('JetBrains Mono'),
        url(JetBrainsMono[wght].ttf) format('truetype');
}
 @font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    src:
        local('JetBrains Mono'),
        url(JetBrainsMono-Italic[wght].ttf) format('truetype');
}
 @font-face {
    font-family: 'Merriweather';
    src:
        local('Merriweather'),
        url(Merriweather.ttf) format('truetype');
}
 @font-face {
    font-family: 'Merriweather';
    font-style: italic;
    src:
        local('Merriweather'),
        url(Merriweather-Italic.ttf) format('truetype');
}


 h1 {
   font-family: 'Protest Strike', sans-serif;
   font-weight: 900;
   font-size: 2.5rem;
   line-height: 1.1;
 }

 h2 {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 2.5rem;
 }

 h4 {
   text-transform: uppercase;
   letter-spacing: 0.140625em;
 }

 hr {
   width: 100%;
 }

 body {
   display: flex;
   flex-direction: column;
   align-items: center;
   word-wrap: break-word;
 }

 html {
   font: 100%/1.75 'Merriweather', 'Georgia', serif;
   box-sizing: border-box;
   overflow-y: scroll;
 }

 #content {
   max-width: 42rem;
   width: 100vw;
   padding: 2.625rem 1.3125rem;
 }

 div.highlight {
   border-radius: 6px;
 }

 pre {
   color: white;
   border-radius: 6px;
   margin: 0;
   padding: 0;
   font-size: 0.85rem;
   overflow: auto;
 }

 code {
   font-family: 'JetBrains Mono', monospace;
   border-radius: 4px;
   border: 1px solid #d3d3d388;
   padding: 1px 3px;
   font-size: 1rem;
 }

 pre>code {
   border: none;
   padding: 15px;
   font-size: 1rem;
   display: inline-block;
   box-sizing: border-box;
   min-width: 100%;
   white-space: pre; 
   overflow-x: scroll;
 }

 blockquote {
   font-family: 'Miracle Mono', sans-serif;
   margin-left: 0;
   margin-right: 1.75rem;
   margin-top: 0;
   margin-bottom: 0;
   padding-bottom: 0;
   padding-left: 1rem;
   padding-right: 0;
   padding-top: 0;
   color: hsla(0, 0%, 0%, 0.79);
   border-left: 0.2rem solid hsla(0, 0%, 0%, 0.9);
 }

 blockquote p {
   margin: 0;
   margin-bottom: 15px;
 }
 blockquote p:last-child {
   margin-bottom: 0px;
 }

 #footnotes p {
   display: inline;
   margin-right: 5px;

 }

 #footnotes,
 #footnotes code {
   font-size: 0.8rem;
 }

 @media (prefers-color-scheme:dark) {
   code {
     color: #ccc;
   }

   body {
     background: #111;
     color: #bbb
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   strong {
     color: #e8e8e8
   }

   hr {
     border-top: 1px solid #797979
   }

   a {
     color: #8bc2e7
   }

   blockquote {
     border-color: #fff;
     color: inherit
   }

   .time {
     color: #8bc2e7 !important
   }




   pre,
   code {
     direction: ltr;
   }

   pre>code {
     overflow: auto;
     padding: 0.5rem;
     background: #f8f8f8;
     color: black;
     line-height: normal;
   }

   pre {
    scrollbar-color: yellow #111;
   }


   .code {
     font-family: monospace;
     font-size: 0.8rem;
   }


 }

 .highlight {
   background-color: #1E1E1E;
   color: #D4D4D4;
 }

 p:empty {
   margin: 0;
 }

 * {
   box-sizing: inherit;
 }

 *:before {
   box-sizing: inherit;
 }

 *:after {
   box-sizing: inherit;
 }

 .post-link {
   display: block;
   font-family: 'Protest Strike', sans-serif;
   font-size: 1.8rem;
   line-height: 2.5rem;
   text-decoration-thickness: 0.12rem;
 }

 .post-byline {
   font-size: 0.83255rem;
   line-height: 1.75rem;
   display: block;
   margin-bottom: 1.75rem;
   margin-top: 0;
   font-style: italic;
 }

 #post-body p:nth-of-type(1) {
   margin-top: 0;
 }

 #post-body {
   margin-top: 1.75rem;
   display: flex;
   flex-direction: column;
 }

 #post-description {
   margin-top: 1.75rem;
   text-align: right;
   font-style: italic;
   font-weight: 100;
 }

 h1:nth-of-type(1) {
   margin-bottom: 0;
 }

 img {
   height: auto;
   max-width: 100%;
 }


 figure img {
   display: block;
   max-width: 100%;
   width: 100vw;
   margin-left: auto;
   margin-right: auto;
   padding: 0;
   margin-bottom: 10px;

 }

 figure {
   margin: 0;
   padding: 0;
   margin-bottom: 1.75rem;
 }

 figcaption {
   text-align: center;
   font-size: 0.9rem;
 }

 iframe {
   align-self: center;
 }

 .video-container {
   position: relative;
   padding-bottom: 56.25%;
   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%;
 }

 #header {
   font-size: 1.7rem;
   margin: 0;
   padding: 0;
 }

 .reset-a,
 .reset-a:hover,
 .reset-a:visited,
 .reset-a:focus,
 .reset-a:active {
   text-decoration: none;
   color: inherit;
   outline: 0;
 }

 #prev-next {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 @media screen and (min-width:500px) {
   p {
     text-align: justify;
   }
 }




 pre>code {
   background: #1e1e1e;
   color: #f8f8f2;
   line-height: normal;
 }


 figcaption {
   font-style: italic;
 }


 p>img:only-child {
   display: block;
   margin: auto;
 }

 video {
   max-width: 100%;
 }

 .links {
			display:flex;
			justify-content:center;
			font-size: medium;
		}
		
		@media screen and (max-width:500px) {
			.links {
				flex-direction: column;
        align-items: center;
			}
			.links>.sep {
				display:none;
			}
			
		}

.clickable-element {
   cursor: pointer;
}

.quotes {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   margin: 2rem 0 0;
}

.quotes .quote {
   position: relative;
   margin: 0;
   padding: 1.35rem 1.4rem 1.2rem 1.5rem;
   border: 1px solid #ececec;
   border-left: 3px solid #111;
   border-radius: 0 10px 10px 0;
   background: #fafafa;
   color: #222;
   font-family: inherit;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.quotes .quote::before {
   content: "“";
   display: block;
   margin: 0 0 0.15rem;
   font-family: 'Merriweather', 'Georgia', serif;
   font-size: 2.4rem;
   line-height: 0.7;
   color: #111;
   opacity: 0.28;
}

.quotes .quote p {
   margin: 0;
   font-family: 'Merriweather', 'Georgia', serif;
   font-size: 1.12rem;
   font-style: italic;
   line-height: 1.7;
   color: #222;
}

.quote-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.25rem 0.5rem;
   margin-top: 0.95rem;
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.78rem;
   font-style: normal;
   letter-spacing: 0.01em;
   color: #555;
}

.quote-meta cite {
   font-style: normal;
   font-weight: 600;
}

.quote-meta cite::before {
   content: "— ";
}

.quote-source {
   color: #777;
}

.quote-source::before {
   content: "· ";
}

.quote-source:empty {
   display: none;
}

@media (prefers-color-scheme: dark) {
   .quotes .quote {
      background: #161616;
      border: 1px solid #2a2a2a;
      border-left: 3px solid #8bc2e7;
      box-shadow: none;
      color: #e8e8e8;
   }

   .quotes .quote::before {
      color: #8bc2e7;
      opacity: 0.5;
   }

   .quotes .quote p {
      color: #e4e4e4;
   }

   .quote-meta {
      color: #9a9a9a;
   }

   .quote-source {
      color: #7a7a7a;
   }

   .quotes-gate {
      background: #161616;
      border-color: #2a2a2a;
   }

   .quotes-lock-form input,
   .quotes-lock-form button {
      border-color: #3a3a3a;
      color: #e8e8e8;
   }

   .quotes-lock-form input {
      background: #111;
   }

   .quotes-lock-form button {
      background: #8bc2e7;
      color: #111;
   }

   .quotes-lock-status.is-error {
      color: #f0a0a0;
   }
}

.quotes-gate {
   margin-top: 1.75rem;
   padding: 1.35rem 1.4rem;
   border: 1px solid #ececec;
   border-radius: 10px;
   background: #fafafa;
}

.quotes-gate-copy {
   margin: 0 0 1rem;
}

.quotes-lock-form label {
   display: block;
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.78rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   margin-bottom: 0.4rem;
}

.quotes-lock-row {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
}

.quotes-lock-form input,
.quotes-lock-form button {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.95rem;
   border: 1px solid #d3d3d3;
   border-radius: 6px;
   padding: 0.45rem 0.7rem;
}

.quotes-lock-form input {
   flex: 1 1 12rem;
   min-width: 0;
}

.quotes-lock-form button {
   cursor: pointer;
   background: #111;
   color: #fafafa;
}

.quotes-lock-status {
   margin: 0.85rem 0 0;
   font-size: 0.9rem;
   min-height: 1.4rem;
}

.quotes-lock-status.is-error {
   color: #a33;
}

.flow-figure {
   margin: 1.75rem 0;
}

.flow-figure svg {
   display: block;
   width: 100%;
   height: auto;
}

.flow-figure figcaption {
   margin-top: 0.6rem;
   font-size: 0.85rem;
   font-style: italic;
   text-align: center;
}

.blob-table {
   width: 100%;
   border-collapse: collapse;
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.82rem;
   margin: 1.25rem 0 1.75rem;
}

.blob-table th,
.blob-table td {
   border: 1px solid #d3d3d3;
   padding: 0.45rem 0.6rem;
   text-align: left;
}

.blob-table th {
   background: #f4f4f4;
}

@media (prefers-color-scheme: dark) {
   .blob-table th,
   .blob-table td {
      border-color: #3a3a3a;
   }

   .blob-table th {
      background: #1a1a1a;
   }
}