/* Color Scheme: Orange / Yellow */
        :root {
            --background-color: #fefbf5;
            --highlight-color: #b6274e;
            --main-color: #684e43;
            --link-color: #86985c;
            --link-color-hover: #8e6e29;
            --secondary-link-color: #6d8436;
            --secondary-link-border-color: #a5af97;
            --secondary-content-background-color: #fffefc;
            --link-button-background-color: #fffdfa;
        }

        /* Color Scheme: Blue / Summer */
        :root {
            --background-color: rgb(245, 254, 252);
            --highlight-color: #b6274e;
            --main-color: #183c5c;
            --link-color: #295fc3;
            --link-color-hover: #292c1f;
            --secondary-link-color: #1963ec;
            --secondary-link-border-color: #7d99b1;
            --secondary-content-background-color: #feffff;
            --link-button-background-color: #fafdff;
        }

        body {
            margin: 0;
            padding: 0;
        }

        a {
            color: var(--link-color)
        }

        a:hover {
            color: var(--link-color-hover);
            cursor: pointer
        }

        #background {
            position: fixed;
            top: 0;
            overflow: hidden;
            height: 0
        }

        #wave-canvas {
            display: block;
            position: relative;
            top: 0;
            left: 5%;
            width: 55%;
            min-width: 850px;
            height: 150px;
            border: 0
        }

        #main {
            margin: 0 auto 15px;
            padding: 45px 30px 15px;
            width: 100%;
            min-width: 240px;
            text-align: center;
            background-color: var(--background-color)
        }

        .highlight {
            color: var(--highlight-color);
            font-weight: 600
        }

        .highlight:hover {
            color: var(--highlight-color);
            font-weight: 600
        }

        .profile-pendant {
            display: none;
            bottom: 45px;
            right: -200px;
            position: absolute
        }

        @media (min-width: 768px) {
            .profile-pendant {
                display: block
            }
        }

        .main-content {
            padding: 0;
            text-align: center;
            cursor: default;
            text-align: center;
        }

        /*.main-content{background:rgba(238,238,238,0.95);padding:0;text-align:center;cursor:default;text-align:center;}*/
        /*.main-content{margin-left:6.5104167%;width:86.9791667%;}*/
        @media (min-width: 768px) {
            .main-content {
                width: 66%;
                min-width: 668px;
                margin: auto;
            }
        }

        @media (min-width: 1200px) {
            .main-content {
                width: 66%;
                max-width: 1080px;
                margin: auto;
            }
        }

        /* Avatar, Name, etc. */
        #main-content-container {
            margin: 0 auto;
            padding: 15px 0 0;
            max-width: 1080px;
        }

        @media (min-width: 768px) {
            #main-content-container {
                padding: 15px 0 0;
            }
        }

        #main-content-container .col-avatar {
            text-align: center;
            min-width: 220px;
        }

        @media (min-width: 768px) {
            #main-content-container .col-avatar {
                text-align: center
            }
        }

        #main-content-container .col-avatar .avatar {
            z-index: 100;
            width: 200px;
            height: 200px;
            border-radius: 100%;
            box-shadow: 0 0 0 0.3em #eee;
            opacity: 1;
        }

        @media (min-width: 1200px) {
            #main-content-container .col-avatar .avatar {
                margin-bottom: -50px
            }
        }

        #main-content-container .col-info {
            height: 100%;
            align-items: center;
        }

        #main-info-container {
            padding-top: 15px
        }

        #main-info-container .col-name {
            text-align: center;
            margin-top: 30px
        }

        @media (min-width: 768px) {
            #main-info-container .col-name {
                text-align: left;
                margin-top: 0;
            }
        }

        #main-info-container .col-name .text {
            text-align: left
        }

        #main-info-container .col-name .name {
            margin: 0;
            color: var(--main-color);
            font-size: 1.85em;
            font-family: "Source Sans Pro", Helvetica, sans-serif
        }

        #main-info-container .col-name .email {
            color: #666;
            font-size: 14px
        }

        #main-info-container .col-link {
            text-align: center;
            margin: -5px 0 -25px;
        }

        #main-info-container .col-link ul {
            margin: 0px auto auto;
            padding: 0;
            list-style: none;
            text-align: center
        }

        #main-info-container .col-link li {
            display: inline-block;
            margin: auto;
            padding: 0 10px;
            color: #ccc;
            line-height: 10px
        }

        #main-info-container .col-link li a {
            width: 45px;
            height: 45px;
            color: #ccc;
            padding: 0;
            font-size: 45px;
            line-height: 45px
        }

        #main-info-container .col-link li a:focus,
        #main-info-container .col-link li a:hover {
            text-decoration: none;
            cursor: hand
        }

        #main-info-container .col-link li a.border {
            border: 1px solid #ccc;
            border-radius: 100%;
        }

        #main-info-container .col-link li a.padding {
            padding: 0px 0px;
            font-size: 22px
        }

        .content-container {
            width: 100%;
            padding: 0 30px
        }

        .main-news-container {
            margin: auto;
            padding: 0 0em;
            max-width: 1080px;
            text-align: left;
            padding-top: 30px;
            max-width: 1080px;
            font-size: 1rem;
            line-height: 1.4
        }

        @media (min-width: 1200px) {
            .main-news-container {
                padding-top: 45px;
            }
        }

        .main-news-container .subtitle {
            margin-top: 0px;
            color: var(--main-color)
        }

        .main-news-container .subtitle.subtitle-spaced {
            margin-top: 30px;
        }

        .news-list {
            max-height: 300px;
            overflow-y: auto;
            list-style-type: disc;
            padding-left: 20px;
            margin: 0;
            font-size: 0.9rem;
        }

        .social-links {
            text-align: center;
            margin-top: -10px;
            margin-bottom: -30px;
        }

        .social-link-icon {
            width: 20px;
            height: 20px;
            margin: 5px;
        }

        .social-link-icon-github {
            width: 30px;
            height: 30px;
        }

        section.overview ul,
        section.overview li,
        section.overview h3,
        section.overview h1,
        section.overview p {
            margin: 0;
            padding: 0
        }

        section.overview h1 {
            font-weight: 700
        }

        section.overview li {
            font-weight: 400;
            list-style: none
        }

        .join,
        .up::after,
        .down::before {
            background-position: 50% 50%
        }

        .up::after,
        .down::before {
            background-repeat: no-repeat;
            content: "";
            display: block;
            height: 20px
        }

        .up::after {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCA3IDQiPjxwYXRoIGZpbGw9IiM1NjZjN2YiIGQ9Ik0xIDRWM2gxVjJoM3YxaDF2MWgxVjJINlYxSDVWMEgydjFIMXYxSDB2MiIvPjwvc3ZnPg==)
        }

        .down::before {
            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3cHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgNyA0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3IDQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiM1NjZjN2YiIHBvaW50cz0iNiwwIDYsMSA1LDEgNSwyIDIsMiAyLDEgMSwxIDEsMCAwLDAgMCwyIDEsMiAxLDMgMiwzIDIsNCA1LDQgNSwzIDYsMyA2LDIgNywyIDcsMCAiLz48L3N2Zz4=)
        }

        .join {
            background-repeat: repeat-y;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxcHgiIGhlaWdodD0iMXB4IiB2aWV3Qm94PSIwIDAgMSAxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxIDEiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1NjZjN2YiIGQ9Ik0wLDBoMXYxSDBWMHoiLz48L3N2Zz4=)
        }

        .thin,
        .thick {
            background: #ffffff
        }

        .thin {
            border: 1px solid var(--secondary-link-border-color);
            padding: .5em
        }

        .main {
            text-align: center
        }

        .main ul {
            display: block;
            width: 150px;
            margin: 1em auto 0
        }

        ul.row {
            width: 100%;
            display: flex;
            align-items: flex-start
        }

        ul.row li.page {
            flex: 1;
            margin: 0 .5em;
            min-width: 280px
        }

        ul.row li.page.stretch {
            align-self: stretch
        }

        ul.row li.page:first-child {
            margin-left: 0
        }

        ul.row li.page:last-child {
            margin-right: 0
        }

        ul.row li.page h3+ul.content {
            margin-top: 1.5em
        }

        ul.row li.page ul.content li {
            border-top: 1px solid var(--secondary-link-border-color);
            padding: 2px 5px
        }

        ul.row li.page ul.content li.level-2 {
            padding: 2px 12px
        }

        ul.row li.page ul.content li ul.section li {
            border-top: none;
            padding: 0
        }

        ul.row li.page ul.content li ul.section li:before {
            content: "― "
        }

        section.overview {
            background: var(--secondary-content-background-color);
            transition: max-width 400ms ease-in-out;
            padding: 20px;
            margin: auto;
            z-index: 99
        }

        section.overview .thin h3 {
            will-change: auto;
            transition: transform 400ms ease-in-out;
            transform-origin: 0 50%
        }

        section.overview .thin b {
            display: block;
            padding: 2px 5px
        }

        section.overview .thin ul.content {
            transition: opacity 200ms ease;
            opacity: 1
        }

        @media (max-width: 1480px) {
            ul.row li.page {
                margin: 0
            }
        }

        .toggle-overview {
            background: var(--background-color);
            display: block;
            text-align: center;
            padding: 5px;
            color: var(--main-color);
            font-weight: 500
        }

        .toggle-overview:hover {
            text-decoration: none
        }

        /* @media (max-width: 560px) {section.overview {display:none}} */
        .thick {
            border: 3px solid var(--secondary-link-border-color);
            padding: .5em;
            font-size: 1.25rem
        }

        .thick>b {
            color: var(--main-color)
        }

        .thick>p {
            font-size: 1rem
        }

        .thick>p>a,
        .think>p>a:hover {
            background: var(--link-button-background-color);
            display: block;
            text-align: center;
            padding: 5px;
            color: var(--main-color);
            font-weight: 500;
            text-decoration: none
        }

        #pub-container {
            margin: auto;
            padding: 0 0em;
            max-width: 1080px;
            text-align: left;
            padding-top: 30px;
            max-width: 1080px
        }

        #pub-container .subtitle {
            color: var(--main-color);
        }

        #pub-container .subtitle a {
            font-size: 18px;
            color: var(--secondary-link-color);
            font-weight: 400
        }

        #pub-container .subtitle a.activated {
            color: #333333;
            font-weight: 600
        }

        #pub-container .subtitle a.activated:focus,
        #pub-container .subtitle a.activated:hover {
            text-decoration: none;
            cursor: initial
        }

        #pub-container .subtitle-aux {
            font-size: 1rem
        }

        #pub-container .subtitle-aux a.activated {
            color: #333333
        }

        #pub-container .subtitle-aux a.activated:focus,
        #pub-container .subtitle-aux a.activated:hover {
            text-decoration: none;
            cursor: initial
        }

        #pub-container .subtitle-aux .note {
            margin-left: 1em;
            color: #999999;
            text-decoration: none;
            font-size: 14px
        }

        #pub-card-container {}

        #pub-card-container>h5 {
            margin-bottom: 5px 0
        }

        #pub-card-container .pub-card {
            width: 100%;
            padding-bottom: 15px;
            font-size: 1rem
        }

        #pub-card-container .pub-card .col-l {
            text-align: center;
            padding-top: 10px
        }

        #pub-card-container .pub-card .col-r {
            padding-top: 10px
        }

        @media (min-width: 768px) {
            #pub-card-container .pub-card .col-l {
                flex: 0 0 30%;
                max-width: 30%
            }

            #pub-card-container .pub-card .col-r {
                flex: 0 0 70%;
                max-width: 70%
            }
        }

        #pub-card-container .pub-card img {
            width: 100%;
            margin: 0 auto
        }

        #pub-card-container .pub-card-body {
            width: 100%;
            background: transparent;
            padding-left: 0px
        }

        #pub-card-container .pub-card .title {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 4px;
            line-height: 1.4
        }

        #pub-card-container .pub-card .authors {
            font-weight: 400;
            color: #666666;
            margin-bottom: 4px;
            line-height: 1.4
        }

        #pub-card-container .pub-card .authors a {
            color: #666666
        }

        #pub-card-container .pub-card .authors u {
            color: #333333;
            font-weight: 600;
            text-decoration: none
        }

        #pub-card-container .pub-card .conference {
            color: #333333;
            font-weight: 600
        }

        #pub-card-container .pub-card .note {
            display: block;
            color: #999999;
            text-decoration: none;
            font-size: 14px
        }

        #pub-card-container .pub-card .info {
            margin-bottom: 0;
        }

        #pub-card-container .row {
            margin: 0
        }

        #pub-card-container .col-l,
        #pub-card-container .col-r {
            vertical-align: top;
            display: inline-block;
            margin: 0;
            padding-left: 0px
        }

        #footer {
            padding: 0 0 0.5em;
            margin-top: 2rem;
            min-width: 240px;
            background: #fff;
            font-size: 14px;
            line-height: 12px;
            text-align: left;
            background: url(../img/loong/loong-bottom-summer-repeat.png);
            background-size: 15px 15px;
            background-repeat: repeat;
        }

        #footer .container {
            max-width: 540px;
            padding: 0 45px;
            position: relative;
        }

        #footer .row {
            align-items: center;
        }

        #footer .comic {
            padding-right: 15px;
            padding-top: 15px;
        }

        #footer .copyright {
            flex-grow: 1;
            margin: 25px auto 5px;
            text-align: center;
            display: block;
            font-size: 1rem;
            line-height: 1.4;
            color: var(--main-color);
        }

        #footer .stat {
            width: 60px;
            height: 60px;
            overflow: hidden;
            margin: 0 auto 5px;
            padding: 0;
        }

        @media (min-width: 420px) {
            #footer .stat {
                display: block;
                width: 60px;
                height: 60px;
                overflow: hidden;
                margin: 5px auto -25px;
                padding-right: 15px;
            }
        }

        #footer a {
            color: #666666;
        }

        #footer a:hover {
            color: #333333;
        }

        .bold {
            font-weight: 600
        }

        .red-highlight {
            color: red;
            font-size: 1rem;
        }

        .hide {
            display: none
        }

        .publication-image {
            display: block;
            margin: auto;
            width: 200px;
            height: 140px;
            object-fit: cover;
            background-color: #f0f0f000;
        }

        .publication-image-scale {
            display: block;
            margin: auto;
            width: 200px;
            height: 140px;
        }

        #pub-card-container .pub-card img.publication-image-tall {
            height: 170px;
        }

        #pub-card-container .pub-card img.publication-image-narrow {
            width: 180px;
            height: auto;
        }