/* reset */
*, ::after, ::before {
    box-sizing: border-box;
    -webkit-box-sizing:border-box
}

* {
    margin:0
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust:none
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
    margin-block-end:0
}

ol, ol[role=list], ul, ul[role=list] {
    list-style:none
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing:antialiased
}

button, h1, h2, h3, h4, input, label {
    line-height:1.1
}

h1, h2, h3, h4 {
    text-wrap:balance
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap:break-word
}

a:not([class]) {
    text-decoration-skip-ink:auto
}

canvas, img, picture, svg, video {
    max-width: 100%;
    display:block
}

button, input, progress, select, textarea {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font:inherit
}

textarea:not([rows]) {
    min-height:10em
}

:target {
    scroll-margin-block:5ex
}

#__next, #root {
    isolation: isolate
}

/* now the suCSS */
ol, ul {
    margin-top: .25rem;
    margin-bottom:.25rem
}

details, td, th {
    padding:.5rem
}

aside, details, pre, progress, th, tr:nth-child(2n) {
    background-color:var(--bg-light)
}

summary, table caption, th {
    font-weight:700
}

body, input, select, textarea {
    color: var(--text);
    background-color:var(--bg)
}

figure, table {
    overflow-x:auto
}

::backdrop, :root {
    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --standard-border-radius: 5px;
    --bg: #EEEEEE;
    --bg-light: #CBCDCD;
    --text: #41474E;
    --text-light: #646868;
    --accent: #D26878;
    --accent-light: #e08f67;
    --accent-transparent: rgba(210, 104, 120, 0.2);
    --accent-text: var(--bg);
    --border: #646868;
    --link:#5690AF
}

@media (prefers-color-scheme: dark) {
    ::backdrop, :root {
        color-scheme: dark;
        --bg: #222529;
        --bg-light: #464949;
        --text: #D6D6D6;
        --text-light: #DBD5BC;
        --accent: #78B6AD;
        --accent-light: #87C9E5;
        --accent-transparent: rgba(120, 182, 173, 0.2);
        --accent-text: var(--bg);
        --border: #DBD5BC;
        --link:#E2AEA2
    }

    img, video {
        opacity:.8
    }
}

@media (prefers-color-scheme: light) {
    ::backdrop, :root {
        color-scheme: light;
        --bg: #EEEEEE;
        --bg-light: #CBCDCD;
        --text: #41474E;
        --text-light: #646868;
        --accent: #D26878;
        --accent-light: #e08f67;
        --accent-text: var(--bg);
        --border: #646868;
        --link:#5690AF
    }
}

[data-theme=light] {
    color-scheme: light;
    --bg: #EEEEEE;
    --bg-light: #CBCDCD;
    --text: #41474E;
    --text-light: #646868;
    --accent: #D26878;
    --accent-light: #e08f67;
    --accent-text: var(--bg);
    --border: #646868;
    --link:#5690AF
}

[data-theme=dark] {
    color-scheme: dark;
    --bg: #222529;
    --bg-light: #464949;
    --text: #D6D6D6;
    --text-light: #DBD5BC;
    --accent: #78B6AD;
    --accent-light: #87C9E5;
    --accent-text: var(--bg);
    --border: #DBD5BC;
    --link:#E2AEA2
}

::-moz-selection, ::selection {
    color: var(--bg);
    background:var(--accent)
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    overflow:visible
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    width:12px
}

::-webkit-scrollbar-track {
    background:var(--bg-light)
}

* {
    scrollbar-color: var(--accent) var(--bg-light);
    scrollbar-width: thin;
    scrollbar-height:thin
}

html {
    color-scheme: light dark;
    font-family: var(--mono-font);
    scroll-behavior:smooth
}

body {
    min-height: 100svh;
    font-size: 1rem;
    display: grid;
    grid-template-columns: 1fr min(45rem, 90%) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-row-gap:.625rem
}

body > * {
    grid-column:2
}

body > footer {
    color: var(--text-light);
    font-size:.875
}

h1 {
    font-size:2rem
}

h2 {
    font-size:1.75rem
}

h3 {
    font-size:1.5rem
}

h4 {
    font-size:1.25rem
}

h5 {
    font-size:1rem
}

h6 {
    font-size:.75rem
}

h1, h2, h3, h4, h5, h6 {
    margin:.5em 0
}

h1, h2, h3 {
    line-height:1.1
}

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    color: var(--accent);
    content: '# '
}

p {
    margin:1rem 0
}

a, a:visited {
    text-decoration: none;
    border-radius: .125rem;
    color:var(--link)
}

a:hover {
    background-color: var(--link);
    color:var(--bg)
}

ul {
    list-style:none
}

ol {
    list-style-type:decimal
}

li {
    margin-bottom:.125rem
}

ul li::marker {
    content: '» ';
    color:var(--accent)
}

ul li:hover::marker {
    content: '# ';
    font-weight: 700;
    color:var(--link)
}

ol li::marker {
    color:var(--accent)
}

ol li:hover::marker {
    font-weight: 700;
    color:var(--link)
}

header > nav ol, header > nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: right;
    list-style-type: none;
    margin: .5rem 0 0;
    padding: 0;
    gap:1rem
}

header > nav ol li, header > nav ul li, input[type=checkbox] + label, input[type=radio] + label {
    display:inline-block
}

aside, details, pre, progress {
    border-radius:var(--standard-border-radius)
}

aside {
    font-size: 1rem;
    width: 35%;
    padding: 0 10px;
    margin-inline-start: 10px;
    float:right
}

[dir=rtl] aside {
    float:left
}

summary {
    cursor: pointer;
    word-break:break-all
}

details[open] > summary + * {
    margin-top:0
}

details[open] > summary {
    margin-bottom:.5rem
}

details[open] > :last-child {
    margin-bottom:0
}

table {
    border-collapse: collapse;
    margin: 1.5rem 0;
    display: block;
    white-space:nowrap
}

td, th {
    border: 1px solid var(--border);
    text-align:start
}

table caption {
    text-align: left;
    margin:0 0 .4rem 1rem
}

fieldset {
    border: 1px dashed var(--accent);
    border-radius:var(--standard-border-radius)
}

fieldset > legend {
    color:var(--accent)
}

.button, button, input, select, textarea {
    font-size: inherit;
    font-family: inherit;
    padding: .25rem;
    border-radius: var(--standard-border-radius);
    box-shadow: none;
    max-width: 100%;
    display:inline-block
}

cite, figcaption {
    font-size:.875rem
}

iframe, img, video {
    max-width:90%
}

figure, label {
    display:block
}

input, select, textarea {
    border:1px dashed var(--border)
}

fieldset label {
    margin:0 0 .3rem
}

textarea {
    max-width: 43.5rem;
    resize:both
}

progress, textarea:not([cols]) {
    width:100%
}

.button, a.button, button, input[type=button], input[type=reset], input[type=submit], label[type=button] {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: var(--accent-text);
    padding: .5rem .9rem;
    text-decoration: none;
    line-height:normal
}

blockquote, cite, dt, figcaption {
    color:var(--text-light)
}

.button[aria-disabled=true], button[disabled], input:disabled, select:disabled, textarea:disabled {
    cursor: not-allowed;
    background-color: var(--bg-light);
    border-color: var(--bg-light);
    color:var(--text-light)
}

input[type=range] {
    padding: 0;
    color:var(--accent)
}

abbr[title] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style:dotted
}

.button:not([aria-disabled=true]):hover, button:enabled:hover, input[type=button]:enabled:hover, input[type=reset]:enabled:hover, input[type=submit]:enabled:hover, label[type=button]:hover {
    background-color: var(--accent-light);
    border-color: var(--accent-light);
    cursor:pointer
}

input[type=checkbox]:checked, input[type=radio]:checked, mark {
    background-color: var(--accent)
}

.button:focus-visible, button:focus-visible:where(:enabled), input:enabled:focus-visible:where( [type=submit], [type=reset], [type=button]
) {
    outline: 2px solid var(--accent);
    outline-offset:1px
}

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    width: 14px;
    height:14px
}

input[type=radio] {
    border-radius:100%
}

input[type=color] {
    height: 2.5rem;
    padding:.2rem
}

input[type=file] {
    border:0
}

hr {
    border: 1px dashed var(--accent);
    margin:.5rem 0
}

mark {
    padding: 0 .25em;
    border-radius: var(--standard-border-radius);
    color:var(--bg)
}

mark a {
    color:var(--link)
}

img, video {
    height: auto;
    padding: .125rem;
    border: dashed 2px var(--accent);
    border-radius:15px
}

figure {
    margin:0
}

figcaption {
    text-align: left;
    margin:0 0 1rem 1rem
}

blockquote {
    margin: 0 0 0 1.25rem;
    padding: .5rem 0 0 .5rem;
    border-inline-start: .375rem solid var(--accent);
    font-style:italic
}

cite {
    font-style:normal
}

code, kbd, pre, pre span, samp {
    font-family:var(--mono-font)
}

pre {
    border: 1px solid var(--accent);
    max-height: 30rem;
    padding: .625rem;
    overflow: auto;
    font-style: monospace;
    white-space:pre-wrap
}

div code, li code, p code {
    padding: 0 .125rem;
    border-radius: 3px;
    color: var(--bg);
    background-color:var(--text)
}

pre code {
    padding: 0;
    border-radius: 0;
    color: inherit;
    background-color:inherit
}

progress:indeterminate {
    background-color:var(--bg-light)
}

progress::-webkit-progress-bar {
    border-radius: var(--standard-border-radius);
    background-color:var(--bg-light)
}

progress::-webkit-progress-value {
    border-radius: var(--standard-border-radius);
    background-color:var(--accent)
}

progress::-moz-progress-bar {
    border-radius: var(--standard-border-radius);
    background-color: var(--accent);
    transition-property: width;
    transition-duration:.3s
}

progress:indeterminate::-moz-progress-bar {
    background-color:var(--bg-light)
}

dialog {
    max-width: 40rem;
    margin:auto
}

dialog::backdrop {
    background-color: var(--bg);
    opacity:.8
}

@media only screen and (max-width: 720px) {
    h1 {
        font-size:1.5rem
    }

    h2 {
        font-size:1.25rem
    }

    h3 {
        font-size:1rem
    }

    h4 {
        font-size:.75rem
    }

    h5 {
        font-size:.5rem
    }

    h6 {
        font-size:.25rem
    }

    aside {
        width: 100%;
        float: none;
        margin-inline-start:0
    }

    input, select, textarea {
        width:100%
    }

    dialog {
        max-width: 100%;
        margin:auto 1em
    }
}

sub, sup {
    vertical-align: baseline;
    position:relative
}

sup {
    top:-.4em
}

sub {
    top: .3em
}

/* now my custom css */

h1, h2, h3, h4, h5, h6 {
  margin-top: 2rem;

}

body {
  margin-bottom: 2rem;
}
#nav-bar {
  padding: .625rem 0 0 0;
  display: flex;
  flex-direction: row;
  gap: .25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  align-content: flex-end
}

#footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.accent-data {
  color: var(--accent);
}

.theme-transition {
  transition: color 0.3s ease, background-color 0.3s ease;
}

.tags-data {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-end
}

.title-list li {
  margin-bottom: .375rem;
}

/* icons settings */
.icons {
  width: 1.3rem;
  height: 1.3rem;
  aspect-ratio: 1/1;
  display: inline-block;
  vertical-align: middle;
  color: var(--text);
  fill: var(--text);
  background-color: transparent;
  cursor: pointer;
}

.icons:hover {
  background-color: transparent;
  color: var(--accent);
}

/* footnotes */
.footnote-definition {
  margin: 0 0 0 .125rem;
}

.footnote-definition-label {
  color: var(--accent);
}

.footnote-definition p {
  display: inline;
  margin: .625rem 0 0 .625rem;
}

/* general classes */
.no-style {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0
}

.no-style:hover {
  background-color: transparent;
  color: var(--accent);
}

.center {
  text-align: center;
}

.center img {
  display: block;
  margin: 1rem auto;
}

.float-right {
  float: right
}

.float-left {
  float: left
}

/* shortcodes css */
.webring {
  margin: .375rem;
}

nav a {
    margin-left: 1rem;
}

em {
font-style: normal;
position: relative;
display: inline-block;
}

em::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.0em;
  width: calc(100%);
  height: 0.5em;
  background-color: var(--accent-transparent);
  z-index: -1;
}