// custom default properties for normal tags
html {scroll-behavior: smooth}

h1, h2, h3, h4, h5, h6 {
    code {font-size: 1em;}
}

hr {margin: 2em 0;}

iframe {
    display: block;
    margin: 1.5em auto;
    max-width: 100%;
}

li > ul, li > ol, ul > li, ol > li {margin-bottom: 1em;}

ul.social-media-list > li, #list-container > ul > li {margin: 0;}

// Table custom properties

.table {
    margin: 1em 0;
    overflow-x: auto;
    table {margin: 0;}
    @include media-query($on-palm) {height: 300px;}
}

// code syntax table
figure.highlight {
    border: 1px solid $grey-color-light;
    border-radius: 3px;
    background-color: #eef;

    * {
        border: 0;
        margin: 0;
    }

    td.gutter.gl {
        border-right: 1px solid $grey-color-light;

        > pre.lineno {padding-left: 0;}
    }
}

.mathjax {
    &-text {
        font-family: "Latin Modern Math", "Georgia", $base-font-family;
        font-size: 1.1em;
    }
}

.MJXc-display {font-size: 1.6em !important;}

// custom properties for several layout items
#personal-logo {
    width: 29px;
    height: auto;
    padding: 0;
}

// Specific parts in content
em[data-descr], i[data-descr] {
    cursor: help;
    text-decoration: underline dashed;
    position: relative;

    &:hover::after {
        content: attr(data-descr);
        position: absolute;
        right: 24px;
        top: 24px;
        min-width: 200px;
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: $brand-color_l;
        padding: 12px;
        color: white;
        font-size: 14px;
        z-index: 1;
    }
}

.file-name {color: darken($code-keywords, 10%);}

.dt-updated, .reading-minutes {
    color: $grey-color;
    font-size: $small-font-size;
    margin-top: 0;
}

::selection {
    background: lighten($brand-color_l, 37.5%);
}