body {
    font-family: 'IBM Plex Sans', sans-serif !important;
    /*font-weight: 300;*/
}

.article h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.article p, .article li {
    /*font-family: 'Source Serif 4', serif;*/
    font-size: 1.1em;
}

pre.code {
    margin-bottom: 0.5em;
}

/* Menu */
.navbar-light .navbar-toggler, .navbar-toggler:focus {
    border: none;
    box-shadow: none;
}

/* Style the rainbow text element. */
.rainbow-text {
    /* Create a conic gradient. */
    /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */
    background: #CA4246;
    background-color: #CA4246;
    background: conic-gradient(
            #CA4246 16.666%,
            #E16541 16.666%,
            #E16541 33.333%,
            #F18F43 33.333%,
            #F18F43 50%,
            #8B9862 50%,
            #8B9862 66.666%,
            #476098 66.666%,
            #476098 83.333%,
            #A7489B 83.333%);

    /* Set thee background size and repeat properties. */
    background-size: 57%;
    background-repeat: repeat;

    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Animate the text when loading the element. */
    /* This animates it on page load and when hovering out. */
    animation: rainbow-text-animation-rev 0.5s ease forwards;
}

/* Add animation on hover. */
.rainbow-text:hover {
    animation: rainbow-text-animation 0.5s ease forwards;
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-animation {
    0% {
        background-size: 57%;
        background-position: 0 0;
    }
    20% {
        background-size: 57%;
        background-position: 0 1em;
    }
    100% {
        background-size: 300%;
        background-position: -9em 1em;
    }
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-animation-rev {
    0% {
        background-size: 300%;
        background-position: -9em 1em;
    }
    20% {
        background-size: 57%;
        background-position: 0 1em;
    }
    100% {
        background-size: 57%;
        background-position: 0 0;
    }
}

/* Article */
.article-tag{
    background-color: rgb(225, 236, 244);
    color: rgb(44, 88, 119);
    padding: .25em .5em .25em .5em;
    margin-right: .8em;
}

.article-avatar {
    height: 2.5em;
}

.article-author{
    display: flex;
    flex-direction: row;
}

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 15px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px !important;
}

.hljs-ln td {
    padding-right: 15px;
    /*padding-left: 15px;*/
}