/*
  Theme Name: Kazhnuz Space
  Theme URI: https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme
  Author: Kazhnuz
  Author URI: https://kazhnuz.space
  Description: The default theme for Kazhnuz Space, my personnal blog.
  Version: 0.2
  License: GNU General Public License v3 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Tags: blog, two-columns, right-sidebar
  Text Domain: kspace-wordpress-theme

  This theme is licensed under the GPLv3.
*/
@font-face {
  font-family: "Comic Neue Bold Italic";
  src: local("Comic Neue Bold Italic"), local("ComicNeue-BoldItalic"), url("../fonts/ComicNeue-BoldItalic.woff2") format("woff2"), url("../fonts/ComicNeue-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-align: left;
  font-size: 4.5mm;
}
@media (max-width: 1366px) and (max-height: 768px) {
  html {
    font-size: 4.25mm;
  }
}
html {
  line-height: 1.6rem;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  color: var(--text-color);
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

:root {
  --accent-color: #CB357D;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(173.1712598425, 44.5787401575, 106.3031496063);
  --text-color:#073642;
  --link-color-hover:rgba(7, 54, 66, 0.15);
  --link-color:rgb(163.031496063, 41.968503937, 100.0787401575);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
  font-weight: 400;
}

mark {
  padding: 0.05rem 0.25rem;
  border-radius: 0.1rem;
}

img {
  border-style: none;
}
article img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link-color);
  outline-color: #CB357D;
  padding: 0.05rem;
  border-radius: 0.1rem;
  text-decoration: underline dashed 1px;
  text-underline-offset: 0.1rem;
}
a:visited {
  color: var(--link-color);
}
a:hover, a:active {
  background-color: var(--link-color-hover);
  text-decoration: none;
}

a:focus-visible, input:focus-visible {
  outline-style: dashed;
  outline-width: 2px;
  outline-offset: 1px;
}

mark {
  background-color: rgb(255, 212.2154696133, 79);
  color: inherit;
}

p, ul, ol {
  padding: 0;
  padding-bottom: 1.6rem;
  margin: 0;
}
p:last-child, ul:last-child, ol:last-child {
  padding-bottom: 0;
}

ul, ol {
  list-style: disc;
}
ul ul, ul ol, ol ul, ol ol {
  padding-bottom: 0;
  margin: 0;
}
ul li, ol li {
  margin: 0;
  margin-left: 1.6rem;
  line-height: 1.6rem;
}
ul.nolist, ol.nolist {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.nolist li, ol.nolist li {
  display: inline;
  margin: 0;
  padding: 0;
}

::selection, ::-moz-selection {
  background-color: #0f7e84;
  color: #FDF7E7;
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-align: left;
  font-size: 1em;
  padding: 0;
  margin: 0;
  font-weight: 400;
  padding-bottom: 1.6rem;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a {
  border: none;
}

sup > a, sub > a {
  color: #CB357D;
  background-color: transparent;
}
sup > a:hover, sup > a:focus, sup > a:active, sub > a:hover, sub > a:focus, sub > a:active {
  color: rgb(163.031496063, 41.968503937, 100.0787401575);
}

h1, .title-1, .main-title,
.page-title {
  font-family: "Comic Neue Bold Italic", sans-serif;
  font-size: 3rem;
  line-height: 3.2rem;
  font-weight: 800;
  color: #CB357D;
  letter-spacing: -3px;
  font-style: italic;
}

h2, .title-2 {
  font-size: 2.441rem;
  line-height: 3.2rem;
  font-weight: 300;
}

h3, .title-3 {
  font-size: 1.953rem;
  line-height: 3.2rem;
  font-weight: 600;
}

h4, .title-4 {
  font-size: 1.563rem;
  line-height: 3.2rem;
  font-weight: 800;
}

h5, .title-5 {
  font-size: 1.25rem;
  line-height: 1.6rem;
  font-weight: 600;
}

h6, .title-6 {
  font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 800;
}

hr {
  border: 0px solid rgba(1, 1, 1, 0.15);
  border-bottom: 1px;
  margin: 1.5em;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

.small-text, small {
  font-size: 0.9em;
}

.time {
  font-style: italic;
  text-align: right;
  width: 100%;
  display: block;
}

#wrapper {
  background-color: #FDF7E7;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  color: currentColor;
  position: relative;
  top: 0.1em;
}

.social .icon {
  top: 0;
}

.toolbar .icon {
  top: 0.2em;
}

.btn {
  border: 0px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px 3px 3px 3px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.btn:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -0.8em;
  right: -0.8em;
  bottom: 0;
  z-index: -1;
  transform: skewX(-15deg);
  transition: background-color 0.3s;
  border-radius: 6px;
}
.btn {
  background-color: transparent;
  text-decoration: none;
  padding: 0.5333333333em 1.6em;
  margin: 0.5333333333em 0.8em 1.6rem;
  line-height: 1.6rem;
  height: auto;
  transition: background-color 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
  outline-color: var(--accent-color);
  color: var(--text-color-contrast);
  background: none !important;
}
.btn::before {
  background-color: var(--accent-color);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.btn:visited {
  color: var(--text-color-contrast);
}
.btn:hover::before, .btn:active::before {
  background-color: var(--accent-color-hover);
}
.btn:hover, .btn:active {
  outline-color: var(--accent-color-hover);
  box-shadow: none;
}
.btn {
  font-weight: 400;
}
p .btn:last-child {
  margin-bottom: 0;
}
.btn .fake {
  background-color: transparent !important;
}
.btn .fake::before {
  background-color: transparent !important;
}
.btn .fake {
  color: var(--text-color);
}

.btn.disabled, .btn:disabled {
  opacity: 0.8;
  background-color: var(--accent-color) !important;
  outline-color: var(--accent-color) !important;
  color: var(--text-color-contrast) !important;
}

.btn-small {
  padding: 0.1333333333em 0.2em;
  margin: 0.1333333333em 0.2em 1.6rem;
}
.btn-small:before {
  left: -0.2em;
  right: -0.2em;
}

.btn-readmore, .btn-link {
  color: var(--link-color);
}
.btn-readmore:visited, .btn-link:visited {
  color: var(--link-color);
}
.btn-readmore, .btn-link {
  background-color: transparent !important;
}
.btn-readmore::before, .btn-link::before {
  background-color: transparent;
  box-shadow: none;
}
.btn-readmore:hover::before, .btn-readmore:active::before, .btn-link:hover::before, .btn-link:active::before {
  background-color: var(--link-color-hover);
}

.btn-toolbar {
  padding: 0 1.6em;
}

.btn-group > .btn {
  border-radius: 3px 3px 3px 3px;
  margin: 0 0 0 0 !important;
}
.btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group:not(:first-child) > .btn:before {
  content: " " !important;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

ul.breadcrumb, ol.breadcrumb, .breadcrumb {
  border: 0px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px 3px 3px 3px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
ul.breadcrumb:before, ol.breadcrumb:before, .breadcrumb:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -0.8em;
  right: -0.8em;
  bottom: 0;
  z-index: -1;
  transform: skewX(-15deg);
  transition: background-color 0.3s;
  border-radius: 6px;
}
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
  background-color: transparent;
  background-color: #eee8d5;
}
ul.breadcrumb::before, ol.breadcrumb::before, .breadcrumb::before {
  background-color: #eee8d5;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
  padding: 0.8em;
  margin: 0 0 1.6rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
ul.breadcrumb li, ol.breadcrumb li, .breadcrumb li {
  margin: 0;
}
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
  list-style: none;
}

.breadcrumb li:not(:first-child)::before {
  content: "/";
  padding: 0.3rem;
}
.breadcrumb .active {
  font-weight: 600;
}

.badge {
  line-height: 1.5em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  text-decoration: none !important;
  background-color: var(--accent-color);
  color: var(--text-color-contrast);
  border-radius: 3px;
}

#paginator {
  padding-bottom: 1.6rem;
}
#paginator ul {
  display: flex;
  justify-content: end;
  list-style: none;
}
#paginator ul li {
  margin: 0.25rem;
}
#paginator .nav-links {
  text-align: center;
  width: 100%;
}
#paginator .pagination-page a,
#paginator .left a,
#paginator .right a {
  border: 0px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px 3px 3px 3px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
#paginator .pagination-page a:before,
#paginator .left a:before,
#paginator .right a:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -0.2em;
  right: -0.2em;
  bottom: 0;
  z-index: -1;
  transform: skewX(-15deg);
  transition: background-color 0.3s;
  border-radius: 6px;
}
#paginator .pagination-page a,
#paginator .left a,
#paginator .right a {
  background-color: transparent;
  padding: 0.2em 0.4em;
  margin: 0.2em;
  text-decoration: none;
}
#paginator .pagination-page a:not(.current-page):not(span),
#paginator .left a:not(.current-page):not(span),
#paginator .right a:not(.current-page):not(span) {
  outline-color: var(--accent-color);
  color: var(--link-color);
}
#paginator .pagination-page a:not(.current-page):not(span):hover::before,
#paginator .left a:not(.current-page):not(span):hover::before,
#paginator .right a:not(.current-page):not(span):hover::before {
  background-color: var(--link-color-hover);
}
#paginator .pagination-page a.current-page,
#paginator .left a.current-page,
#paginator .right a.current-page {
  background-color: #CB357D;
  color: #FDF7E7;
}
#paginator .pagination-page a.current-page::before,
#paginator .left a.current-page::before,
#paginator .right a.current-page::before {
  background-color: #CB357D;
}

.card {
  border-radius: 6px 6px 6px 6px;
  background-color: #eee8d5;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
  border: none;
  margin: 0;
  margin-bottom: 1.6rem;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.card > * {
  margin-left: 1em;
  margin-right: 1em;
}
.card > *:first-child, .card > *.sr-only:first-child ~ * {
  margin-top: 2em;
}
.card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
  margin-top: 0.8em;
  letter-spacing: normal;
}
.card > *:last-child {
  margin-bottom: 2em;
}
.card > *:last-child.card-header {
  margin-bottom: 0.8em;
}
.card {
  display: flex;
  flex-direction: column;
  color: #073642;
}
.card-body {
  padding: 0 !important;
}
.card-header {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 1em;
  font-weight: 600;
  padding: 1em 1.6em;
  padding-bottom: 1em !important;
  margin: 0.8em 0px;
  line-height: 1;
  position: relative;
  left: 0px;
  width: 85%;
  border: 0px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px 3px 3px 3px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.card-header:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -1em;
  right: -1em;
  bottom: 0;
  z-index: -1;
  transform: skewX(-15deg);
  transition: background-color 0.3s;
  border-radius: 6px;
}
.card-header {
  background-color: transparent;
  border-radius: 0;
}
.card-header:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.card-header:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.card-header .icon {
  margin-right: 0.25em;
}
.card-header {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: var(--text-color-contrast);
}
.card-header::before {
  background-color: var(--accent-color);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

ul.card-list, .card > ul {
  padding: 0;
  margin: 0;
}
ul.card-list li.list-element, .card > ul li.list-element {
  line-height: 0.8em;
  padding: 0.4em, 0.4em, 0.4em, 0.8em;
  margin: 0;
}

.menu, .plugin ul:not(.flat-list):has(a) {
  display: flex;
  flex-direction: column;
}
.menu ul,
.menu li, .plugin ul:not(.flat-list):has(a) ul,
.plugin ul:not(.flat-list):has(a) li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu.toolbar a, .menu.toolbar a:visited, .plugin ul:not(.flat-list):has(a).toolbar a, .plugin ul:not(.flat-list):has(a).toolbar a:visited {
  margin: 0px 2px;
}
.menu a,
.menu a:visited, .plugin ul:not(.flat-list):has(a) a,
.plugin ul:not(.flat-list):has(a) a:visited {
  display: block;
  line-height: 1.6em;
  padding: 0.4em;
  margin: 2px 0px;
  align-items: center;
  text-decoration: none;
  border-radius: 3px;
  word-wrap: none;
  text-overflow: ellipsis;
  overflow: hidden;
}
.menu a .badge,
.menu a:visited .badge, .plugin ul:not(.flat-list):has(a) a .badge,
.plugin ul:not(.flat-list):has(a) a:visited .badge {
  margin: 0;
}
.menu a, .plugin ul:not(.flat-list):has(a) a {
  color: var(--text-color);
  outline-color: var(--text-color);
}
.menu a:hover, .menu a:active, .menu a.submenu:focus, .menu a.active, .plugin ul:not(.flat-list):has(a) a:hover, .plugin ul:not(.flat-list):has(a) a:active, .plugin ul:not(.flat-list):has(a) a.submenu:focus, .plugin ul:not(.flat-list):has(a) a.active {
  background-color: var(--link-color-hover);
}

.submenu .fa-caret-down {
  position: relative;
  top: 2px;
  font-size: 0.8em;
}

.toolbar {
  flex-direction: row;
  padding: 0.4em;
}
.toolbar ul {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.toolbar li {
  text-align: center;
  position: relative;
}
.toolbar li a,
.toolbar li span,
.toolbar li em,
.toolbar li strong, .toolbar li.toolbar-element {
  display: block;
  padding: 0.5333333333em 0.8em;
}
.toolbar li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 0rem;
  left: 0;
  display: none;
  padding: 0.33rem;
  z-index: 2;
  background-color: #eee8d5;
}
.toolbar li:hover ul,
.toolbar li ul:hover, .toolbar li:focus-within ul {
  visibility: visible;
  opacity: 1;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  width: max-content;
}
.toolbar li:hover ul li,
.toolbar li ul:hover li, .toolbar li:focus-within ul li {
  text-align: left;
}

.menu-divider,
.menu ul h1,
ul.menu h1,
.menu h2,
ul.menu h2 {
  position: relative;
  left: -0.4em;
  font-weight: 800;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  font-size: 1em;
  line-height: 1.6em;
}

.menu-label {
  transition: background-color 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
}
.menu-label:hover, .menu-label:active {
  background-color: transparent;
}
.menu-label {
  padding-left: 0.4em;
  padding-right: 0.4em;
}

.flat-list li {
  display: inline-block;
  margin: 0;
  margin-right: 0px;
  margin-right: 0.33rem;
}

.plugin a.active {
  font-weight: bold;
}

.plugin ul:not(.flat-list) li a {
  padding: 0.2em 0.4em;
}

blockquote, .quote, .well, pre, .pre, .well-pre, .toast, .code, details, .markdown-alert {
  border: 0;
  border-radius: 6px;
  margin: 0 0 1.6rem 0;
  padding: 1.6rem 1rem 1.6rem 1rem;
  max-width: 100%;
  font-style: italic;
  background-color: #eee8d5;
  color: #073642;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
}

details {
  font-style: unset;
}

.well {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.markdown-alert-title {
  padding-bottom: 0;
  font-weight: bolder;
}

.toast, .markdown-alert {
  background-color: var(--accent-color);
  color: var(--text-color-contrast);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

code {
  font-family: monospace, monospace;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table:not(.flat) {
  border-radius: 6px 6px 6px 6px;
  background-color: #eee8d5;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
  border: none;
  margin: 0;
  margin-bottom: 1.6rem;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
table:not(.flat) > * {
  margin-left: 1em;
  margin-right: 1em;
}
table:not(.flat) > *:first-child, table:not(.flat) > *.sr-only:first-child ~ * {
  margin-top: 2em;
}
table:not(.flat) > *:first-child.card-header, table:not(.flat) > *.sr-only:first-child ~ *.card-header {
  margin-top: 0.8em;
  letter-spacing: normal;
}
table:not(.flat) > *:last-child {
  margin-bottom: 2em;
}
table:not(.flat) > *:last-child.card-header {
  margin-bottom: 0.8em;
}
table {
  border-collapse: collapse;
  overflow: hidden;
  margin: auto;
  margin-bottom: 1.6rem;
  border: 0;
}

th, td {
  vertical-align: middle;
  padding: 0.325em 0.5em;
  white-space: normal;
  margin: 0;
  min-width: 6rem;
}

table:not(.flat) td {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

tr:first-child > td {
  border-top: 0;
}

tr:last-child > td {
  border-bottom: 0;
}

td:first-child {
  border-left: 0;
}

td:last-child {
  border-right: 0;
}

th {
  font-weight: 800;
}
table:not(.flat) th {
  background-color: #CB357D;
  color: white;
}

.sidebar-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 1.6rem;
  column-gap: 3.2rem;
  grid-template-areas: "side" "main";
}
@media (min-width: 992px) {
  .sidebar-container {
    grid-template-columns: 360px auto;
    grid-template-areas: "side main";
  }
}
.sidebar-container .sidebar {
  padding: 1rem;
}

input,
textarea {
  width: 100%;
  background-color: #eee8d5;
  border-radius: 6px;
  border: 0px solid rgba(0, 0, 0, 0);
  padding: 0.4em;
  line-height: 1.6em;
  overflow: auto;
}
.card input,
.card textarea {
  background-color: #FDF7E7;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 2px dotted var(--accent-color);
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  appearance: textfield;
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

.screen-reader-text, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  transition-delay: 0.8s;
  transition-property: opacity;
  transition-duration: 0.2s;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

a.sr-hover {
  position: relative;
  overflow: visible;
}

.sr-hover:hover .sr-only {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 9px;
  margin: 0px;
  font-size: 1rem;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 1;
}

.article img::before {
  content: "alt";
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip:focus-within {
  position: static;
  width: auto;
  height: auto;
}

.flex-that {
  display: flex;
  justify-content: space-between;
}

.align-center {
  text-align: center;
  text-indent: 0 !important;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

.icon-fw {
  width: 1em;
  display: inline-block;
  text-align: center;
}

.round, .pill {
  border-radius: 9999px;
}

.no-borders {
  border-width: 0px;
  border-style: none;
}

.bg-dark {
  background-color: #002b36;
  color: #FDF7E7;
}
.bg-dark a {
  color: currentColor;
  outline-color: currentColor;
}

.c-primary, .btn-primary, .head-primary, .text-primary {
  --accent-color: #CB357D;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(173.1712598425, 44.5787401575, 106.3031496063);
}
.c-secondary, .btn-secondary, .head-secondary, .text-secondary {
  --accent-color: #0f7e84;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(11.0969387755, 93.2142857143, 97.6530612245);
}
.c-warning, .btn-warning, .head-warning, .text-warning {
  --accent-color: #cb4b16;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(168.49, 62.25, 18.26);
}
.c-danger, .btn-danger, .head-danger, .text-danger {
  --accent-color: #dc322f;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(195.8024691358, 35.7716049383, 32.9475308642);
}
.c-info, .btn-info, .head-info, .text-info {
  --accent-color: #0f7e84;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(11.0969387755, 93.2142857143, 97.6530612245);
}
.c-success, .btn-success, .head-success, .text-success {
  --accent-color: #859900;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(99.75, 114.75, 0);
}
.c-muted, .btn-muted, .head-muted, .text-muted {
  --accent-color: #586e75;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(71.5804878049, 89.4756097561, 95.1695121951);
}
.c-light, .btn-light, .head-light, .text-light {
  --accent-color: #FDF7E7;
  --text-color-contrast: #073642;
  --accent-color-hover: rgb(250.0576923077, 235.2307692308, 195.6923076923);
}
.c-dark, .btn-dark, .head-dark, .text-dark {
  --accent-color: #002b36;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(0, 59.2444444444, 74.4);
}

.markdown-alert-note {
  --accent-color: #CB357D;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(173.1712598425, 44.5787401575, 106.3031496063);
}

.markdown-alert-tip {
  --accent-color: #0f7e84;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(11.0969387755, 93.2142857143, 97.6530612245);
}

.markdown-alert-important {
  --accent-color: #dc322f;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(195.8024691358, 35.7716049383, 32.9475308642);
}

.markdown-alert-warning {
  --accent-color: #cb4b16;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(168.49, 62.25, 18.26);
}

.markdown-alert-caution {
  --accent-color: #dc322f;
  --text-color-contrast: #FDF7E7;
  --accent-color-hover: rgb(195.8024691358, 35.7716049383, 32.9475308642);
}

.fg-light {
  --text-color:#FDF7E7;
  --link-color-hover:rgba(253, 247, 231, 0.3);
}

.fg-dark {
  color: #073642;
  --text-color:#073642;
  --link-color-hover:rgba(7, 54, 66, 0.15);
}

.no-pills {
  list-style: none;
}

.m-half {
  margin: 0.8rem;
}
.mb-half {
  margin-bottom: 0.8rem;
}
.mr-half {
  margin-right: 0.8rem;
}
.ml-half {
  margin-left: 0.8rem;
}
.mt-half {
  margin-top: 0.8rem;
}
.m-0 {
  margin: 0rem;
}
.mb-0 {
  margin-bottom: 0rem;
}
.mr-0 {
  margin-right: 0rem;
}
.ml-0 {
  margin-left: 0rem;
}
.mt-0 {
  margin-top: 0rem;
}
.m-1 {
  margin: 1.6rem;
}
.mb-1 {
  margin-bottom: 1.6rem;
}
.mr-1 {
  margin-right: 1.6rem;
}
.ml-1 {
  margin-left: 1.6rem;
}
.mt-1 {
  margin-top: 1.6rem;
}
.m-2 {
  margin: 3.2rem;
}
.mb-2 {
  margin-bottom: 3.2rem;
}
.mr-2 {
  margin-right: 3.2rem;
}
.ml-2 {
  margin-left: 3.2rem;
}
.mt-2 {
  margin-top: 3.2rem;
}
.m-3 {
  margin: 4.8rem;
}
.mb-3 {
  margin-bottom: 4.8rem;
}
.mr-3 {
  margin-right: 4.8rem;
}
.ml-3 {
  margin-left: 4.8rem;
}
.mt-3 {
  margin-top: 4.8rem;
}
.m-4 {
  margin: 6.4rem;
}
.mb-4 {
  margin-bottom: 6.4rem;
}
.mr-4 {
  margin-right: 6.4rem;
}
.ml-4 {
  margin-left: 6.4rem;
}
.mt-4 {
  margin-top: 6.4rem;
}

.p-half {
  padding: 0.8rem;
}
.pb-half {
  padding-bottom: 0.8rem;
}
.pr-half {
  padding-right: 0.8rem;
}
.pl-half {
  padding-left: 0.8rem;
}
.pt-half {
  padding-top: 0.8rem;
}
.p-0 {
  padding: 0rem;
}
.pb-0 {
  padding-bottom: 0rem;
}
.pr-0 {
  padding-right: 0rem;
}
.pl-0 {
  padding-left: 0rem;
}
.pt-0 {
  padding-top: 0rem;
}
.p-1 {
  padding: 1.6rem;
}
.pb-1 {
  padding-bottom: 1.6rem;
}
.pr-1 {
  padding-right: 1.6rem;
}
.pl-1 {
  padding-left: 1.6rem;
}
.pt-1 {
  padding-top: 1.6rem;
}
.p-2 {
  padding: 3.2rem;
}
.pb-2 {
  padding-bottom: 3.2rem;
}
.pr-2 {
  padding-right: 3.2rem;
}
.pl-2 {
  padding-left: 3.2rem;
}
.pt-2 {
  padding-top: 3.2rem;
}
.p-3 {
  padding: 4.8rem;
}
.pb-3 {
  padding-bottom: 4.8rem;
}
.pr-3 {
  padding-right: 4.8rem;
}
.pl-3 {
  padding-left: 4.8rem;
}
.pt-3 {
  padding-top: 4.8rem;
}
.p-4 {
  padding: 6.4rem;
}
.pb-4 {
  padding-bottom: 6.4rem;
}
.pr-4 {
  padding-right: 6.4rem;
}
.pl-4 {
  padding-left: 6.4rem;
}
.pt-4 {
  padding-top: 6.4rem;
}

.ellipsis {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 0;
  padding-right: 6px;
}

.f-column {
  display: flex;
  flex-direction: column;
}
.f-column.reverse {
  flex-direction: column-reverse;
}

.f-row {
  display: flex;
  flex-direction: row;
}
.f-row.reverse {
  flex-direction: row-reverse;
}

.f-center {
  justify-content: center;
}
@media (min-width: 576px) {
  .f-center-sm {
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .f-center-md {
    justify-content: center;
  }
}
@media (min-width: 992px) {
  .f-center-lg {
    justify-content: center;
  }
}
@media (min-width: 1320px) {
  .f-center-xl {
    justify-content: center;
  }
}
@media (min-width: 1600px) {
  .f-center-xxl {
    justify-content: center;
  }
}

.f-around {
  justify-content: space-around;
}
@media (min-width: 576px) {
  .f-around-sm {
    justify-content: space-around;
  }
}
@media (min-width: 768px) {
  .f-around-md {
    justify-content: space-around;
  }
}
@media (min-width: 992px) {
  .f-around-lg {
    justify-content: space-around;
  }
}
@media (min-width: 1320px) {
  .f-around-xl {
    justify-content: space-around;
  }
}
@media (min-width: 1600px) {
  .f-around-xxl {
    justify-content: space-around;
  }
}

.f-between {
  justify-content: space-between;
}
@media (min-width: 576px) {
  .f-between-sm {
    justify-content: space-between;
  }
}
@media (min-width: 768px) {
  .f-between-md {
    justify-content: space-between;
  }
}
@media (min-width: 992px) {
  .f-between-lg {
    justify-content: space-between;
  }
}
@media (min-width: 1320px) {
  .f-between-xl {
    justify-content: space-between;
  }
}
@media (min-width: 1600px) {
  .f-between-xxl {
    justify-content: space-between;
  }
}

.f-start {
  justify-content: flex-start;
}
@media (min-width: 576px) {
  .f-start-sm {
    justify-content: flex-start;
  }
}
@media (min-width: 768px) {
  .f-start-md {
    justify-content: flex-start;
  }
}
@media (min-width: 992px) {
  .f-start-lg {
    justify-content: flex-start;
  }
}
@media (min-width: 1320px) {
  .f-start-xl {
    justify-content: flex-start;
  }
}
@media (min-width: 1600px) {
  .f-start-xxl {
    justify-content: flex-start;
  }
}

.f-end {
  justify-content: flex-end;
}
@media (min-width: 576px) {
  .f-end-sm {
    justify-content: flex-end;
  }
}
@media (min-width: 768px) {
  .f-end-md {
    justify-content: flex-end;
  }
}
@media (min-width: 992px) {
  .f-end-lg {
    justify-content: flex-end;
  }
}
@media (min-width: 1320px) {
  .f-end-xl {
    justify-content: flex-end;
  }
}
@media (min-width: 1600px) {
  .f-end-xxl {
    justify-content: flex-end;
  }
}

.d-none {
  display: none !important;
}
@media (min-width: 576px) {
  .d-none-sm {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .d-none-md {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .d-none-lg {
    display: none !important;
  }
}
@media (min-width: 1320px) {
  .d-none-xl {
    display: none !important;
  }
}
@media (min-width: 1600px) {
  .d-none-xxl {
    display: none !important;
  }
}

.d-block {
  display: block !important;
}
@media (min-width: 576px) {
  .d-block-sm {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .d-block-md {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .d-block-lg {
    display: block !important;
  }
}
@media (min-width: 1320px) {
  .d-block-xl {
    display: block !important;
  }
}
@media (min-width: 1600px) {
  .d-block-xxl {
    display: block !important;
  }
}

.d-flex {
  display: flex !important;
}
@media (min-width: 576px) {
  .d-flex-sm {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  .d-flex-md {
    display: flex !important;
  }
}
@media (min-width: 992px) {
  .d-flex-lg {
    display: flex !important;
  }
}
@media (min-width: 1320px) {
  .d-flex-xl {
    display: flex !important;
  }
}
@media (min-width: 1600px) {
  .d-flex-xxl {
    display: flex !important;
  }
}

.no-pills {
  list-style: none;
}

.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

#description {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "illustration" "content";
}
@media (min-width: 1320px) {
  #description {
    grid-template-columns: 400px auto;
    grid-template-areas: "title title" "illustration content";
  }
}

#desc-title {
  grid-area: title;
}

#description-content {
  position: relative;
  z-index: 1;
  grid-area: content;
}

.illustration, .illustration img {
  display: block;
  margin: auto;
  grid-area: illustration;
  max-width: 100%;
  height: auto;
}
@media (min-width: 1320px) {
  .illustration, .illustration img {
    padding-bottom: 0;
    max-width: 530px;
    margin-bottom: 1.5rem;
    position: relative;
    top: 0px;
    right: 64px;
  }
}

.align-centered-block {
  text-align: center;
  padding: 1rem;
}

#page-header {
  background: #0f7e84 url("data:image/svg+xml,%3Csvg width='800' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='420' cy='440' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='700' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='-100' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='150' cy='380' r='150' fill='%23FDF7E7' /%3E%3C/svg%3E");
  border-top: 6px solid #002b36;
  background-position: bottom center;
  background-repeat: repeat-x;
  margin-bottom: 0;
  padding-bottom: 6rem;
}
#page-header .fa {
  font-size: 1rem;
}
@media (min-width: 576px) {
  #page-header {
    padding-bottom: 0;
    margin-bottom: 1.5rem;
  }
}

header h1 {
  border-style: none !important;
  font-weight: 800;
  font-size: 5.4em;
  font-style: oblique;
  padding: 0rem;
  line-height: 1rem;
  max-width: 992px;
  margin: auto;
  text-align: center;
}
@media (min-width: 1320px) {
  header h1 {
    text-align: left;
  }
}
@media (min-width: 1400px) {
  header h1 {
    max-width: 1320px;
  }
}
header h1 img {
  max-width: 560px;
  height: auto;
  margin-top: 0rem;
  width: 100%;
}
@media (min-width: 1320px) {
  header h1 img {
    position: relative;
    left: -4rem;
  }
}
header h1 img {
  z-index: 0;
}
header h1 a, header h1 a:visited, header h1 a:hover {
  background-color: transparent;
  outline-color: white;
  display: block;
}

.osd {
  background-color: rgba(0, 0, 0, 0.3);
}

.navbar {
  border-left: 0;
  border-right: 0;
  padding: 0.75rem;
  color: #FDF7E7;
}
.navbar a {
  color: #FDF7E7;
}
.navbar li {
  margin: 0;
}

.categories {
  font-weight: 800;
  font-size: 0.8rem;
}

.dropdown-menu {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
}

.container, .container-big {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  max-width: 800px;
  margin: auto;
}
@media (min-width: 992px) {
  .container, .container-big {
    max-width: 992px;
  }
}
@media (min-width: 1400px) {
  .container, .container-big {
    max-width: 1320px;
  }
}

.container-blog {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  max-width: 800px;
  margin: auto;
}
@media (min-width: 992px) {
  .container-blog {
    max-width: 992px;
  }
}
@media (min-width: 1400px) {
  .container-blog {
    max-width: 1320px;
  }
}
.container-blog {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 1.6rem;
  column-gap: 1.5rem;
  grid-template-areas: "main" "side";
}
@media (min-width: 992px) {
  .container-blog {
    grid-template-columns: auto 280px;
    grid-template-areas: "main side";
  }
}
@media (min-width: 1600px) {
  .container-blog {
    grid-template-columns: auto 320px;
  }
}

.grid-2-elements {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 1.6rem;
  column-gap: 1.5rem;
}
@media (min-width: 992px) {
  .grid-2-elements {
    grid-template-columns: 1fr 1fr;
  }
}

.fullwidth {
  grid-column: span 2;
}

ul.tag-list {
  display: flex;
  padding-bottom: 0;
  overflow: hidden;
  height: auto;
  flex-wrap: wrap;
}
ul.tag-list li {
  list-style: none;
  margin: 3px;
}

.container-preview {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  max-width: 800px;
  margin: auto;
}
@media (min-width: 992px) {
  .container-preview {
    max-width: 992px;
  }
}
@media (min-width: 1400px) {
  .container-preview {
    max-width: 1320px;
  }
}
.container-preview {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 1.6rem;
  column-gap: 3rem;
  grid-template-areas: "main" "side";
}
@media (min-width: 992px) {
  .container-preview {
    grid-template-columns: 360px auto;
    grid-template-areas: "side main";
  }
}

.container-onecolumn {
  max-width: 1280px;
  margin: auto;
  padding-bottom: 1.6rem;
}

body {
  background-color: #002b36;
}

footer {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  color: #FDF7E7;
  background-color: #002b36;
}
@media (min-width: 768px) {
  footer .columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.6rem;
  }
}
footer .columns .col {
  margin-bottom: 1.6rem;
}

.home-toast {
  max-width: 800px;
  width: 100%;
  margin: auto;
}

ul.social {
  font-size: 1.5em;
  padding-bottom: 1.5em;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
ul.social li {
  margin: 0;
  list-style: none;
  line-height: 1;
}
ul.social li a,
ul.social li a:visited {
  color: #FDF7E7;
  background-color: var(--accent-color);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
  padding: 0.3em;
  width: 3rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 100%;
  line-height: 1;
  margin: 0.33rem;
}
ul.social li a:hover,
ul.social li a:visited:hover {
  background-color: var(--accent-color-hover);
}

.sidebar {
  grid-area: side;
}

.sidebar section, .mainbar section {
  margin-bottom: 1rem;
}
.sidebar .plugin, .mainbar .plugin {
  border-radius: 6px 6px 6px 6px;
  background-color: #eee8d5;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
  border: none;
  margin: 0;
  margin-bottom: 1.6rem;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.sidebar .plugin > *, .mainbar .plugin > * {
  margin-left: 1em;
  margin-right: 1em;
}
.sidebar .plugin > *:first-child, .sidebar .plugin > *.sr-only:first-child ~ *, .mainbar .plugin > *:first-child, .mainbar .plugin > *.sr-only:first-child ~ * {
  margin-top: 2em;
}
.sidebar .plugin > *:first-child.card-header, .sidebar .plugin > *.sr-only:first-child ~ *.card-header, .mainbar .plugin > *:first-child.card-header, .mainbar .plugin > *.sr-only:first-child ~ *.card-header {
  margin-top: 0.8em;
  letter-spacing: normal;
}
.sidebar .plugin > *:last-child, .mainbar .plugin > *:last-child {
  margin-bottom: 2em;
}
.sidebar .plugin > *:last-child.card-header, .mainbar .plugin > *:last-child.card-header {
  margin-bottom: 0.8em;
}
.sidebar .plugin, .mainbar .plugin {
  display: flex;
  flex-direction: column;
  color: #073642;
}
.sidebar .plugin-label, .mainbar .plugin-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 1em;
  font-weight: 600;
  padding: 1em 1.6em;
  padding-bottom: 1em !important;
  margin: 0.8em 0px;
  line-height: 1;
  position: relative;
  left: 0px;
  width: 85%;
  border: 0px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px 3px 3px 3px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.sidebar .plugin-label:before, .mainbar .plugin-label:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -1em;
  right: -1em;
  bottom: 0;
  z-index: -1;
  transform: skewX(-15deg);
  transition: background-color 0.3s;
  border-radius: 6px;
}
.sidebar .plugin-label, .mainbar .plugin-label {
  background-color: transparent;
  border-radius: 0;
}
.sidebar .plugin-label:first-child, .mainbar .plugin-label:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.sidebar .plugin-label:last-child, .mainbar .plugin-label:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.sidebar .plugin-label, .mainbar .plugin-label {
  margin-top: 0.8em !important;
}
.sidebar .plugin-label .icon, .mainbar .plugin-label .icon {
  margin-right: 0.25em;
}
.sidebar .plugin-label, .mainbar .plugin-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: var(--text-color-contrast);
}
.sidebar .plugin-label::before, .mainbar .plugin-label::before {
  background-color: var(--accent-color);
}

iframe {
  width: 100%;
  height: 428px;
  border: none;
}

.global-topbar {
  max-width: 992px;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding-left: 120px;
  border-radius: 6px;
  position: relative;
  box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
  display: none;
}
@media (min-width: 992px) {
  .global-topbar {
    display: flex;
  }
}
@media (min-width: 1400px) {
  .global-topbar {
    max-width: 1320px;
  }
}
.global-topbar img.myavatar {
  position: absolute;
  height: 96px;
  top: -18px;
  width: 96px;
  left: 16px;
  margin: 0;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 1.6rem;
  padding-bottom: 1.6rem;
}
@media (min-width: 768px) {
  .preview-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1320px) {
  .preview-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1320px) {
  .preview-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.preview-container {
  width: 100%;
}

@media (min-width: 992px) {
  .prev-col-2 .preview-container {
    width: 50%;
  }
  .prev-col-3 .preview-container {
    width: 33%;
  }
  .prev-col-4 .preview-container {
    width: 25%;
  }
}
.card-preview {
  padding: 0;
  width: 100%;
  margin: auto;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
  max-width: 360px;
}

.preview-link {
  padding: 0;
  background-color: transparent;
  margin: 0 !important;
  text-decoration: none;
  position: relative;
  height: 12.8rem;
}
.preview-link .card-header {
  letter-spacing: normal;
  padding: 0.4rem 1.6em;
  padding-bottom: 0.4rem !important;
}
.preview-link .card-header:before {
  left: -0.4rem;
  right: -0.4rem;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.preview-link .card-header {
  position: absolute;
  margin: 0;
  top: 0.5rem;
  z-index: 1;
  min-height: 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.preview-content {
  font-size: 0.9rem;
  height: 100%;
  width: 100%;
  line-height: 1.6rem !important;
  text-align: justify;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(7, 54, 66, 0.7);
  position: relative;
  overflow: hidden;
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.preview-content .preview-overlay {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 0.4em;
  backdrop-filter: none;
  transition: background-color 0.3s, backdrop-filter 0.3s;
  overflow: hidden;
  border-radius: 6px 6px 6px 6px;
}
.preview-content:hover .preview-overlay {
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.4);
}
.preview-content:hover .preview-overlay .metadata-pills {
  opacity: 0.9;
  transition: opacity 0.5s, height 0.5s;
}
.preview-content:hover .preview-overlay .comment-text {
  bottom: 0px;
}

.preview-exerpt {
  max-height: 12.8rem;
  overflow: hidden;
  background-size: cover;
  min-height: 100%;
  min-width: 100%;
  border-radius: 6px 6px 6px 6px;
  font-size: 0.85rem;
  line-height: 1.25rem;
  display: flex;
  -ms-flex-align: center !important;
  align-items: center !important;
  justify-content: center;
}
.preview-exerpt h1, .preview-exerpt h2, .preview-exerpt h3, .preview-exerpt h4, .preview-exerpt h5, .preview-exerpt h6 {
  margin-bottom: 0px;
  max-width: 100%;
  display: none;
}
.preview-exerpt > p {
  width: 100%;
  margin: auto;
}
.preview-exerpt > p:not(.p-img) {
  position: absolute;
  top: 3rem;
  padding: 0.5rem;
}
.preview-exerpt > p > img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  margin: auto;
  text-align: center;
}
.preview-exerpt > p.p-img {
  text-align: center;
  margin: auto;
  padding: auto;
  display: block;
  width: 100%;
}

.preview-metadata {
  color: #FDF7E7;
  height: 100%;
  overflow: hidden;
  border-radius: 6px 6px 6px 6px;
}
.preview-metadata .metadata-pills {
  opacity: 0;
  transition: opacity 0.3s, height 0.3s;
  display: flex;
  justify-content: space-between;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  font-size: 0.9em;
  padding-top: 3rem;
}

.card-preview.head-info .comment-text {
  position: relative;
}
.card-preview.head-info .comment-text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 16' fill='rgb(15,126,132)' fill-opacity='1'%3E%3Cpolygon points='0,16 100,16 100,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: -16px;
}
.card-preview.head-info .comment-text {
  background-color: #0f7e84;
}

.card-preview.card-grey .comment-text {
  position: relative;
}
.card-preview.card-grey .comment-text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 16' fill='rgb(88,110,117)' fill-opacity='1'%3E%3Cpolygon points='0,16 100,16 100,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: -16px;
}
.card-preview.card-grey .comment-text {
  background-color: #586e75;
}

.comment-text {
  color: #FDF7E7;
  background-color: #CB357D;
  position: relative;
}
.comment-text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 16' fill='rgb(203,53,125)' fill-opacity='1'%3E%3Cpolygon points='0,16 100,16 100,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: -16px;
}
.comment-text {
  text-align: center;
  position: absolute;
  bottom: -1.6rem;
  width: 100%;
  transition: bottom 0.3s;
}

.card-preview time {
  margin-bottom: 0.4em;
  display: block;
}

.author-area {
  display: flex;
}
.author-area img.author-avatar, .author-area img.avatar {
  display: block;
  height: 4.8rem;
  width: auto;
  border-radius: 100%;
  padding: 0;
  margin: 0;
  margin-right: 1.6rem;
}
.author-area .author-metadata {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.author-area .author-date {
  font-style: italic;
}
.author-area:not(:last-child) {
  margin-bottom: 1.6rem;
}

.pigimg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

.avatar {
  background: transparent;
}

.mwarea {
  padding-bottom: 1.6rem;
}
.mwarea .avatar {
  width: 80%;
  height: auto;
  display: block;
  margin: auto;
}

.cover {
  width: 100%;
  height: auto;
  border-radius: 6px 6px 6px 6px;
}

@media (min-width: 768px) {
  .roman {
    width: 80%;
    position: relative;
    top: -240px;
    margin: auto;
  }
}

.preview-featured {
  font-size: 0.8rem;
}
.preview-featured .preview-link {
  display: block;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
.preview-featured .preview-link .preview-item {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-size: 100% auto;
  background-position: center center;
  transition: background-size 0.5s;
}
.preview-featured .preview-link .preview-item:hover {
  background-size: 120% auto;
}
.preview-featured .preview-overlay {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  color: white !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
  padding: 0.2rem;
}
.preview-featured .preview-overlay h2 {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.article img {
  max-width: 100%;
  height: auto;
  margin: auto;
}
.article .thumbnail img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  object-fit: cover;
}

.article-meta .author-area {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}
.article-meta .author-area img {
  border-radius: 9999px;
  width: 4.8rem;
  height: auto;
  margin: 0;
  margin-right: 0.8rem;
}
.article-meta .article-category .badge {
  display: inline-block;
  margin-bottom: 0.4rem;
}

.header-anchor {
  color: rgba(0, 0, 0, 0.4);
  font-weight: 900;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-decoration: none;
  display: inline-block;
  font-style: normal;
  font-size: 0.75em;
}

.header-anchor {
  opacity: 0;
}

:hover > .header-anchor {
  opacity: 1;
}

.aligncenter {
  text-align: center;
}

.alignright {
  text-align: right;
}

#sommaire {
  position: sticky;
  top: 32px;
}

.nav-sibling {
  display: grid;
  grid-template-columns: min-content min-content auto min-content min-content;
  justify-items: center;
  margin-top: 1rem;
  list-style: none;
  gap: 3px;
}
.nav-sibling li {
  margin: 0;
}

.no-link, .nav-sibling a, .count {
  padding: 3px;
  display: block;
}

.count {
  margin: auto;
  font-weight: bolder;
}

html {
  margin-left: 0;
}

#searchfield {
  outline-color: #eee8d5;
  border-radius: 6px;
  box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
}

#mobile-sidebar {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 280px;
  height: 100vh;
  transition: left 0.2s;
  padding: 1rem;
  overflow: hidden;
}
#mobile-sidebar.shown {
  left: 0;
}
#mobile-sidebar {
  z-index: 11;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6);
}

img.myavatar {
  height: 140px;
  width: auto;
  display: block;
  margin: 1rem auto 1.5rem auto;
  border: 3px solid #FDF7E7;
  box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}
@media (max-width: 1366px) and (max-height: 768px) {
  img.myavatar {
    height: 128px;
    margin: 0.25rem auto 1rem auto;
  }
}

.menu-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #FDF7E7;
  padding: 0.75em;
  border: none;
  font-size: 1.2rem;
  display: flex;
  align-content: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 999px;
  z-index: 12;
}
.menu-button:hover {
  background-color: #CB357D;
}
@media (min-width: 992px) {
  .menu-button {
    display: none;
  }
}

#shrine-container {
  max-width: 900px;
  margin: auto;
}

#shrine-title {
  padding: 10rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  background-size: cover;
  background-position: top -5rem center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
#shrine-title h1 {
  text-align: center;
  font-size: 5rem;
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000, 2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000, 0.05em 0.1em 0 #000;
  color: white !important;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  font-family: "NiseSegaSonic", system-ui, sans-serif;
  line-height: 1.2;
  margin: auto;
  padding: 0;
  font-style: normal;
}

/*# sourceMappingURL=style.css.map */