@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}
@view-transition {
  navigation: auto;
}


* {
    -webkit-transition: background-color 75ms ease-in, border-color 75ms ease-in;
    -moz-transition: background-color 75ms ease-in, border-color 75ms ease-in;
    -ms-transition: background-color 75ms ease-in, border-color 75ms ease-in;
    -o-transition: background-color 75ms ease-in, border-color 75ms ease-in;
    transition: background-color 75ms ease-in, border-color 75ms ease-in;
	font-size:18px;
}
@media screen and (max-width:768px) {
	* {
		font-size:17px;
	}
}

.debug *:hover {
	border:1px red solid;
}

.notransition {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none
}

html {
    overflow-x: hidden;
    width: 100%;
	scrollbar-width: none;
	scrollbar-color: rgba(0, 0, 0, 0) transparent;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
dl,
dd,
ol,
ul,
figure {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    color: #434648;
    background-color: #fff;
    font: 16px/1.85 Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern" 1;
    -o-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    box-sizing: border-box;
    font-family: "Helvetica" !important;
	content-visibility: auto;
	contain-intrinsic-size: 100px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
figure {
    margin-top: 10px;
    margin-bottom: 10px
}

strong,
b {
    font-weight: 700;
    /* color: #0d122b */
}

hr {
    border-bottom: 0;
    border-style: solid;
    border-color: #ececec
}

img {
    max-width: 100%;
    vertical-align: middle;
    -webkit-user-drag: none;
    margin: 0 auto;
    text-align: center
}

figure {
    position: relative
}

figure>img {
    display: block;
    position: relative
}

figcaption {
    text-align: center
}

ul li {
    display: list-item;
    text-align: -webkit-match-parent
}

ol li {
    position: relative
}

ul,
ol {
    margin-top: 0;
    margin-left: 30px
}

li {
    padding-bottom: 1px;
    padding-top: 1px;
}

li:before {
    color: #0d122b
}

li>ul,
li>ol {
    margin-bottom: 2px;
    margin-top: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0d122b;
    font-weight: 700
}

h1+ul,
h1+ol,
h2+ul,
h2+ol,
h3+ul,
h3+ol,
h4+ul,
h4+ol,
h5+ul,
h5+ol,
h6+ul,
h6+ol {
    margin-top: 10px
}

@media screen and (max-width:768px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        scroll-margin-top: 65px
    }
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    text-decoration: none;
    border: none
}

h1>a:hover,
h2>a:hover,
h3>a:hover,
h4>a:hover,
h5>a:hover,
h6>a:hover {
    text-decoration: none;
    border: none
}

a {
    color: inherit;
    text-decoration-color: #d2c7c7;
	text-underline-offset: 6px;
	text-decoration: underline;
}

a:hover {
	opacity:0.7;
}

/* anchor */
h1[id] a,
h2[id] a {
	cursor:pointer;
	color: inherit !important;
	text-decoration: none !important;
}
h1[id] a a,
h2[id] a a {
	color: #4183C4 !important;
}


/*
a:focus {
    outline: 3px solid rgba(0, 54, 199, .6);
    outline-offset: 2px
}
*/

article a[href^="/pages/glossary"] {
    color: #434648 !important;
    text-decoration: underline !important;
    text-decoration-color: #434648 !important
}

del {
    color: inherit
}

em {
    color: inherit
}

blockquote {
    color: #525b66;
    opacity: .9;
    border-left: 5px solid #c4c8cc;
	font-family: monospace;
	background-color:rgba(0, 0, 0, 0.05);

	padding-top:25px;
	padding-bottom:25px;
	padding-right:30px;
    padding-left: 20px;
	border-radius:10px;

	margin:0;

}

citation {
    color:white;
    text-align:justify;
    border:1px gray dashed;
    background-color:gray;
    border-radius:10px;
    padding:10px;
    padding-bottom:10px;
}

cite, div.cite {
    font-family: "Helvetica";
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    color: #777;
	opacity:0.8;
	font-family: monospace;
	letter-spacing:-0.7px;
    font-style: normal;
}
cite:before, div.cite:before {
    font-weight:bold;
    content: "« ";
}
cite:after, div.cite:after {
    font-weight:bold;
    content: " »";
}
sup * {
	font-size:12px;
	padding:0;
	margin:0;
	margin-left:-2px;
}


.wrapper {
    max-width: -webkit-calc(720px - (30px * 2));
    max-width: calc(720px - (30px * 2));
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-right: 30px;
    padding-left: 30px
}

@media screen and (max-width:768px) {
    .wrapper {
        max-width: -webkit-calc(720px - (30px));
        max-width: calc(720px - (30px));
        padding-right: 20px;
        padding-left: 20px
    }
    .wrapper.blurry {
        animation: .2s ease-in forwards blur;
        -webkit-animation: .2s ease-in forwards blur
    }
}

u {
    text-decoration-color: #d2c7c7
}

small {
}

sup {
    border-radius: 10%;
    top: -3px;
    left: 2px;
    position: relative;
    margin-right: 2px
}

.overflow-table {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse;
}

table thead {
    font-weight: 700;
    color: #0d122b;
    border-bottom: 1px solid #ececec;
	background-color:rgba(128, 128, 128, 0.07);
}

table th,
table td,
table tr {
    border: 1px solid #ececec;
    padding: 2px 7px
}

.navbar:after,
.wrapper:after {
    content: "";
    display: table;
    clear: both
}

mark,
::selection {
    background: #fffba0;
    color: #0d122b
}

.gist table {
    border: 0
}

.gist table tr,
.gist table td {
    border: 0
}

.navbar {
    height: auto;
    max-width: calc(890px - (30px * 2));
    max-width: -webkit-calc(890px - (30px * 2));
    position: relative;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid #ececec;
    padding: .5rem .3rem
}

.logo {
    float: left;
    margin: .5rem 0 0 1rem
}
.logo.about {
	display:none;
}

.logo>svg {
    opacity: .7
}

.logo:hover>svg {
    opacity: 1
}

@media screen and (max-width:768px) {
    .logo {
        padding-top: .3rem
    }
}

.menu {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.menu ul {
    margin: 0
}

.menu .menu-separator {
    margin-right: .7rem
}

@media screen and (max-width:768px) {
    .menu .menu-separator {
        display: none
    }
}

.menu a#mode {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: .7;
    z-index: 1
}

.menu a#mode:hover {
    cursor: pointer;
    opacity: 1
}

.menu a#mode:active {
    -webkit-transform: scale(.9, .9);
    transform: scale(.9, .9)
}

.menu a#mode .mode-moon {
    display: block
}

.menu a#mode .mode-moon line {
    stroke: #0d122b;
    fill: none
}

.menu a#mode .mode-moon circle {
    fill: #0d122b;
    stroke: #0d122b
}

.menu a#mode .mode-sunny {
    display: none
}

.menu a#mode .mode-sunny line {
    stroke: #eaeaea;
    fill: none
}

.menu a#mode .mode-sunny circle {
    fill: none;
    stroke: #eaeaea
}

.menu .trigger {
    float: right;
    display: flex;
    align-items: center;
	background-color:white;
}

.menu .menu-trigger {
    display: none
}

.menu .menu-icon {
    display: none
}


.menu li {
    margin: 0;
    padding: 0;
    list-style: none;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none
}

.menu .menu-link {
    color: #0d122b;
	line-height: 2.4;
    text-decoration: none;
    padding: .3rem .5rem;
    opacity: .7;
    letter-spacing: .015rem;
}

.menu .menu-link:hover {
    opacity: 1
}

.menu .menu-link:not(:last-child) {
    margin-right: 5px
}

@media screen and (max-width:768px) {
    .menu .menu-link {
        opacity: .8
    }
}

.menu .menu-link.active {
    opacity: 1;
    font-weight: 600
}

.menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	text-align: center;
	height: 50px;
	background-color: #fff;
	/* border-bottom: 1px solid #ececec */
}
.menu a#mode {
	left: 10px;
	top: 12px
}
.menu .menu-icon {
	display: block;
	position: absolute;
	right: 40px;
	/* margin: .7rem .3rem 0 0;*/
	cursor: pointer;
	text-align: center;
	z-index: 1
}
.menu .menu-icon>svg {
	opacity: .7
}
.menu .menu-icon:hover>svg {
	opacity: 1
}
.menu .menu-icon:active {
	-webkit-transform: scale(.9, .9);
	transform: scale(.9, .9)
}
.menu input[type=checkbox]:not(:checked)~.trigger {
	clear: both;
	visibility: hidden
}
.menu input[type=checkbox]:checked~.trigger {
	position: fixed;
	animation: .2s ease-in forwards fadein;
	-webkit-animation: .2s ease-in forwards fadein;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	width: 100%;
	top: 0
}
.menu .menu-link {
	display: block;
	box-sizing: border-box;
	font-size:18px !important;
}
.menu .menu-link:not(:last-child) {
	margin: 0;
	padding: 2px 0
}


/* --- NAVBAR --- */
.navbar {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ececec;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* --- MENU BAR --- */
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 1rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* --- ICÔNES À GAUCHE --- */
.left-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- HAMBURGER --- */
.menu-icon {
  display: block;
  cursor: pointer;
  z-index: 3;
}

.menu-icon > svg {
  opacity: 0.7;
  vertical-align: middle;
}

.menu-icon:hover > svg {
  opacity: 1;
}

.menu-trigger {
  display: none;
}

/* --- MENU CACHÉ PAR DÉFAUT --- */
.menu-trigger:not(:checked) ~ .trigger {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* --- MENU OUVERT --- */
.menu-trigger:checked ~ .trigger {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: #fff;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* --- LIENS DANS LE MENU --- */
.trigger-container {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-link {
  color: #0d122b;
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0.8;
  margin: 1rem 0;
}

.menu-link:hover {
  opacity: 1;
}

div.navbar div#round-icon {
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	/*
	background-color:rgba(255, 255, 255, 0.5);
	background-color:rgba(52, 152, 219, 0.9);
	background-color:rgba(0, 0, 0, 0.8);
	*/
	border:5px rgb(60, 60, 60) solid;
	height:100px;
	width:100px;
	color: white;
	border-radius: 5px;
	font-family: sans-serif;
	border-radius:300px;
	box-shadow: 0px 2px 15px 5px rgba(0, 0, 0, 0.2);
}
div.navbar div#round-icon img {
	border-radius:300px;
	width:300px;
	height:100%;
}


.author {
    margin-top: 6.3rem;
    margin-bottom: 7.2rem;
    text-align: center
}

@media screen and (max-width:768px) {
    .author {
        margin-bottom: 3em
    }
}

.author .author-avatar {
    width: 256px;
    height: 256px;
    border-radius: 100%;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-animation: .5s ease-in forwards fadein;
    animation: .5s ease-in forwards fadein;
    opacity: 1;
    object-fit: cover
}

.author .author-name {
    margin-bottom: 2px
}

.author .author-bio {
    margin: 0 auto;
    opacity: .9;
    max-width: 393px;
}

.posts-item-note {
    padding-bottom: .3rem;
    font-weight: 500;
    color: #0d122b
}

.post-item {
    display: flex;
    padding-top: 5px;
    padding-bottom: 6px;
    justify-content: space-between;
    flex-direction: row;
    align-items: center
}

.post-item:not(:first-child) {
    border-top: 1px solid #ececec
}

.post-item .post-item-date {
    min-width: 96px;
    color: #0d122b
}

@media screen and (max-width:768px) {
    .post-item .post-item-date {
    }
}

.post-item .post-item-title {
    margin: 0;
    border: 0;
    padding: 0;
    font-weight: 400;
    letter-spacing: .1px
}

@media screen and (max-width:768px) {
    .post-item .post-item-title {
        max-width: 15rem
    }
}

.post-item .post-item-title a {
    color: #434648;
    transition: all 150ms ease-in 0s
}

.post-item .post-item-title a:hover,
.post-item .post-item-title afocus {
    color: #0d122b
}

.footer {
    margin-top: 8em;
    margin-bottom: 2em;
    text-align: center
}

@media screen and (max-width:768px) {
    .footer {
        margin-top: 3em
    }
}

.footer span.footer_item {
    opacity: .8;
    font-weight: 700;
	font-size: 14px;
}

.footer a.footer_item {
    opacity: .8;
    text-decoration: none;
}

.footer a.footer_item:not(:last-child) {
    margin-right: 10px
}

.footer a.footer_item:not(:last-child):hover {
    opacity: 1
}

.footer_copyright {
    display: block;
    color: #6b7886;
    opacity: .8;
    margin-top: .7rem;
    padding: .3rem .95rem
}

.footer_social-icons a {
    text-decoration: none;
    margin-right: .31rem
}

.footer_social-icons svg {
    color: #888a90;
    height: 24px;
    width: 24px
}

.footer_social-icons svg:hover {
    color: #ddd;
	opacity:0.7;
}

.not-found {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 75vh
}

.not-found .title {
    font-weight: 700;
    color: #0d122b;
    text-shadow: 1px 0 0 #003fff
}

.not-found .phrase {
    color: #434648
}

.not-found .solution {
    color: #003fff;
    letter-spacing: .5px
}

.not-found .solution:hover {
    color: #0036c7
}

.search-article {
    position: relative;
    margin-bottom: 50px
}

.search-article label[for=search-input] {
    position: relative;
    top: 10px;
    left: 11px
}

.search-article input[type=search] {
    top: 0;
    left: 0;
    border: 0;
    width: 100%;
    height: 40px;
    outline: none;
    position: absolute;
    border-radius: 5px;
    padding: 10px 10px 10px 35px;
    color: #434648;
    -webkit-appearance: none;
    background-color: rgba(128, 128, 128, .1);
    border: 1px solid rgba(128, 128, 128, .1)
}

.search-article input[type=search]::-webkit-input-placeholder {
    color: gray
}

.search-article input[type=search]::-webkit-search-decoration,
.search-article input[type=search]::-webkit-search-results-decoration {
    display: none
}

#search-results {
    text-align: center
}

#search-results li {
    text-align: left
}

.archive-tags {
    height: auto
}

.archive-tags .tag-item {
    padding: 1px 3px;
    border-radius: 2px;
    border: 1px solid rgba(128, 128, 128, .1);
    background-color: rgba(128, 128, 128, .1)
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}


/*
mark {
    background: #ff0;
    color: #000;
    border-radius: 3px
}
*/

@media screen and (max-width:768px) {
    .wrapper.post {
        padding-left: 15px;
        padding-right: 15px
    }
}

.header {
    /* margin-top: 7.8em; */
}

div.banner {
	width:100%;
	min-height:450px;
	background-color:rgba(0, 0, 0, 1);
	background-attachment:fixed; 
	background-image: url('../img/banner.default.jpg');
	background-repeat: repeat;
	background-size: cover;
	background-position: center center;
	background-position:top center;

	border-top:1px white solid;
	border-bottom:1px white solid;

	box-shadow:
		inset 0 10px 10px -10px rgba(0, 0, 0, 0.9),
		inset 0 -10px 20px -10px rgba(0, 0, 0, 0.9);

	animation: zoomLoop 500s linear infinite;
}

/* fix on small screen */
@media screen and (max-height:670px) {
	div.banner {
		background-size: cover !important;
	}
}
/* fix on small screen (mobile) */
@media screen and (max-width:768px) {
	div.banner {
		background-size: cover;
		animation: none !important;
	}
}
@keyframes zoomLoop {
      0%   { background-size: auto 100%; }
      25%  { background-size: auto 200%; }  /* Zoom in */
      50%  { background-size: auto 200%; }  /* Pause (zoomed) */
      75%  { background-size: auto 100%; }  /* Zoom out */
      100% { background-size: auto 100%; }  /* Pause (normal) */
}

div.banner .header {
	margin-top: 11em;
	margin-bottom: 10em;
}
div.banner .header-title {
	color:white;
	text-align:center;
	letter-spacing:-2px;
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
	margin-left:5vw;
	margin-right:5vw;
	font-size:60px;
	line-height:70px;
	border:1px rgba(0, 0, 0, 0) solid;
}
div.banner .header-title.header-title-index,
div.banner .header-title.header-title-index * {
	font-size:150px;
	line-height:120px;
	letter-spacing:-7px;
	margin:0;
	padding:0;
}
div.banner .header-title.header-title-index div.small,
div.banner .header-title.header-title-index div.small * {
	margin-top:50px;
	font-weight:normal;
	letter-spacing:1px;
	margin-left:10px;
	margin-right:10px;
	font-size:20px;
	line-height:20px;
}
@media screen and (max-width:768px) {
	div.banner header.header {
		margin-top:80px;
		margin-bottom:60px;
	}
	div.banner header.header.header-index {
		margin-bottom:170px;
		margin-top:187px;
	}
	div.banner .header-title.header-title-index,
	div.banner .header-title.header-title-index * {
		font-size: 26dvw;
		line-height: 22dvw;
		margin:0;
		padding:0;
	}
	div.banner .header-title.header-title-index div.small,
	div.banner .header-title.header-title-index div.small * {
		margin-left:5px;
		margin-right:5px;
		padding:0;
		margin:0;
		margin-left:5px;
		margin-right:5px;
	}
}

div.banner .header-title span,
div.banner .header-title div {
	opacity:0.5;
	font-weight:normal;
	font-size:60px;
}
div.banner .post-meta span {
	opacity:0.5;
}
div.banner .header-title.header-title-index span {
	opacity:0.3;
}
div.banner .header-title.header-title-index div.small {
	opacity:0.8;
}
div.banner .header-title.header-title-index div.small span {
	opacity:0.5;
}

.header .header-title {
    margin-top: 10px;
    margin-bottom: 20px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:-1px;
}

.header .header-title.center {
    text-align: center
}

.banner .header .post-meta {
	color:rgba(255, 255, 255, 0.7);
	text-align:justify;
	margin-left:5%;
	margin-right:5%;
	border:none;
	padding-left:5vw;
	padding-right:5vw;
	font-size:20px;
	line-height:30px;
	text-align:center;
}

.page-content header.header {
	margin-top:60px;
	margin-bottom:40px;
}
.page-content .header .post-meta {
	text-align:justify;
	color:grey;
}


.page-content .message {
    padding-top: 3px;
	text-align:justify;
	padding:15px;
	border-radius:7px;
	font-family: sans-serif;
	font-weight: normal;
	margin-left: -20px;
	margin-right: -5px;

	/* default */
    color: #333;
	background-color: #f0f0f0;;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border:1px #bdbdbd solid;
	border-left: 20px solid #bdbdbd;

	font-family: "Helvetica" !important;
}
.page-content .message * {
}
.page-content .message.center {
	text-align:center !important;
}
.page-content .message.alert,
.page-content .message.error {
	color: white;
	background-color: #f44336;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border:1px darkred solid;
	border-left: 20px solid darkred;
}
.page-content .message.success {
	color: white;
	background-color: #4CAF50;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border:1px #2e7d32 solid;
	border-left: 20px solid #2e7d32;
}
.page-content .message.success a {
	color:rgba(255, 255, 255, 0.8);
}
.page-content .message.postit {
    color: #665c00;
	background-color: #fff9c4;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border:1px #fbc02d solid;
	border-left: 20px solid #fbc02d;
}
.page-content .message.bluey {
	/* color: rgba(99, 179, 237, 1); */
	color: rgba(84, 149, 195, 1);
	color: rgba(103, 168, 215, 1);
	color: rgba(97, 161, 207, 1);
	background: rgb(235, 248, 255);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border:1px rgb(99, 179, 237) solid;
	border-left: 20px solid rgba(99, 179, 237, 0.7);
	background-color: #ebf8ff;
	border-color: #90cdf4;
	color: rgba(42, 67, 101, 0.8);
}
.page-content .message.bluey2 {
}

@media screen and (max-width:768px) {
	.page-content .message {
		margin-left: 0px;
		margin-right: 0px;
		border-left: 1px solid #bdbdbd !important;
	}
}
.page-content .message h1,
.page-content .message h2 {
    padding:0;
    margin:0;
    color:inherit;
	border:0;
}
.page-content .message h1.spacing,
.page-content .message h2.spacing {
    margin-top:20px;
    margin-bottom:20px;
}


mark,
mark.stabilo,
.stabilo {
	background-color: rgba(255, 255, 0, 0.5);
	padding: 5px 10px 5px 10px;
	border-radius:5px;
	box-decoration-break: clone;
	color:inherit;
}
mark.bluey,
.bluey {
	background-color:#E0E7FB;
	color:#5674F6;
	padding:5px 9px;
	margin-left:-1px;
	margin-right:-1px;
	border-radius:5px;
	box-decoration-break: clone;
}
kbd {
    border-radius: 5px;
    color: #333638;
    background: #d8dbe2;
    display: inline-block;
    font-family: monospace;
    padding: 2px 4px;
    white-space: nowrap;
	font-size:16px;
}
todo {
	background-color: rgba(255, 255, 0, 0.5);
    border:1px gold solid;
    border-radius:15px;
    color:black;
	box-decoration-break: clone;
	_box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	color:rgba(25, 25, 0, 0.4);
	color:rgba(255, 140, 50, 1);
	padding: 5px 20px 5px 10px;
}
todo:before {
	background-color: rgba(255, 165, 79, 0.3);
	margin-right:15px;
	padding-right:15px;
	padding-left:20px;
	content:"TODO";
	color:rgba(255, 140, 50, 1);
	border:1px rgba(255, 165, 79, 0.3) solid;
	border-radius:15px;
	padding-top:10px;
	padding-bottom:6px;
	padding-right:20px;
	margin-left:-10px;
	box-shadow: 0 0px 6px rgba(0, 0, 0, 0.20);
	font-size:12px;
	border-top-right-radius:0px;
}


.post-meta time {
    position: relative;
    margin-right: 1.5em
}

.post-meta span[itemprop=author] {
    border-bottom: 1px dotted #ececec
}

.page-content {
    padding-top: 8px;
}

.page-content iframe {
    text-align: center
}
.page-content figure img,
.page-content img,
.page-content video,
.page-content canvas {
	width:100%;
    border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	border-top:1px #dfdfdf solid;
}
.page-content figure a:has(img):hover {
	opacity:0.95 !important;
}
.page-content figure.right {
	float:right;
	width:25%;
	margin-left:20px;
}

.page-content figure figcaption {
	text-align: right;
    /* font-style: italic; */
    margin-top: 1px;
	margin-right: 7px;
	opacity:0.7;
	line-height:24px;
	margin-top:5px;
}

.page-content a {
	color: #4183C4;
    text-decoration: none
}

.page-content a[target=_blank]::after {
    content: " \2197";
    position: relative;
    bottom: 5px;
    vertical-align: baseline
}

.page-content a:hover {
	color: #3e6d9c;
}

.page-content a:focus {
	color: #3e6d9c;
}

.page-content>p {
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: justify;
}


.page-content ul.task-list {
    list-style: none;
    margin: 0;
	margin-top: 30px;
}

.page-content ul.task-list li {
	margin-left:0;
	margin-bottom:20px;
	margin-top:10px;
	margin-right:0;

	opacity:1;
	margin-bottom:50px;
	list-style-position: outside;
	list-style-image: url("../img/document.icon.svg");

	border:1px rgba(0, 0, 0, 0.1) solid;
	border-radius:7px;
	padding:10px;
	padding-left:20px;
	padding-right:20px;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}
.page-content ul.task-list li.pinned {
	list-style-image: url("../img/document.pinned.svg");
}
.page-content ul.task-list li a {
	color: #4183C4;
	font-weight:bold;
	font-weight:800;
	letter-spacing:-0.20rem;
	font-size:40px;
	line-height:45px;
	letter-spacing:-1px;
}
.page-content ul.task-list li p {
	text-align:justify;
	color:rgba(120, 120, 120, 1);
	line-height:35px;
}
.page-content ul.task-list li p img {
	float:left;
	width:200px;
	min-width:200px;
	border-radius:7px;
	margin:5px;
	margin-right:22px;
	margin-left:0px;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width:768px) {
	.page-content ul.task-list li {
		list-style-image: none;
	}
	.page-content ul.task-list li.pinned {
		list-style-image: none;
	}
	.page-content ul.task-list li p {
		color:rgba(150, 150, 150, 1);
		line-height:32px;
	}
	.page-content ul.task-list li p img {
		width:100%;
		margin:0px;
		margin-top:5px;
		margin-bottom:15px;
		border-radius:7px;
	}
}

.page-content h1.bigger {
	margin-left:5px;
	margin-bottom:60px;
	letter-spacing:-0.20rem;
	font-size:60px;
	padding-bottom:10px;
	line-height:50px;
}
.bigger {
	font-size:40px;
}
.uppercase {
	text-transform:uppercase;
}

.page-content ul.task-list li::before {
    content: ""
}

.page-content ul.task-list li input[type=checkbox] {
    margin-right: 10px
}

.page-content dl dt {
    font-weight: 700
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    color: #0d122b;
    margin-top: 30px;
    margin-bottom: 0;
	padding-bottom:10px;

	text-transform:uppercase;
	border-bottom:1px rgba(0, 0, 0, 0.1) solid;

    font-weight: 700;
	letter-spacing:-1px;
	line-height:40px;
}
.page-content h1 span,
.page-content h2 span,
.page-content h3 span,
.page-content h4 span,
.page-content h5 span,
.page-content h6 span {
	opacity:0.5;
	font-weight:500;
}

.page-content h1:hover .anchor-head,
.page-content h2:hover .anchor-head,
.page-content h3:hover .anchor-head,
.page-content h4:hover .anchor-head,
.page-content h5:hover .anchor-head,
.page-content h6:hover .anchor-head {
    color: #003fff;
    opacity: 1
}

.page-content h1 .anchor-head,
.page-content h2 .anchor-head,
.page-content h3 .anchor-head,
.page-content h4 .anchor-head,
.page-content h5 .anchor-head,
.page-content h6 .anchor-head {
    position: relative;
    opacity: 0;
    outline: none
}

.page-content h1 .anchor-head::before,
.page-content h2 .anchor-head::before,
.page-content h3 .anchor-head::before,
.page-content h4 .anchor-head::before,
.page-content h5 .anchor-head::before,
.page-content h6 .anchor-head::before {
    content: "#";
    position: absolute;
    right: -3px;
    width: 1em;
    font-weight: 700
}

.page-content h1,
.page-content h1 * {
    font-size:35px;
	letter-spacing:-2px;
	margin-top:70px;
}

.page-content h2,
.page-content h2 * {
	font-size:25px;
}

.page-content h3, 
.page-content h3 * {
    font-size: 20px
}

.page-content h4,
.page-content h4 * {
    font-size: 20px
}

.page-content h5, 
.page-content h5 * {
    font-size: 16px
}

.page-content h6, 
.page-content h6 * {
    font-size: 14px
}

.post-nav {
    display: flex;
    position: relative;
    margin-top: 5em;
    border-top: 1px solid #ececec;
}

.post-nav .post-nav-item {
    border-bottom: 0;
    font-weight: 700;
    padding-bottom: 10px;
    width: 50%;
    padding-top: 10px;
    text-decoration: none;
    box-sizing: border-box
}

.post-nav .post-nav-item .post-title {
    color: #0d122b
}

.post-nav .post-nav-item:hover .post-title,
.post-nav .post-nav-item:focus .post-title {
    color: #0036c7;
    opacity: .9
}

.post-nav .post-nav-item .nav-arrow {
    font-weight: 400;
    color: #6b7886;
    margin-bottom: 3px
}

.post-nav .post-nav-item:nth-child(odd) {
    padding-left: 0;
    padding-right: 20px
}

.post-nav .post-nav-item:nth-child(even) {
    text-align: right;
    padding-right: 0;
    padding-left: 20px
}

@media screen and (max-width:768px) {
    .post-nav {
        display: block;
    }
    .post-nav .post-nav-item {
        display: block;
        width: 100%
    }
    .post-nav .post-nav-item:nth-child(even) {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid #ececec
    }
}

.post-updated-at {
    font-family: ubuntu mono, monospace
}

p code {
    font-family: monospace;
    text-rendering: optimizeLegibility;
    font-feature-settings: "calt" 1;
    font-variant-ligatures: normal;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    tab-size: 4;
}
.terminal {
	font-family: monospace;
    text-rendering: optimizeLegibility;
    font-feature-settings: "calt" 1;
    font-variant-ligatures: normal;
	letter-spacing:-1px;
	font-family: "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace;
}

li>code,
p>code {
    white-space: pre-wrap;
    padding: 1px 3px;
    position: relative;
    top: -1px;
    border-radius: 2px;
}

pre {
    border-radius: .3rem;
    padding: .5rem 1rem;
    display: block;
    overflow-x: auto;
}
pre,
pre * {
	font-size: 16px !important;
}
@media screen and (max-width:768px) {
	pre,
	pre * {
		font-size:14px !important;
	}
}

pre::-webkit-scrollbar {
    height: .5rem
}

pre::-webkit-scrollbar-track {
    background: #606071;
    border-radius: .1rem
}

pre::-webkit-scrollbar-thumb {
    background: #999ea2;
    border-radius: .3rem
}

pre::-webkit-scrollbar-thumb:hover {
    background: #424546
}

pre>code {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 0;
}


.highlight table td {
    padding: 5px
}

.highlight table pre {
    margin: 0
}

.highlight,
.highlight .w {
    color: #fbf1c7
}

.highlight .err {
    color: #fb4934;
    font-weight: 700
}

.highlight .c,
.highlight .cd,
.highlight .cm,
.highlight .c1,
.highlight .cs {
    color: #928374;
    font-style: italic
}

.highlight .cp {
    color: #8ec07c
}

.highlight .nt {
    color: #fb4934
}

.highlight .o,
.highlight .ow {
    color: #fbf1c7
}

.highlight .p,
.highlight .pi {
    color: #fbf1c7
}

.highlight .gi {
    color: #b8bb26;
    background-color: #282828
}

.highlight .gd {
    color: #fb4934;
    background-color: #282828
}

.highlight .gh {
    color: #b8bb26;
    font-weight: 700
}

.highlight .k,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kv {
    color: #fb4934
}

.highlight .kc {
    color: #d3869b
}

.highlight .kt {
    color: #fabd2f
}

.highlight .kd {
    color: #fe8019
}

.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s2,
.highlight .sh,
.highlight .sx,
.highlight .s1 {
    color: #b8bb26;
    font-style: italic
}

.highlight .si {
    color: #b8bb26;
    font-style: italic
}

.highlight .sr {
    color: #b8bb26;
    font-style: italic
}

.highlight .se {
    color: #fe8019
}

.highlight .nn {
    color: #8ec07c
}

.highlight .nc {
    color: #8ec07c
}

.highlight .no {
    color: #d3869b
}

.highlight .na {
    color: #b8bb26
}

.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo,
.highlight .mb,
.highlight .mx {
    color: #d3869b
}

.highlight .ss {
    color: #83a598
}

details {
    cursor: pointer
}

.toc {
    margin: 1.1rem 0 1rem;
    padding: .5rem 1rem;
    border-radius: .3rem;
    background-color: #edecec
}

.toc ul {
    padding-top: 1rem;
    margin-left: 1rem;
    padding-left: 1rem
}

.toc ul li {
    margin-bottom: .5em;
}

@keyframes fadein {
    0% {
        opacity: .2
    }
    100% {
        opacity: 1
    }
}

@keyframes blur {
    0% {
        filter: blur(0)
    }
    100% {
        filter: blur(4px)
    }
}

.embed-responsive {
    height: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    margin-top: 20px
}

.embed-responsive iframe,
.embed-responsive object,
.embed-responsive embed {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute
}
.page-content iframe,
.page-content svg,
.page-content embed,
.page-content object {
	margin:0;
	padding:0;
    width: 100%;
	aspect-ratio: 16/9;
	border-radius: 7px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	background-color:rgba(0, 0, 0, 1);
}
.page-content iframe.reset,
.page-content svg.reset,
.page-content object.reset {
	background: none !important;
	box-shadow: none !important;
}
.page-content iframe.no-aspect-ratio,
.page-content svg.no-aspect-ratio,
.page-content object.no-aspect-ratio {
	aspect-ratio: none !important;
}

.main-404 {
    padding: 9rem 0;
    text-align: center
}


.list-page .post-year {
    padding-bottom: .5rem
}

.icon-star {
    color: orange;
    height: 16px;
    margin-right: 1rem;
    width: 16px;
    display: block
}

.post-item-right {
    margin-left: auto;
    margin-right: 0
}

html {
    scroll-behavior: smooth
}



code[class*=language-] {
    font-family: monospace !important;
}

pre[class*="language-"] {
    color: gray;
    background: none;
    font-family: monospace !important;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
textarea {
	width:100%;
	min-height:300px;
	margin:0;
	padding:0;
	border:0px gray solid;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    color: gray;
}
textarea:focus {
	border:0px gray solid;
	outline:none;
}


.footnotes {
    margin: 1.1rem 0 1rem;
    border-radius: .3rem;
    background-color: #edecec;
	padding-top:2px !important;
	padding-left:20px;
	padding-right:35px;
	padding-bottom:10px;
	margin-top:100px;
}
.footnotes h1,
.footnotes h2 {
	margin:0;
	padding:0;
	border-bottom:0px white solid;
	margin-top:10px;
	margin-bottom:10px;
}
.footnotes:before {
	content:"";
	font-weight:bold;
	text-transform:uppercase;
}

.footnotes ol,
.footnotes ul {
    padding-top: 0rem;
	margin-left: 0em;
    padding-left: 1rem;
	text-align:justify;
}

.footnotes ul li,
.footnotes ol li {
    margin-bottom: .5em;
	list-style-type: decimal;
	margin-bottom:1em;
}
.footnotes ul li li,
.footnotes ol li li {
	list-style-type: square;
}

.footnotes ul li {
	list-style-type: square;
}

.footnotes note {
	border:1px grey solid;
	padding:4px;
	border-radius:4px;
	margin-right:5px;
}
.footnotes note.error {
	color:red;
	border:1px red solid;
}
note.error {
	color:red;
}
.footnotes note a {
	color:grey;
}
.footnotes ol li {
	list-style-type: none !important;
	margin-left:-1.5em;
}


.reverse-color {
	filter: invert(100%) !important;
}
.hide {
	filter: blur(0.3rem);
}
.hide.more {
	filter: blur(1rem);
}
.hide:hover {
	filter: none !important;
}


/*
 *
 * switch size by screen size
 *
:root {
	font-size: min(15px, 15vw, 15vh);
}
*/

/*
 *
 * switch color to black
 *
:root {
	/*
    -webkit-filter: invert(100%);
    filter: invert(100%);
	mix-blend-mode: exclusion;
	mix-blend-mode: difference;
}
*/


img.flag {
	all: unset; /* reset all */
	float:right;
	margin-top:7px;
	opacity:0.7;
	width:32px !important;
	height:32px !important;
	box-shadow:none !important;
	border-radius: none !important;
	border-top: none !important;
	margin-left:10px;
	margin-right:-10px;
}


.center {
	text-align:center !important;
}


/* blink the anchor */
@keyframes blink {
	50% { 
		color:#edecec;
	}
}
:target {
	animation: blink 0.5s ease-in-out 15;
}