/* import sans regular */
@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), 
         url('../fonts/IBMPlexSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
/* import sans italic  */
@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), 
         url('../fonts/IBMPlexSans-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}
/* import sans bold */
@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), 
         url('../fonts/IBMPlexSans-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}
/* import sans bold italic */
@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), 
         url('../fonts/IBMPlexSans-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}
/* import mono regular */
@font-face {
    font-family: "IBM Plex Mono";
    src: local("IBM Plex Mono"), 
         url('../fonts/IBMPlexMono-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
/* import mono bold */
@font-face {
    font-family: "IBM Plex Mono";
    src: local("IBM Plex Mono"), 
         url('../fonts/IBMPlexMono-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}
/* import mono italic */
@font-face {
    font-family: "IBM Plex Mono";
    src: local("IBM Plex Mono"), 
         url('../fonts/IBMPlexMono-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}

html {
    overflow-y: scroll3
}

 body{
    max-width:800px;
    margin:40px auto;
    padding:0 10px;
    font-size:17px;
    line-height: 1.8;
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: #e7ecef;
    color:#1d1a31
}
h1,h2,h3{
    line-height:1.5
}

 p > code{
    color: #FFFFFF;
     background:#222;
     padding:2px
}
 pre{
    color: #FFFFFF;
     background:#222;
     padding:24px;
     white-space:pre-wrap;
}
code {
    font-size: 14px;
}
 article{
    padding:24px 0
}
 .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
 img {
    display: block;
     max-width: 80%;
     height: auto;
}

#webring {
    width: 1.4em !important;
    margin: 0 auto;
    display: inline-block;
}

 figcaption {
    color: #888;
     font: 12px/1.5 sans-serif;
     text-align: center;
}
 figure {
    margin: auto
}

#title {
    font-weight: 700;
    font-size: 25px;
    font-family: 'IBM Plex Mono', 'Fira Code', monospace;
    line-height: 4em;
    display: inline-block;
    color: #9D2749;
    text-decoration-color: #9D2749;
}

#navpoint {
    padding: .6rem 1rem .5rem 1rem;
    text-decoration: none;
    line-height: 3;
    background-color: #232323;
    font-weight: 500;
    color: #FDFCF8; 
    border-radius: 12px;
    margin-right: 1em;
    font-size: .8em;
    -webkit-transition-duration:.4s;transition-duration:.4s
}
#navpoint:hover{background-color:#a1415d;cursor:pointer}

#logo {
    height: 40px;
    width: auto;
    margin: 20px;
    margin-top: 30px;
    display: inline-block;
    float: left;
}

a {
    color: #008080;
    text-decoration-color: #008080;
}

h1{
    font-size: 2em;
    color: #9D2749;
}
h2{
    font-size: 1.5em;
    color: #9D2749;
}
h3{
    font-size: 1.3em;
    color: #9D2749;
}
h4{
    font-size: 1em;
    color: #9D2749;
}
h5{
    font-size: 0.8em;
    color: #9D2749;
}
h6{
    font-size: 0.7em;
    color: #9D2749;
}

figcaption {
    text-align: left !important;
}

.copyleft {
    display:inline-block;
    transform: rotate(180deg);
  }

@media (prefers-color-scheme: dark) {
    body  { background:  #333 !important; color: white; }
    a { color: #80C0C0; text-decoration-color: #80C0C0; }
    #navpoint:hover{background-color: #FF8080;}
    #navpoint{background-color: #111;}
    h1,h2,h3,h4,h5,h6{color: #FF8080}
    #title {color: #FF8080; text-decoration-color: #FF8080;}
    figcaption {color:#dddddd !important;}
  }