/** Fonts **/

@font-face
{
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), local("IBMPlexSans-Regular"),
         url("fonts/ibmplex/IBMPlexSans-Regular.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexSans-Regular.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexSans-Regular.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Sans";
    font-weight: bold;
    src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"),
         url("fonts/ibmplex/IBMPlexSans-Bold.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexSans-Bold.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexSans-Bold.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Sans";
    font-style: italic;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"),
         url("fonts/ibmplex/IBMPlexSans-Italic.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexSans-Italic.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexSans-Italic.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Sans";
    font-weight: bold;
    font-style: italic;
    src: local("IBM Plex Sans Bold Italic"), local("IBMPlexSans-BoldItalic"),
         url("fonts/ibmplex/IBMPlexSans-BoldItalic.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexSans-BoldItalic.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexSans-BoldItalic.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Mono";
    src: local("IBM Plex Mono"), local("IBMPlexMono-Regular"),
         url("fonts/ibmplex/IBMPlexMono-Regular.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexMono-Regular.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexMono-Regular.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Mono";
    font-weight: bold;
    src: local("IBM Plex Mono Bold"), local("IBMPlexMono-Bold"),
         url("fonts/ibmplex/IBMPlexMono-Bold.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexMono-Bold.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexMono-Bold.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Mono";
    font-style: italic;
    src: local("IBM Plex Mono Italic"), local("IBMPlexMono-Italic"),
         url("fonts/ibmplex/IBMPlexMono-Italic.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexMono-Italic.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexMono-Italic.otf") format("otf");
}

@font-face
{
    font-family: "IBM Plex Mono";
    font-weight: bold;
    font-style: italic;
    src: local("IBM Plex Mono Bold Italic"), local("IBMPlexMono-BoldItalic"),
         url("fonts/ibmplex/IBMPlexMono-BoldItalic.woff2") format("woff2"),
         url("fonts/ibmplex/IBMPlexMono-BoldItalic.woff") format("woff"),
         url("fonts/ibmplex/IBMPlexMono-BoldItalic.otf") format("otf");
}

/** General **/

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

html, body {
    padding: 0;
    margin: 0;
}

html {
    --background-color: #032026;
    --highlight-color: rgba(255, 255, 255, 0.15);
    --text-color: #fbfbfb;
    --text-secondary: #8092a8;
    --text-sans: "IBM Plex Sans", sans-serif;
    --text-mono: "IBM Plex Mono", monospace;
    --base-size: 19px;
    --base-height: 27px;
    --border-radius: 5px;

    background: var(--background-color);
    color: var(--text-color);
    font-family: var(--text-sans);
    font-size: var(--base-size);
    line-height: var(--base-height);
}

body {
    max-width: 790px;
    padding: 0 var(--base-height);
    margin: calc(4 * var(--base-height)) auto;
}

p {
    margin: var(--base-height) 0;
}

p.standout {
    background-color: var(--highlight-color);
    padding: var(--base-height);
    border-radius: var(--border-radius);
}

a {
    color: inherit;
    transition: background-color ease-out .05s;
    border-radius: var(--border-radius);

    text-decoration-color: var(--text-secondary);
    text-underline-offset: 3px;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
}

a:focus {
    background-color: var(--highlight-color);
    outline: 2px solid currentColor;
}

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

:is(h1, h2, h3, h4, h5, h6) > a:hover::before
{
    content: "#";
    color: var(--text-secondary);

    display: inline-block;
    width: var(--base-height);
    margin-left: calc(-1 * var(--base-height));
}

.code, tt, pre {
    font-family: var(--text-mono);
}

hr {
    border: none;
    margin: var(--base-height) 0;
}

h1, h2, h3 {
    font-weight: normal;
}

h1 {
    font-size: 1.4rem;
    line-height: 1.4;
    margin: calc(2.5 * var(--base-height)) 0 calc(1.66 * var(--base-height)) 0;
}

h2 {
    font-size: 1.3rem;
    margin: calc(2 * var(--base-height)) 0 calc(1.33 * var(--base-height)) 0;
}

h3 {
    font-size: 1.05rem;
    font-style: italic;
    margin: calc(1.5 * var(--base-height)) 0 var(--base-height) 0;
}

.long-list > li {
    margin-bottom: 1rem;
}

.long-list p:last-of-type {
    margin-bottom: 0;
}

/** Icons **/

.icon-before
{
    display: inline-block;
}

.icon-before::before
{
    content: "";
    display: inline-block;
    vertical-align: sub;

    width: var(--base-height);
    height: 1em;

    background: currentColor;
    -webkit-mask: center center/contain no-repeat;
    mask: center center/contain no-repeat;
}

.icon-before-outside::before
{
    margin-left: calc(-1 * var(--base-height));
    mask-position-x: left;
}

.icon-rss::before
{
    mask-image: url("icons/feather/rss.svg");
}

.icon-pin::before
{
    mask-image: url("icons/feather/pin.svg");
}

.icon-calendar::before
{
    mask-image: url("icons/feather/calendar.svg");
}

.icon-git::before
{
    mask-image: url("icons/feather/git.svg");
}

/** Structure **/

.site-header {
    margin-bottom: calc(2 * var(--base-height));
    font-style: italic;
}

.site-header h1 {
    display: flex;
    align-items: baseline;
    margin: calc(1.5 * var(--base-height)) 0 0 0;

    font-family: var(--text-mono);
    font-size: 40px;
    line-height: 40px;

    --inter-spacing: .65ch;
    --outer-spacing: 1.3ch;
    letter-spacing: var(--inter-spacing);
    text-transform: uppercase;
}

.site-header h1::after {
    content: "";
    display: block;
    background: currentColor;
    margin-left: calc(var(--outer-spacing) - var(--inter-spacing));
    width: 100%;
    height: 2px;
}

.site-header h2 {
    margin: calc(0.5 * var(--base-height)) 0 0 0;

    font-size: calc(1.2 * var(--base-size));
    line-height: calc(1.2 * var(--base-height));
}

.site-footer {
    margin-top: calc(2 * var(--base-height));
    font-style: italic;
}

/** Post list **/

.feed-link {
    font-size: 1rem;
    float: right;
}

.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-list article {
    margin: var(--base-height) 0;
}

.post-list li > a {
    text-decoration: none;
}

.post-list article header h3 {
    font-size: 1rem;
    font-style: normal;
    margin: 0;
}

.post-list article header h3 span {
    font-weight: bold;
    transition: background-color ease-out .05s;
}

.post-list article header h3 time {
    font-style: italic;
    margin-left: .5em;
}

.post-list li > a:hover header h3 > span {
    background-color: var(--highlight-color);
    border-radius: var(--border-radius);
}

.post-list article header p {
    margin: 0;
}

.post-list .upcoming {
    background-color: var(--highlight-color);
    padding: calc(var(--base-height) / 2);
    border-radius: var(--border-radius);
}

.post-list .upcoming header::before {
    content: "Prochaine activité";
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2ch;
}

/** Post presentation **/

.post-nav {
    display: flex;
}

.post-nav span {
    flex: 1;
}

.post-nav :nth-child(1) {
    text-align: left;
}

.post-nav :nth-child(2) {
    text-align: center;
}

.post-nav :nth-child(3) {
    text-align: right;
}

.post-header time, .post-header address {
    display: block;
    margin: -2rem 0 2rem 0;
    font-style: italic;
}

/** Figures **/

figure {
    text-align: center;
    margin: var(--base-height);
}

figcaption {
    font-style: italic;
}

/** Problems **/
.problem-difficulty
{
    display: inline-block;
    background: var(--color);
    border-radius: .25em;
    padding: 0px .25em;
    outline: .1em solid var(--color);
    margin: 0 .2em;
}

/** Leetcode Problems **/

.leetcode-problem
{
    padding-bottom: .25em;
} 

.leetcode-problem-difficulty
{
    display: inline-block;
    background: var(--color);
    border-radius: .25em;
    padding: 0px .25em;
    outline: .1em solid var(--color);
    margin: 0 .2em;
}

/** Math **/

.MJX_HoverRegion {
    background-color: transparent !important;
}

.MJX_LiveRegion {
    background-color: transparent !important;
}

.MJX_ToolTip {
    background-color: transparent !important;
}