:root {
    --color-text-primary: #333333;
    --color-text-primary-hover: #757575;

    --color-text-secondary: #424242;
    --color-text-secondary-hover: #9E9E9E;

    --color-text-tertiary: #757575;
    --color-text-tertiary-hover: #616161;

    --home-width: 85%;
    --header-margin: 20px;

    --footer-margin-desktop: 125px;
    --footer-margin-mobile: 25px;
    --footer-margin: var(--footer-margin-desktop);

    --page-width-desktop: 40%;
    --page-width-mobile: 95%;
    --page-width: var(--page-width-desktop);

    --color-hr: #E0E0E0;
    --hr-margin: 30px;

    --quote-vertical-margin: 30px;
    --quote-bar-margin: 20px;
    --quote-bar-width: 3px;
    --quote-color: #9E9E9E;
    --quote-margin-left-desktop: calc(-1 * var(--quote-bar-margin) - var(--quote-bar-width));
    --quote-margin-left-mobile: 0px;
    --quote-margin-left: var(--quote-margin-left-desktop);

    --image-vertical-margin: 20px;

    --inline-code-background-color: #EEEEEE;
    --code-block-background-color: #FAFAFA;
    --code-block-vertical-margin: 25px;

    --preview-link-margin: 40px;
    --preview-link-padding-vertical: 24px;
    --preview-link-padding-horizontal: 20px;

    --file-download-margin: 40px;
    --file-download-padding-vertical: 10px;
    --file-download-padding-horizontal: 20px;
}

@media (hover:none),
(hover:on-demand) {
    :root {
        --page-width: var(--page-width-mobile);
        --quote-margin-left: var(--quote-margin-left-mobile);
        --footer-margin: var(--footer-margin-mobile);
    }
}

body {
    margin: 0;
    background-color: #ffffff;
}

canvas {
    width: 100%;
}

p {
    line-height: 1.3;
}

/** ------ **/
/** HEADER **/
/** ------ **/

.site-header {
    width: var(--page-width);
    margin: 0 auto;
}

.site-header-content {
    margin-top: var(--header-margin);
    margin-bottom: var(--header-margin);
}

.site-header-link {
    color: var(--color-text-tertiary);
    text-decoration: none;
    font-size: 1.2rem;
    margin-right: 20px;
}

.site-header-link:hover {
    color: var(--color-text-tertiary-hover);
}

/** ------ **/
/** FOOTER **/
/** ------ **/

.site-footer {
    width: var(--page-width);
    margin: 0 auto;
}

.site-footer-content {
    color: var(--color-text-tertiary);
    font-size: 1.2rem;
    margin-top: var(--footer-margin);
    margin-bottom: var(--footer-margin);
}

/** ---- **/
/** HOME **/
/** ---- **/

.home-main {
    width: var(--home-width);
    margin: 100px auto;
}

.home-main ul {
    padding: 0;
    list-style-type: none;
}

.home-main li {
    margin-bottom: 12px;
}

.home-title {
    color: var(--color-text-primary);
    font-size: 2.4rem;
}

.home-title img {
    width: 12px;
    height: auto;
    margin-left: 24px;
    vertical-align: baseline;

    /* non selectable */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.home-link {
    color: var(--color-text-primary);
    font-size: 1.5rem;
}

.home-email {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
}

/** -------- **/
/** ARTICLES **/
/** -------- **/

.articles-main {
    display: flex;
    justify-content: center;
}

.articles-list {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    width: var(--page-width);
    gap: 70px;
}

.articles-preview p {
    margin-top: 16px;
    margin-bottom: 16px;
}

.articles-preview-title {
    color: var(--color-text-primary);
    font-size: 1.7rem;
    font-weight: bold;
    text-decoration: none;
}

.articles-preview-title:hover {
    color: var(--color-text-primary-hover);
    text-decoration: underline;
}

.articles-preview-date {
    color: var(--color-text-secondary);
    font-weight: bold;
    font-size: 1.1rem;
}

.articles-preview-description {
    color: var(--color-text-primary);
    font-size: 1.3rem;
}

.articles-preview-pin {
    width: 20px;
    height: 20px;
    margin-left: 10px;

    /* non selectable */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.articles-preview-title-container {
    display: flex;
    flex-direction: row;
}

/** ------- **/
/** ARTICLE **/
/** ------- **/

.article-body {
    color: var(--color-text-primary);
    font-size: 1.2rem;
    margin: 50px auto;
    width: var(--page-width);
}

.article-header {
    border-top: 1px solid var(--color-hr);
    border-bottom: 1px solid var(--color-hr);
}

.article-header-content {
    width: var(--page-width);
    margin: 50px auto 30px auto;
}

.article-title {
    color: var(--color-text-primary);
    font-size: 3rem;
}

.article-date {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.article-updated-date {
    color: #9E9E9E;
    background-color: #EEEEEE;
    border-radius: 5px;
    padding: 5px;
}

.article-description {
    color: var(--color-text-tertiary);
    font-size: 1.4rem;
}

.article-bold {
    font-weight: bold;
}

.article-italic {
    font-style: oblique;
}

.article-section {
    color: var(--color-text-primary);
    font-size: 2rem;
    border-bottom: 1px solid var(--color-hr);
    padding-bottom: 10px;
}

.article-small-section {
    color: var(--color-text-primary);
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.article-quote {
    color: var(--quote-color);
    font-style: oblique;
    font-weight: 300;
    font-size: 1.2rem;
    margin-left: var(--quote-margin-left);
    padding-left: var(--quote-bar-margin);
    border-left: var(--quote-bar-width) solid black;
    margin-top: var(--quote-vertical-margin);
    margin-bottom: var(--quote-vertical-margin);
}

.article-hr {
    border-bottom: 1px solid var(--color-hr);
    margin-top: var(--hr-margin);
    margin-bottom: var(--hr-margin);
}

.article-li {
    margin: 12px auto;
}

.article-link {
    color: var(--color-text-primary);
}

.article-link:hover {
    color: var(--color-text-primary-hover);
    text-decoration: none;
}

.article-link-preview-container {
    width: 100%;
    margin-top: var(--preview-link-margin);
    margin-bottom: var(--preview-link-margin);
    font-size: 1.1rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
}

.article-link-preview-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text-primary);
    padding-top: var(--preview-link-padding-vertical);
    padding-bottom: var(--preview-link-padding-vertical);
    padding-left: var(--preview-link-padding-horizontal);
    padding-right: var(--preview-link-padding-horizontal);
}

.article-link-preview-title {
    font-weight: bold;
    margin-bottom: 20px;
}

.article-link-preview-description {
    color: var(--color-text-tertiary);
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.article-link-preview-website {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 300;
}

.article-image {
    margin-top: var(--image-vertical-margin);
    margin-bottom: var(--image-vertical-margin);
}

.article-code-inline {
    background-color: var(--inline-code-background-color);
    font-family: 'Menlo', Courier, monospace;
    font-size: 0.9rem !important;
    padding: 3px 5px;
    border-radius: 5px;
}

.article-code-block * {
    background-color: var(--code-block-background-color) !important;
}

.article-code-block {
    background-color: var(--code-block-background-color);
    font-family: 'Menlo', Courier, monospace;
    font-size: 0.8rem !important;
    line-height: 1.4rem;
    padding: 3px 5px;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin-top: var(--code-block-vertical-margin);
    margin-bottom: var(--code-block-vertical-margin);
}

.article-latex {
    margin: 30px auto;
    overflow-x: auto;
}

.article-graphviz {
    margin: 30px auto;
    overflow-x: auto;
}

.article-file-download-container {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FAFAFA;
    margin-top: var(--file-download-margin);
    margin-bottom: var(--file-download-margin);
    font-size: 1.1rem;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #EEEEEE;
}

.article-file-download-container:hover {
    background-color: #EEEEEE;
}

.article-file-download-title {
    margin-left: 15px;
    font-weight: bold;
}

.article-file-download-link {
    color: var(--color-text-primary);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: var(--file-download-padding-vertical);
    padding-bottom: var(--file-download-padding-vertical);
    padding-left: var(--file-download-padding-horizontal);
    padding-right: var(--file-download-padding-horizontal);
}


.article-code-output {
    background-color: var(--color-text-primary);
    color: #E0E0E0;
    font-family: 'Menlo', Courier, monospace;
    font-size: 0.8rem !important;
    line-height: 1.4rem;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin-top: var(--code-block-vertical-margin);
    margin-bottom: var(--code-block-vertical-margin);

    &:not(:empty) {
        padding: 5px 8px;
    }
}

.article-center-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.article-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.article-block {
    margin-top: 30px;
    margin-bottom: 30px;
}