/* Md. Mahmudul Hasan portfolio styles */

/*------------------------------------------------------------------
# [Color codes]

# Body  (text): #3a4750
# Heading Color #444444
# Theme Color (link color) #8C1515
# Previous orange option: #FFC107, hover #ff9800
# Mid grey (sub header) #f4f4f4
# -------------------------------------------------------------------*/

:root {
    --accent-color       : #B83A3A;
    --accent-color-hover : #8C1515;
    --accent-stanford    : #8C1515;
    --accent-stanford-hover : #B1040E;
    --accent-old         : #FFC107;
    --accent-old-hover   : #ff9800;
    --paper-badge-color  : var(--accent-color);
    --paper-badge-blue   : #00369f;
    --dark-bg            : #111318;
    --dark-panel         : #171a20;
    --dark-panel-soft    : #1d2129;
    --dark-border        : #2b303a;
    --dark-text          : #d9dde6;
    --dark-heading       : #f3f4f6;
    --dark-muted         : #9aa3b2;
    --dark-accent        : #e36f6f;
    --dark-accent-hover  : #ff9292;
    }

body {
    font-family : 'Hind', sans-serif;
    font-size   : 15px;
    line-height : 1.8em;
    color       : #3d3d50;
    font-weight : 300;
    background  : url("../img/pattern-bg.png") fixed;
    }

/* --------------------------------------
 * Global Typography
 *------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    margin : 0 0 15px;
    color  : #2b2b3d;
    }

h1 {
    font-size   : 26px;
    line-height : 1.8em;
    font-weight : 700;
    }

h2 {
    font-size   : 18px;
    line-height : 1.8em;
    font-weight : 700;
    }

h3 {
    font-size   : 16px;
    line-height : 1.8em;
    font-weight : 500;
    }

h4 {
    font-size   : 15px;
    line-height : 1.8em;
    font-weight : 500;
    }

h5 {
    font-size   : 15px;
    line-height : 1.5em;
    font-weight : 500;
    }

h6 {
    font-size   : 15px;
    line-height : 1.5em;
    }

/* --------------------------------------
 * LINK STYLE
 *------------------------------------------*/
a {
    color              : var(--accent-color);
    text-decoration    : none;
    -webkit-transition : all 0.3s ease 0s;
    -moz-transition    : all 0.3s ease 0s;
    -o-transition      : all 0.3s ease 0s;
    transition         : all 0.3s ease 0s;
    }

a,
a:active,
a:focus,
a:active {
    text-decoration : none;
    outline         : none
    }

a:hover,
a:focus {
    text-decoration : none;
    color           : var(--accent-color-hover);
    }

p {
    margin-bottom : 20px;
    }

ul {
    margin     : 0;
    padding    : 0;
    list-style : none;
    }

/*------------------
 * Button Style
 *------------------*/
.btn {
    padding        : 14px 30px 11px;
    margin-bottom  : 0;
    font-size      : 14px;
    font-weight    : 500;
    border-radius  : 0;
    border         : 0;
    text-transform : uppercase;
    }

.btn-lg {
    font-weight : 700;
    font-size   : 24px;
    padding     : 15px 30px;
    }

/*btn-primary*/
.btn-primary {
    background-color : var(--accent-color);
    }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
    background : var(--accent-color-hover);
    }

/*btn-default*/
.btn-default {
    color            : #2a54f5;
    background-color : transparent;
    border           : 2px solid #2a54f5;
    }

.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus {
    background   : #2a54f5;
    color        : #ffffff;
    border-color : #2a54f5;
    }

button:focus,
.btn:focus,
.btn:active:focus {
    outline : none;
    }

/* --------------------
 * Column Block
 * -------------------*/

.columns-block {
    display                : -webkit-flex;
    display                : flex;
    -webkit-flex-direction : row;
    flex-direction         : row;
    margin                 : 60px auto;
    padding                : 0;
    box-shadow             : 0 0 0 1px #eaeaea;
    }

.blocks {
    box-sizing : border-box;
    }

.left-col-block {
    overflow     : hidden;
    /* Original panel: -webkit-flex: 1 0 0; flex: 1 0 0; */
    -webkit-flex : .92 0 0;
    flex         : .92 0 0;
    position     : relative;
    background   : rgba(255, 255, 255, .8);
    border-right : 1px solid #eaeaea;
    }

.right-col-block {
    /* Original panel: -webkit-flex: 2 0 0; flex: 2 0 0; */
    -webkit-flex : 2.08 0 0;
    flex         : 2.08 0 0;
    position     : relative;
    background   : #ffffff;
    }

@media (max-width : 768px) {

    .columns-block {
        display    : block;
        margin     : 0;
        box-shadow : none;
        }

    .left-col-block {
        width    : 100%;
        position : relative;
        border   : 0;
        }

    .right-col-block {
        width      : 100%;
        position   : relative;
        box-shadow : none;
        }

    .section-tabs {
        left      : 50%;
        width     : calc(100vw - 24px);
        top       : 12px;
        transform : translateX(-50%);
        }

    .section-about {
        padding-top : 78px;
        }
    }

@media (min-width : 769px) and (max-width : 1024px) {
    .columns-block {
        margin-top    : 30px;
        margin-bottom : 30px;
        }

    .section-tabs {
        left      : 50%;
        width     : calc(100vw - 48px);
        top       : 16px;
        transform : translateX(-50%);
        }
    }

/* --------------------
 * Section Background
 * -------------------*/

.gray-bg {
    background-color : #ffffff;
    }

/* --------------------
 *  main Wrapper
 * -------------------*/
#main-wrapper {
    overflow : hidden;
    }

/*-------------------
 * Section Wrapper
 *-------------------*/
.section-wrapper {
    padding       : 10px;
    border-bottom : 1px solid #eaeaea;
    }

@media (max-width : 480px) {
    .section-wrapper {
        padding : 30px 20px;
        }
    }

/*---------------------------
* Section Title
*---------------------------*/
.section-title {
    margin-bottom : 15px;
    }

.section-title h2 {
    margin-bottom : 5px;
    color         : #bebece;
    }

/*---------------------------
* Section Tabs
*---------------------------*/

.section-tabs {
    background      : rgba(255, 255, 255, .46);
    border          : 1px solid rgba(255, 255, 255, .92);
    border-radius   : 999px;
    box-shadow      : 0 20px 64px rgba(15, 23, 42, .2), 0 0 28px rgba(255, 255, 255, .36), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(184, 58, 58, .035);
    isolation       : isolate;
    left            : 50%;
    overflow        : hidden;
    padding         : 8px;
    position        : fixed;
    top             : 18px;
    transform       : translateX(-50%);
    width           : min(1040px, calc(100vw - 32px));
    z-index         : 100;
    -webkit-backdrop-filter : blur(30px) saturate(190%);
    backdrop-filter : blur(30px) saturate(190%);
    }

.section-tabs::before {
    background : linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle at calc(100% - 112px) 50%, rgba(184, 58, 58, .08), rgba(184, 58, 58, 0) 16%), radial-gradient(ellipse at calc(100% - 112px) 0%, rgba(184, 58, 58, .1), rgba(184, 58, 58, 0) 19%), radial-gradient(ellipse at calc(100% - 112px) 100%, rgba(184, 58, 58, .08), rgba(184, 58, 58, 0) 18%);
    border-radius : inherit;
    content    : "";
    inset      : 0;
    pointer-events : none;
    position   : absolute;
    z-index    : 0;
    }

.section-tabs-inner {
    align-items    : center;
    display       : flex;
    gap           : 8px;
    justify-content : space-between;
    padding       : 0 2px;
    position      : relative;
    width         : 100%;
    z-index       : 1;
    }

.section-tab-list {
    display       : flex;
    gap           : 8px;
    min-width     : 0;
    overflow-x    : auto;
    scrollbar-width : none;
    }

.section-tab-list::-webkit-scrollbar {
    display : none;
    }

.section-tab {
    align-items     : center;
    background      : rgba(255, 255, 255, .4);
    border          : 1px solid rgba(255, 255, 255, .64);
    border-radius   : 999px;
    box-shadow      : inset 0 1px 0 rgba(255, 255, 255, .72), 0 2px 8px rgba(15, 23, 42, .05);
    color           : #383838;
    display         : inline-flex;
    flex            : 0 0 auto;
    font-size       : 12px;
    font-weight     : 600;
    letter-spacing  : .04em;
    line-height     : 1;
    padding         : 10px 14px 9px;
    text-transform  : uppercase;
    transition      : background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

.section-tab:hover,
.section-tab:focus {
    background   : rgba(255, 255, 255, .64);
    border-color : rgba(184, 58, 58, .35);
    color        : var(--accent-color);
    }

.section-tab.active {
    background   : var(--accent-color);
    border-color : var(--accent-color);
    box-shadow   : 0 8px 22px rgba(184, 58, 58, .22), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 0, 0, .08);
    color        : #ffffff;
    }

.section-tab-overflow {
    display  : none;
    position : relative;
    }

.section-tab-more {
    gap : 6px;
    }

.section-tab-more .fa {
    font-size  : 13px;
    transition : transform .2s ease;
    }

.section-tab-overflow.open .section-tab-more .fa {
    transform : rotate(180deg);
    }

.section-tab-menu {
    background    : linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .54));
    border        : 1px solid rgba(255, 255, 255, .82);
    border-radius : 12px;
    box-shadow    : 0 16px 38px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .84);
    display       : none;
    min-width     : 148px;
    padding       : 6px;
    position      : absolute;
    right         : 0;
    top           : calc(100% + 10px);
    -webkit-backdrop-filter : blur(22px) saturate(170%);
    backdrop-filter : blur(22px) saturate(170%);
    }

.section-tab-overflow.open .section-tab-menu {
    display : block;
    }

.section-tab-menu a {
    border-radius   : 8px;
    color           : #383838;
    display         : block;
    font-size       : 12px;
    font-weight     : 600;
    letter-spacing  : .04em;
    line-height     : 1;
    padding         : 10px 12px 9px;
    text-transform  : uppercase;
    white-space     : nowrap;
    }

.section-tab-menu a:hover,
.section-tab-menu a:focus,
.section-tab-menu a.active {
    background : rgba(184, 58, 58, .1);
    color      : var(--accent-color);
    }

.section-tabs .theme-toggle {
    background : transparent;
    border     : 0;
    box-shadow : none;
    flex       : 0 0 auto;
    margin-left : 12px;
    margin-top : 0;
    padding    : 0;
    }

.section-tabs .theme-toggle:hover,
.section-tabs .theme-toggle:focus {
    background : transparent;
    border     : 0;
    box-shadow : none;
    }

@media (max-width : 768px) {
    .section-tabs {
        overflow : visible;
        padding  : 7px;
        width    : min(430px, calc(100vw - 24px));
        }

    .section-tabs-inner {
        gap : 6px;
        }

    .section-tab-list {
        gap      : 6px;
        overflow : visible;
        }

    .section-tab {
        font-size : 11px;
        padding   : 9px 11px 8px;
        }

    .section-tab-desktop-only {
        display : none;
        }

    .section-tab-overflow {
        display : block;
        }

    .section-tabs .theme-toggle {
        margin-left : 6px;
        }

    .section-tabs .theme-toggle-text {
        display : none;
        }
    }

@media (max-width : 380px) {
    .section-tab {
        padding : 9px 9px 8px;
        }

    .section-tabs .theme-toggle {
        margin-left : 2px;
        }
    }

.section-wrapper {
    scroll-margin-top : 86px;
    }

.feature-disabled {
    display : none !important;
    }

.section-about {
    padding-top : 72px;
    }

/*-----------------------------
 * NAVIGATION & HEADER STYLE
 *-----------------------------*/

.header {
    padding  : 20px !important;
    margin   : 0;
    position : relative;
    }

.header .profile-img {
    /* Original image: max-width none; margin-bottom: 50px; */
    margin        : 0 auto 44px;
    max-width     : 300px;
    }

.header .content-wrapper {

    }

.header .content {
    width  : 100%;
    margin : 0 auto;
    }

.header .content h1 {
    line-height : 1;
    margin      : 0 0 5px;
    }

.header .content .lead {
    font-size : 18px;
    }

.header .content .about-text {
    margin : 10px 0;
    }

.header .btn {
    margin-top : 40px;
    }

@media (max-width : 768px) {
    .header {
        padding       : 0;
        text-align    : center;
        border-bottom : 1px solid #ededed;
        }

    .header img {
        margin : 0 auto;
        }

    .header .content {
        padding : 50px;
        }
    }

/* Header Sticky */

.sticky {
    position : -webkit-sticky;
    position : sticky;
    top      : 0;
    }

/*-------------------
 * Social Icon
 *-------------------*/

.social-icon {
    margin  : 20px 0;
    padding : 0;
    display : block;
    }

.social-icon li {
    display : inline-block;
    margin  : 0 2px;
    }

.social-icon li a {
    display       : block;
    font-size     : 12px;
    color         : #333333;
    width         : 34px;
    height        : 34px;
    line-height   : 33px;
    text-align    : center;
    border-radius : 2px;
    border        : 2px solid #eeeeee;
    }

.social-icon li a:hover {
    border-color : #cccccc;
    }

.x-social-icon {
    display        : inline-block;
    width          : 13px;
    height         : 13px;
    vertical-align : -2px;
    }

.theme-toggle {
    align-items       : center;
    background        : rgba(255, 255, 255, .72);
    border            : 1px solid #e6e6e6;
    border-radius     : 999px;
    color             : #333333;
    cursor            : pointer;
    display           : inline-flex;
    gap               : 9px;
    margin-top        : 2px;
    padding           : 6px 11px 6px 6px;
    transition        : background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    }

.theme-toggle:hover,
.theme-toggle:focus {
    border-color : #cccccc;
    box-shadow   : 0 4px 14px rgba(0, 0, 0, .08);
    }

.theme-toggle-track {
    background    : #eeeeee;
    border-radius : 999px;
    display       : inline-flex;
    height        : 24px;
    padding       : 2px;
    width         : 44px;
    }

.theme-toggle-thumb {
    align-items      : center;
    background       : var(--accent-color);
    border-radius    : 50%;
    color            : #ffffff;
    display          : inline-flex;
    height           : 20px;
    justify-content  : center;
    position         : relative;
    transform        : translateX(0);
    transition       : transform .25s ease, background-color .25s ease, color .25s ease;
    width            : 20px;
    }

.theme-toggle .fa {
    font-size : 11px;
    position  : absolute;
    }

.theme-icon-moon {
    opacity : 0;
    }

.theme-icon-sun {
    opacity : 1;
    }

.theme-toggle-text {
    font-size      : 12px;
    font-weight    : 500;
    letter-spacing : .02em;
    }

.reader-mode-toggle {
    align-items     : center;
    background      : #050505;
    border          : 2px solid #ffffff;
    border-radius   : 999px;
    bottom          : 24px;
    box-shadow      : 0 10px 24px rgba(0, 0, 0, .24), 0 0 16px rgba(255, 255, 255, .3);
    color           : #ffffff;
    cursor          : pointer;
    display         : inline-flex;
    gap             : 2px;
    justify-content : space-between;
    min-width       : 104px;
    padding         : 5px 10px;
    position        : fixed;
    right           : 24px;
    transition      : box-shadow .25s ease, transform .25s ease;
    z-index         : 220;
    }

.reader-mode-toggle:hover,
.reader-mode-toggle:focus {
    box-shadow : 0 14px 32px rgba(0, 0, 0, .3), 0 0 22px rgba(255, 255, 255, .4);
    color      : #ffffff;
    transform  : translateY(-3px) scale(1.02);
    }

.reader-mode-switch {
    background    : #3f3f3f;
    border-radius : 999px;
    display       : inline-flex;
    flex          : 0 0 auto;
    height        : 26px;
    position      : relative;
    transition    : background-color .25s ease;
    width         : 40px;
    }

.reader-mode-text {
    font-size      : 14px;
    font-weight    : 600;
    letter-spacing : 0;
    line-height    : 26px;
    min-width      : 46px;
    text-align     : left;
    }

.reader-mode-thumb {
    background    : #ffffff;
    border-radius : 50%;
    box-shadow    : 0 2px 8px rgba(0, 0, 0, .22);
    height        : 20px;
    left          : 3px;
    position      : absolute;
    top           : 3px;
    transition    : transform .25s ease;
    width         : 20px;
    }

html.reader-mode-disabled .reader-mode-toggle {
    display : none;
    }

.machine-view {
    display    : none;
    min-height : 100vh;
    padding    : 74px 22px 124px;
    }

.machine-view-shell {
    background    : rgba(13, 16, 22, .94);
    border        : 1px solid rgba(148, 163, 184, .18);
    border-radius : 14px;
    box-shadow    : 0 28px 90px rgba(0, 0, 0, .38);
    margin        : 0 auto;
    max-width     : 980px;
    overflow      : hidden;
    }

.machine-view-header {
    align-items      : center;
    background       : rgba(255, 255, 255, .04);
    border-bottom    : 1px solid rgba(148, 163, 184, .14);
    color            : #8f98a8;
    display          : flex;
    font-family      : Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size        : 12px;
    justify-content  : space-between;
    letter-spacing   : .02em;
    padding          : 12px 16px;
    }

.machine-file-name {
    color       : #d6d9df;
    font-weight : 600;
    }

.machine-file-type {
    color : #788293;
    }

.machine-markdown {
    background  : transparent;
    border      : 0;
    color       : #aeb6c5;
    display     : block;
    font-family : Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size   : 13px;
    line-height : 1.7;
    margin      : 0;
    overflow-x  : auto;
    padding     : 22px;
    white-space : pre-wrap;
    word-break  : normal;
    }

.machine-markdown code {
    background  : transparent;
    color       : inherit;
    font-family : inherit;
    font-size   : inherit;
    padding     : 0;
    white-space : inherit;
    }

@media (max-width : 560px) {
    .reader-mode-toggle {
        bottom : 16px;
        gap    : 2px;
        min-width : 98px;
        padding : 5px 9px;
        right  : 16px;
        }

    .reader-mode-text {
        font-size   : 13px;
        line-height : 24px;
        min-width   : 42px;
        }

    .reader-mode-switch {
        height : 24px;
        width  : 38px;
        }

    .reader-mode-thumb {
        height : 18px;
        left   : 3px;
        top    : 3px;
        width  : 18px;
        }

    .machine-view {
        padding : 58px 12px 100px;
        }

    .machine-markdown {
        font-size : 12px;
        padding   : 16px;
        }
    }

/*-------------------
 * Expertise
 *-------------------*/
.expertise-item {
    margin-bottom : 20px;
    }

.expertise-item h3 {
    margin-bottom : 5px;
    font-weight   : 700;
    }

/*-------------------
 * Skills Progressbar
 *-------------------*/

.progress-item {
    position : relative;
    }

.progress-item .progress-title {
    font-size     : 15px;
    font-weight   : 400;
    display       : inline-block;
    margin-bottom : 5px;
    }

.progress-item .progress {
    height        : 4px;
    box-shadow    : none;
    border-radius : 5px;
    }

.progress-item .progress-bar {
    background-color : var(--accent-color);
    box-shadow       : none;
    text-align       : right;
    }

.progress-item .progress-percent {
    font-size        : 10px;
    background-color : #313131;
    position         : absolute;
    top              : 5px;
    padding          : 0 8px;
    border-radius    : 3px;
    }

.progress-item .progress-percent::before {
    content      : "";
    position     : absolute;
    left         : 0;
    bottom       : -4px;
    border-top   : 6px solid #313131;
    border-right : 8px solid transparent;
    }

/*-------------------
 * Publications
 *-------------------*/

.paper-box {
    align-items     : flex-start;
    border-bottom   : 1px solid #efefef;
    display         : flex;
    flex-direction  : row;
    gap             : 24px;
    padding         : 0 0 28px;
    margin-bottom   : 28px;
    }

.paper-box:last-child {
    border-bottom : 0;
    margin-bottom : 0;
    padding-bottom : 0;
    }

.paper-box-image {
    flex      : 0 0 260px;
    max-width : 260px;
    }

.paper-box-image > div,
.paper-status {
    position : relative;
    }

.paper-box-image img {
    background : #ffffff;
    box-shadow : 3px 3px 6px rgba(0, 0, 0, .22);
    display    : block;
    max-width  : 100%;
    width      : 100%;
    }

.paper-badge {
    background-color : var(--paper-badge-color);
    color            : #ffffff;
    display          : inline-block;
    font-size        : 11px;
    font-weight      : 500;
    line-height      : 1.2;
    margin-left      : -8px;
    margin-top       : 8px;
    padding          : 5px 11px;
    position         : absolute;
    z-index          : 1;
    }

.paper-badge-muted {
    background-color : #777777;
    }

.paper-status {
    flex      : 0 0 260px;
    max-width : 260px;
    padding-top : 4px;
    }

.paper-box-text {
    flex      : 1 1 auto;
    min-width : 0;
    }

.paper-box-text h3 {
    color          : #2b2b3d;
    font-size      : 16px;
    font-weight    : bold;
    line-height    : 1.35;
    margin         : 0 0 10px;
    text-transform : none;
    }

.paper-authors,
.paper-detail {
    line-height : 1;
    margin      : 0;
    }

.paper-authors {
    margin-bottom : 8px;
    }

.paper-detail {
    margin-bottom : 4px;
    padding-left : 14px;
    position     : relative;
    }

.paper-detail::before {
    content  : "•";
    left     : 0;
    position : absolute;
    top      : 0;
    }

.paper-links {
    display     : inline;
    font-weight : 500;
    }

.paper-links a {
    cursor       : pointer;
    margin-right : 10px;
    }

.abstract {
    display    : none;
    margin-top : 12px;
    }

.abstract p {
    line-height    : 1.6;
    margin-bottom  : 0;
    }

@media (max-width : 768px) {
    .paper-box {
        display : block;
        }

    .paper-box-image,
    .paper-status {
        max-width     : 100%;
        margin-bottom : 18px;
        }

    .paper-box-image img {
        max-width : 520px;
        }
    }

/*-------------------
 * Projects
 *-------------------*/

.project-list {
    display : grid;
    gap     : 14px;
    }

.project-card {
    background    : rgba(255, 255, 255, .82);
    border        : 1px solid #eeeeee;
    border-radius : 8px;
    box-shadow    : 0 10px 28px rgba(15, 23, 42, .04);
    display       : grid;
    gap           : 20px;
    grid-template-columns : 150px minmax(0, 1fr);
    padding       : 16px 18px;
    transition    : border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

.project-card:hover {
    border-color : rgba(184, 58, 58, .28);
    box-shadow   : 0 14px 34px rgba(15, 23, 42, .07);
    transform    : translateY(-2px);
    }

.project-date {
    color       : #888888;
    font-size   : 14px;
    font-weight : 500;
    line-height : 1.45;
    padding-top : 2px;
    }

.project-title {
    color          : #2b2b3d;
    font-size      : 16px;
    font-weight    : bold;
    line-height    : 1.35;
    margin         : 0 0 8px;
    text-transform : none;
    }

.project-title a {
    color : inherit;
    }

.project-title a:hover,
.project-title a:focus {
    color : var(--accent-color);
    }

.project-title .fa {
    font-size      : 11px;
    margin-left    : 4px;
    vertical-align : 1px;
    }

.project-stack {
    display       : flex;
    flex-wrap     : wrap;
    gap           : 6px;
    margin-bottom : 9px;
    }

.project-stack span {
    background    : rgba(184, 58, 58, .08);
    border        : 1px solid rgba(184, 58, 58, .12);
    border-radius : 999px;
    color         : #7d2c2c;
    font-size     : 11px;
    font-weight   : 600;
    line-height   : 1;
    padding       : 5px 8px 4px;
    }

.project-points {
    margin  : 0;
    padding : 0;
    }

.project-points li {
    color         : #3d3d50;
    font-size     : 15px;
    font-weight   : 500;
    line-height   : 1.55;
    margin-bottom : 5px;
    padding-left  : 14px;
    position      : relative;
    }

.project-points li::before {
    color    : var(--accent-color);
    content  : "•";
    left     : 0;
    position : absolute;
    top      : 0;
    }

.project-points li:last-child {
    margin-bottom : 0;
    }

@media (max-width : 620px) {
    .project-card {
        display : block;
        padding : 15px;
        }

    .project-date {
        margin-bottom : 7px;
        }
    }

/*-------------------
 * Content Item
 *-------------------*/

.content-item {
    margin-bottom : 20px;
    }

.content-item h3 {
    margin         : 0 0 10px;
    line-height    : 1;
    font-weight    : bold;
    text-transform : uppercase;
    }

.content-item h4 {
    margin      : 0;
    line-height : 1;
    }

.section-experience .content-item h3 {
    margin-bottom : 4px;
    }

.section-experience .experience-organization {
    margin-bottom : 12px;
    }

.news-list {
    margin  : 0;
    padding : 0;
    }

.news-item {
    display       : grid;
    gap           : 14px;
    grid-template-columns : 118px minmax(0, 1fr);
    padding       : 0;
    margin-bottom : 12px;
    }

.news-item:last-child {
    margin-bottom  : 0;
    }

.news-date {
    color       : #888888;
    font-size   : 14px;
    font-weight : 500;
    line-height : 1.6;
    }

.news-text {
    font-size     : 15px;
    font-weight   : 500;
    line-height   : 1.8em;
    margin-bottom : 0;
    }

@media (max-width : 560px) {
    .news-item {
        display : block;
        }

    .news-date {
        display       : block;
        margin-bottom : 3px;
        }
    }

.content-item small {
    color : #888888;
    }

.section-about .about-intro p {
    font-size     : 15px;
    font-weight   : 500;
    line-height   : 1.8em;
    margin-bottom : 14px;
    }

.section-about .about-intro p:last-child {
    margin-bottom : 0;
    }

.soft-bold {
    color       : #2b2b3d;
    font-weight : 600;
    }

/*-------------------
 * Contact
 *-------------------*/

.feedback-form {
    margin-top : 50px;
    }

/*-------------------
 * Form Style
 *-------------------*/
.form-control {
    height        : 50px;
    padding       : 0 20px;
    font-size     : 13px;
    line-height   : 50px;
    color         : #969595;
    border        : 1px solid #cccccc;
    border-radius : 0;
    box-shadow    : none;
    box-sizing    : border-box;
    }

.form-control:focus,
.form-control:active {
    box-shadow : none;
    }

/* --------------------------------------------
 *   Footer
 *---------------------------------------------- */

/* Copyright */

.footer {
    padding : 30px 50px;
    }

.footer .copyright-section {
    font-size : 13px;
    color     : #888888;

    }

.footer .copyright-section .copytext {
    font-weight : 400;
    display     : block;
    }

.footer-accent {
    color       : var(--accent-color);
    font-weight : 500;
    }

@media (max-width : 480px) {
    .footer {
        padding : 10px 20px;
        }
    }

/* ---------------------------------------------- /*
 * Preloader
/* ---------------------------------------------- */
#preloader {
    background : rgba(255, 255, 255,.8);
    bottom     : 0;
    left       : 0;
    position   : fixed;
    right      : 0;
    top        : 0;
    z-index    : 9999;
    }

#status,
.status-mes {
    background-image    : url(../img/preloader.svg);
    background-position : center;
    background-repeat   : no-repeat;
    height              : 200px;
    left                : 50%;
    margin              : -100px 0 0 -100px;
    position            : absolute;
    top                 : 50%;
    width               : 200px;
    }

.status-mes {
    background : none;
    left       : 0;
    margin     : 0;
    text-align : center;
    top        : 65%;
    }

/*-------------------
 * Dark Mode
 *-------------------*/

html.dark-mode {
    color-scheme : dark;
    }

html.dark-mode body {
    background : var(--dark-bg);
    color      : var(--dark-text);
    }

html.dark-mode a {
    color : var(--dark-accent);
    }

html.dark-mode a:hover,
html.dark-mode a:focus {
    color : var(--dark-accent-hover);
    }

html.dark-mode .footer-accent {
    color : var(--dark-accent);
    }

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .soft-bold,
html.dark-mode .paper-box-text h3,
html.dark-mode .paper-authors {
    color : var(--dark-heading);
    }

html.dark-mode p,
html.dark-mode .paper-detail,
html.dark-mode .abstract p {
    color : var(--dark-text);
    }

html.dark-mode .columns-block {
    box-shadow : 0 0 0 1px var(--dark-border), 0 20px 70px rgba(0, 0, 0, .24);
    }

html.dark-mode .left-col-block {
    background   : rgba(24, 27, 34, .92);
    border-right : 1px solid var(--dark-border);
    }

html.dark-mode .right-col-block,
html.dark-mode .section-wrapper,
html.dark-mode .footer {
    background : var(--dark-panel);
    }

html.dark-mode .gray-bg {
    background-color : var(--dark-panel-soft);
    }

html.dark-mode .section-wrapper,
html.dark-mode .paper-box,
html.dark-mode .project-card {
    border-color : var(--dark-border);
    }

html.dark-mode .project-card {
    background : rgba(255, 255, 255, .035);
    box-shadow : 0 12px 28px rgba(0, 0, 0, .18);
    }

html.dark-mode .project-card:hover {
    border-color : rgba(227, 111, 111, .45);
    box-shadow   : 0 16px 34px rgba(0, 0, 0, .26);
    }

html.dark-mode .section-tabs {
    background    : linear-gradient(135deg, rgba(34, 38, 48, .66), rgba(14, 16, 21, .42));
    border-color  : rgba(255, 255, 255, .16);
    box-shadow    : 0 20px 64px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(255, 255, 255, .05);
    }

html.dark-mode .section-tabs::before {
    background : linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 34%), radial-gradient(circle at 86% 8%, rgba(227, 111, 111, .16), rgba(227, 111, 111, 0) 30%);
    }

html.dark-mode .section-tab {
    background   : rgba(255, 255, 255, .06);
    border-color : rgba(255, 255, 255, .1);
    box-shadow   : inset 0 1px 0 rgba(255, 255, 255, .08);
    color        : var(--dark-muted);
    }

html.dark-mode .section-tab:hover,
html.dark-mode .section-tab:focus {
    background   : rgba(255, 255, 255, .1);
    border-color : rgba(227, 111, 111, .52);
    color        : var(--dark-accent-hover);
    }

html.dark-mode .section-tab.active {
    background   : linear-gradient(135deg, rgba(227, 111, 111, .95), rgba(227, 111, 111, .76));
    border-color : rgba(227, 111, 111, .64);
    box-shadow   : 0 8px 22px rgba(227, 111, 111, .22), inset 0 1px 0 rgba(255, 255, 255, .24);
    color        : #1a0f10;
    }

html.dark-mode .section-tab-menu {
    background   : linear-gradient(135deg, rgba(34, 38, 48, .88), rgba(14, 16, 21, .7));
    border-color : rgba(255, 255, 255, .14);
    box-shadow   : 0 16px 38px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .1);
    }

html.dark-mode .section-tab-menu a {
    color : var(--dark-muted);
    }

html.dark-mode .section-tab-menu a:hover,
html.dark-mode .section-tab-menu a:focus,
html.dark-mode .section-tab-menu a.active {
    background : rgba(227, 111, 111, .12);
    color      : var(--dark-accent-hover);
    }

html.dark-mode .section-title h2,
html.dark-mode .content-item small,
html.dark-mode .news-date,
html.dark-mode .project-date,
html.dark-mode .footer .copyright-section {
    color : var(--dark-muted);
    }

html.dark-mode .header .content .lead,
html.dark-mode .header .content .about-text,
html.dark-mode .content-item h4,
html.dark-mode .content-item p,
html.dark-mode .news-text,
html.dark-mode .project-points li {
    color : var(--dark-text);
    }

html.dark-mode .project-title,
html.dark-mode .project-title a {
    color : var(--dark-heading);
    }

html.dark-mode .project-title a:hover,
html.dark-mode .project-title a:focus {
    color : var(--dark-accent-hover);
    }

html.dark-mode .project-stack span {
    background   : rgba(227, 111, 111, .12);
    border-color : rgba(227, 111, 111, .2);
    color        : var(--dark-accent-hover);
    }

html.dark-mode .project-points li::before {
    color : var(--dark-accent);
    }

html.dark-mode .social-icon li a {
    background   : rgba(255, 255, 255, .03);
    border-color : var(--dark-border);
    color        : var(--dark-heading);
    }

html.dark-mode .social-icon li a:hover,
html.dark-mode .social-icon li a:focus {
    border-color : rgba(227, 111, 111, .58);
    color        : var(--dark-accent-hover);
    }

html.dark-mode .theme-toggle {
    background   : rgba(255, 255, 255, .06);
    border-color : var(--dark-border);
    color        : var(--dark-heading);
    }

html.dark-mode .section-tabs .theme-toggle,
html.dark-mode .section-tabs .theme-toggle:hover,
html.dark-mode .section-tabs .theme-toggle:focus {
    background : transparent;
    border     : 0;
    box-shadow : none;
    color      : var(--dark-heading);
    }

html.dark-mode .theme-toggle-track {
    background : rgba(227, 111, 111, .28);
    }

html.dark-mode .theme-toggle-thumb {
    background : var(--dark-accent);
    color      : #1a0f10;
    transform  : translateX(20px);
    }

html.dark-mode .theme-icon-moon {
    opacity : 1;
    }

html.dark-mode .theme-icon-sun {
    opacity : 0;
    }

html.dark-mode .paper-box-image img {
    background : #ffffff;
    box-shadow : 3px 3px 10px rgba(0, 0, 0, .48);
    }

html.dark-mode .paper-badge {
    background-color : var(--dark-accent);
    color            : #16090a;
    }

html.dark-mode .paper-badge-muted {
    background-color : #737d8c;
    color            : #111318;
    }

html.dark-mode .form-control {
    background   : var(--dark-panel-soft);
    border-color : var(--dark-border);
    color        : var(--dark-text);
    }

html.dark-mode #preloader {
    background : rgba(17, 19, 24, .86);
    }

/*-------------------
 * Machine Mode
 *-------------------*/

html.machine-mode {
    color-scheme : dark;
    }

html.machine-mode body {
    background : radial-gradient(circle at 20% 0%, rgba(63, 70, 83, .2), transparent 34%), #080a0f;
    color      : #aeb6c5;
    }

html.machine-mode #main-wrapper {
    height         : 1px;
    left           : -10000px;
    overflow       : hidden;
    pointer-events : none;
    position       : absolute;
    top            : 0;
    visibility     : hidden;
    width          : 100%;
    }

html.machine-mode .machine-view {
    display : block;
    }

html.machine-mode .reader-mode-toggle {
    background   : #050505;
    border-color : #ffffff;
    box-shadow   : 0 10px 24px rgba(0, 0, 0, .38), 0 0 16px rgba(255, 255, 255, .22);
    color        : #ffffff;
    min-width    : 124px;
    }

html.machine-mode .reader-mode-toggle:hover,
html.machine-mode .reader-mode-toggle:focus {
    border-color : #ffffff;
    box-shadow   : 0 14px 32px rgba(0, 0, 0, .46), 0 0 22px rgba(255, 255, 255, .28);
    color        : #ffffff;
    }

html.machine-mode .reader-mode-switch {
    background : #4caf50;
    }

html.machine-mode .reader-mode-thumb {
    transform : translateX(14px);
    }

@media (max-width : 560px) {
    html.machine-mode .reader-mode-toggle {
        min-width : 116px;
        }

    html.machine-mode .reader-mode-thumb {
        transform : translateX(14px);
        }
    }