@import url("whippy.css");

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: normal;
    src: local(""), url("../woff2/notosans_regular.woff2") format("woff2"), url("../woff/notosans_regular.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: bold;
    src: local(""), url("../woff2/notosans_bold.woff2") format("woff2"), url("../woff/notosans_bold.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: normal;
    src: local(""), url("../woff2/notosanskr_regular.woff2") format("woff2"), url("../woff/notosanskr_regular.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans KR";
    font-style: normal;
    font-weight: bold;
    src: local(""), url("../woff2/notosanskr_bold.woff2") format("woff2"), url("../woff/notosanskr_bold.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: normal;
    src: local(""), url("../woff2/notosanssc_regular.woff2") format("woff2"), url("../woff/notosanssc_regular.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: bold;
    src: local(""), url("../woff2/notosanssc_bold.woff2") format("woff2"), url("../woff/notosanssc_bold.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: normal;
    src: local(""), url("../woff2/notosansjp_regular.woff2") format("woff2"), url("../woff/notosansjp_regular.woff") format("woff");
}
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: bold;
    src: local(""), url("../woff2/notosansjp_bold.woff2") format("woff2"), url("../woff/notosansjp_bold.woff") format("woff");
}

html, body {
    height: 100%;
}
body {
    position: relative;
    background: #212529;
    font-family: "Noto Sans", "Noto Sans KR", "Noto Sans SC", "Noto Sans JP", -apple-system, sans-serif;
}
nav {
    height: 64px;
    box-shadow: 0 0 2px #06080a;
}
img:not(.resize) {
    max-width: 100%;
}
textarea {
    resize: none;
}
header {
    flex-shrink: 0;
    z-index: 2147483646;
}
footer {
    width: 100%;
    min-height: 128px;
    background-color: #f5f5f5;
    flex-shrink: 0;
}

::-webkit-scrollbar {
    display: none;
}

.mt-25 {
    margin-top: 0.75rem !important;
}
.mb-25 {
    margin-bottom: 0.75rem !important;
}
.py-25 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.gap-25 {
    gap: 0.75rem !important;
}
.rounded-lg {
    border-radius: var(--bs-border-radius) !important;
}
.error {
    color: red;
}
.search-form {
    max-width: 360px;
    flex-grow: 0.5;
}
.navbar-collapse.collapsing .search-form, .navbar-collapse.show .search-form {
    max-width: 100%;
    padding-top: 8px;
}
.navbar-collapse.collapsing #nav-login, .navbar-collapse.show #nav-login {
    margin: 8px 0;
}
.nav-avatar {
    margin: -5px 0;
}
.navbar-bottom {
    height: 64px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 2147483647;
}
.navbar-bottom-icon {
    width: 20%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar-bottom-icon a {
    color: #9b9d9e;
}
.navbar-bottom-icon.active a {
    color: #fff !important;
}
.modal {
    z-index: 2147483647;
}
.modal-dialog {
    margin-bottom: 48px;
    overflow-y: scroll;
}
.hero, .profile-sidebar {
    max-width: 100%;
    background-color: #ffd71e;
}
.hero .social {
    position: relative;
    top: 3px;
}
.hero .level-1 {
    color: #fff;
}
.no-banner {
    height: 69px;
    margin: 0;
    overflow: hidden;
    line-height: 69px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.small {
    font-size: 12pt;
}
.social {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 4px;
    background-size: 16px;
    background-repeat: no-repeat;
}
.social.twitter {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E");
    background-position-y: 1px;
}
.social.instagram {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M224.1%20141c-63.6%200-114.9%2051.3-114.9%20114.9s51.3%20114.9%20114.9%20114.9S339%20319.5%20339%20255.9%20287.7%20141%20224.1%20141zm0%20189.6c-41.1%200-74.7-33.5-74.7-74.7s33.5-74.7%2074.7-74.7%2074.7%2033.5%2074.7%2074.7-33.6%2074.7-74.7%2074.7zm146.4-194.3c0%2014.9-12%2026.8-26.8%2026.8-14.9%200-26.8-12-26.8-26.8s12-26.8%2026.8-26.8%2026.8%2012%2026.8%2026.8zm76.1%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM398.8%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
    background-size: 15px;
}
.social.tiktok {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M448%2C209.91a210.06%2C210.06%2C0%2C0%2C1-122.77-39.25V349.38A162.55%2C162.55%2C0%2C1%2C1%2C185%2C188.31V278.2a74.62%2C74.62%2C0%2C1%2C0%2C52.23%2C71.18V0l88%2C0a121.18%2C121.18%2C0%2C0%2C0%2C1.86%2C22.17h0A122.18%2C122.18%2C0%2C0%2C0%2C381%2C102.39a121.43%2C121.43%2C0%2C0%2C0%2C67%2C20.14Z%22%2F%3E%3C%2Fsvg%3E");
    background-size: 14px;
    background-position-x: 1px;
}
.social.facebook {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-120%20-130)%22%3E%3Cg%20transform%3D%22translate(120%20130)%22%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22m20%2010.061c0-5.5566-4.4771-10.061-10-10.061-5.5229%200-10%204.5045-10%2010.061%200%205.0218%203.6569%209.1841%208.4375%209.9389v-7.0306h-2.5391v-2.9083h2.5391v-2.2166c0-2.5216%201.4929-3.9144%203.7771-3.9144%201.0941%200%202.2385%200.19651%202.2385%200.19651v2.476h-1.261c-1.2422%200-1.6296%200.77555-1.6296%201.5712v1.8873h2.7734l-0.44336%202.9083h-2.3301v7.0306c4.7806-0.75478%208.4375-4.9171%208.4375-9.9389%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.social.reddit {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20341.8%20341.8%22%3E%3Cmask%20id%3D%22m%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h341.8v341.8H0z%22%2F%3E%3Cpath%20d%3D%22M227.9%20170.9c0-6.9-5.6-12.5-12.5-12.5-3.4%200-6.4%201.3-8.6%203.5-8.5-6.1-20.3-10.1-33.3-10.6l5.7-26.7%2018.5%203.9c.2%204.7%204.1%208.5%208.9%208.5%204.9%200%208.9-4%208.9-8.9s-4-8.9-8.9-8.9c-3.5%200-6.5%202-7.9%205l-20.7-4.4c-.6-.1-1.2%200-1.7.3s-.8.8-1%201.4l-6.3%2029.8c-13.3.4-25.2%204.3-33.8%2010.6-2.2-2.1-5.3-3.5-8.6-3.5-6.9%200-12.5%205.6-12.5%2012.5%200%205.1%203%209.4%207.4%2011.4-.2%201.2-.3%202.5-.3%203.8%200%2019.2%2022.3%2034.7%2049.9%2034.7s49.9-15.5%2049.9-34.7c0-1.3-.1-2.5-.3-3.7%204.1-2%207.2-6.4%207.2-11.5zm-85.5%208.9c0-4.9%204-8.9%208.9-8.9s8.9%204%208.9%208.9-4%208.9-8.9%208.9-8.9-4-8.9-8.9zm49.7%2023.5c-6.1%206.1-17.7%206.5-21.1%206.5s-15.1-.5-21.1-6.5c-.9-.9-.9-2.4%200-3.3s2.4-.9%203.3%200c3.8%203.8%2012%205.2%2017.9%205.2s14-1.4%2017.9-5.2c.9-.9%202.4-.9%203.3%200%20.7%201%20.7%202.4-.2%203.3zm-1.6-14.6c-4.9%200-8.9-4-8.9-8.9s4-8.9%208.9-8.9%208.9%204%208.9%208.9-4%208.9-8.9%208.9z%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%22170.9%22%20cy%3D%22170.9%22%20r%3D%2285.5%22%20fill%3D%22%23fff%22%20mask%3D%22url(%23m)%22%2F%3E%3C%2Fsvg%3E");
    background-size: 32px;
    background-position: -8px;
}
.social.discord {
    margin-right: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2271%22%20height%3D%2255%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23A)%22%3E%3Cpath%20d%3D%22M60.105%204.898A58.55%2058.55%200%200%200%2045.653.415a.22.22%200%200%200-.232.11c-.624%201.11-1.315%202.558-1.8%203.696-5.457-.817-10.886-.817-16.232%200-.484-1.163-1.201-2.586-1.828-3.696-.048-.082-.14-.124-.232-.11-5.071.873-9.924%202.403-14.452%204.482-.039.017-.073.045-.095.082C1.578%2018.731-.944%2032.144.293%2045.391c.006.065.042.127.092.166%206.073%204.46%2011.956%207.167%2017.729%208.962a.23.23%200%200%200%20.249-.082%2042.08%2042.08%200%200%200%203.627-5.9c.062-.121.003-.265-.123-.313-1.931-.733-3.77-1.626-5.538-2.64-.14-.082-.151-.282-.022-.378a30.34%2030.34%200%200%200%201.1-.862.22.22%200%200%201%20.229-.031c11.62%205.305%2024.199%205.305%2035.682%200%20.076-.037.165-.025.232.028a28.31%2028.31%200%200%200%201.103.865c.129.096.12.296-.02.378-1.769%201.034-3.607%201.907-5.541%202.637-.126.048-.182.194-.12.316a47.25%2047.25%200%200%200%203.624%205.897c.056.079.157.113.249.084%205.801-1.795%2011.684-4.502%2017.757-8.962.053-.039.087-.099.092-.163%201.48-15.315-2.48-28.618-10.497-40.412a.18.18%200%200%200-.092-.085zM23.726%2037.325c-3.498%200-6.381-3.212-6.381-7.156s2.827-7.156%206.381-7.156c3.582%200%206.437%203.24%206.381%207.156%200%203.944-2.827%207.156-6.381%207.156zm23.592%200c-3.498%200-6.381-3.212-6.381-7.156s2.826-7.156%206.381-7.156c3.582%200%206.437%203.24%206.381%207.156%200%203.944-2.799%207.156-6.381%207.156z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22A%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h71v55H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    background-position-y: 2px;
}
.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    overflow: hidden;
}
.tag.bg-primary-subtle:hover {
    background-color: #c5d7f3 !important;
}
.tag.bg-body-secondary:hover {
    background-color: #dde0e3 !important;
}
.tag.bg-white:hover {
    background-color: #f2f2f2 !important;
}
.tag-tall {
    min-height: 44px;
    line-height: 32px;
}
.animation-tag {
    padding: 0.125rem 0.5rem;
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    color: #000;
    background-color: #ffd71e;
    border-radius: 0.5rem;
}
.post-username {
    max-width: calc(100% - 58px);
    margin-left: 4px;
    display: inline-flex;
    line-height: 48px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
}
.post-username:before {
    content: "";
    width: calc(100% - 2px);
    height: 48px;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(to right, transparent calc(100% - 6px), #fff);
}
.comic-preview {
    max-height: 50vh;
}
.upvote-group {
    margin-top: 68px;
    user-select: none;
}
.upvote-group .upvote {
    width: 96px;
    transition: none;
}
.upvote-group .upvote:before {
    width: 116px;
    height: 108px;
    display: block;
    position: absolute;
    left: 2px;
    bottom: 39px;
    background-image: url("../png/vote.png");
    background-size: 232px 108px;
    opacity: 0.8;
    transition: opacity 0.2s;
    content: "";
}
.upvote-group .upvote:disabled:before, .upvote-group:hover .upvote:before {
    opacity: 1;
}
.upvote-group .upvote.voted {
    color: #aaa;
}
.upvote-group .upvote.voted:before {
    background-position-x: 116px;
    opacity: 1;
}
html[lang="pt"] .upvote-group .upvote {
    width: 112px;
}
html[lang="ko"] .upvote-group .upvote {
    width: 160px;
}
html:not([data-bs-theme="dark"]) .upvote-group label, html:not([data-bs-theme="dark"]) .comment-upvote-group label {
    background-color: #e9ecef;
}
.comment-upvote-group, .comment-reply {
    margin-right: 6px;
    flex-wrap: nowrap;
    flex-basis: 0;
}
.comment-avatar {
    margin-right: 10px;
    flex-shrink: 0;
}
.reply-form {
    margin-left: 58px;
}
.search-page-form {
    padding-right: var(--bs-gutter-x);
}
.partial {
    max-width: 192px;
    padding-right: 0;
    border-width: 0;
    text-align: right;
}
.partial + .input-group-text {
    padding-left: 0;
}
.scroll {
    max-width: 100%;
    overflow-y: auto;
}
.message {
    display: flex;
}
.message-icon img {
    width: 48px;
    height: 48px;
    margin: 8px 12px 8px 8px;
}
.message-preview {
    width: calc(100% - 76px);
    height: 56px;
    padding-top: 8px;
    display: inline-block;
}
.ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis a {
    text-decoration: none;
}
.list-user {
    display: flex;
    text-decoration: none;
}
.list-user div {
    max-width: calc(100% - 74px);
}
.list-user .rounded-circle {
    margin-right: 10px;
}
.notification-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.notification-inner {
    position: relative;
    pointer-events: none;
}
.notification-inner a {
    color: #000;
    text-decoration: none;
    pointer-events: all;
}
.notification-inner a:hover {
    text-decoration: underline;
}
.rule {
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.rule::-webkit-details-marker {
    display: none;
}
.rule::after {
    width: 1.125rem;
    height: 0.625rem;
    margin: 0.625rem 0 0 0.625rem;
    background-image: url("../svg/arrow.svg");
    background-size: cover;
    flex-shrink: 0;
    transition: transform 0.25s;
    content: "";
}
details[open] > .rule::after {
    transform: rotate(180deg);
}
.comics-box {
    background-color: #f1eee5;
    border-radius: 10px;
}
.comics-box .card {
    border: 0;
}
.comics-sidebar {
    background-color: #ffd71e;
    border-radius: 0 10px 10px 0;
}
.comics-search input {
    height: 40px;
    border: 0;
    appearance: none;
}
.comics-search input[type="submit"] {
    border-top-right-radius: 8px;
}
.comics-sidebar select {
    margin: 0.75em 0 0.5em;
}
.comic-card-image {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.comic-card-comments {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.emote {
    max-width: 32px;
    height: 32px;
    object-fit: contain;
}
.user-badge {
    max-width: 24px;
    height: 24px;
    object-fit: contain;
}
#username .user-badge {
    max-width: 32px;
    height: 32px;
}
.level-1 {
    color: #ffd71e;
}
.level-2 {
    color: #1abc9c;
}
.level-3 {
    color: #e74c3c;
}
.level-4 {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: repeating-linear-gradient(45deg, #b0f7d3 0%, #0ff 6.25%, #ee82ee 25%, #0ff 43.75%, #b0f7d3 50%);
    background-size: 205% 100%;
    background-position: 0 0;
    animation: xat 4s linear infinite normal
}

#wrapper {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    padding-top: 64px;
    position: relative;
    display: flex;
    flex-direction: column;
}
#container {
    position: relative;
    background: #fff;
    overflow: hidden;
    flex: 1 0 auto;
}
#container.error-404 {
    background: url("../png/404.png") #fff no-repeat 5% bottom / 273px;
}
#nprogress {
    pointer-events: none;
}
#nprogress .bar {
    width: 100%;
    height: 4px;
    position: fixed;
    top: 59px;
    left: 0;
    background-color: #ffd71e;
    z-index: 2147483647;
}
#nprogress .peg {
    width: 16px;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    box-shadow: 0 0 10px #ffd71e, 0 0 5px #ffd71e;
    opacity: 1.0;
}
#nav-login {
    width: 128px;
    position: relative;
    right: 8px;
    background: var(--bs-btn-bg);
}
#user-votes {
    height: 66px;
    overflow-y: hidden;
    display: flex;
    flex-wrap: wrap;
    background-color: #f8f9fa;
    border-radius: var(--bs-border-radius);
    margin-top: 0.5rem;
    padding: 0.5rem;
    gap: 0.5rem;
}

#ad-anchor, #ad-anchor-close {
    margin-bottom: env(safe-area-inset-bottom);
}
.auth #ad-anchor, .auth #ad-anchor-close {
    margin-bottom: calc(64px + env(safe-area-inset-bottom));
}
#pw-oop-bottom_rail {
    line-height: 100%;
}
#style {
    max-width: 256px;
}
#edit {
    position: relative;
    top: 68px;
    z-index: 1;
}
#edit-buttons {
    width: 60%;
    height: 104px;
    margin-bottom: -32px;
    display: flex;
    position: relative;
    top: 16px;
    z-index: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
}
html[lang="ko"] #edit-buttons {
    width: 50%;
}
[data-bs-theme="light"] #add-tag {
    background-color: #f0f0f0;
}
[data-bs-theme="light"] .card {
    box-shadow: 0px 1px 10px rgba(0,0,0,.12), 0px 2px 4px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] {
    --bs-heading-color: #fff;
}
[data-bs-theme="dark"] table {
    border-color: #212529;
    --bs-table-bg: transparent;
}
[data-bs-theme="dark"] select, [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .comics-sidebar input[type="text"] {
    background-color: #1b1e21;
    color: #eee;
    border-color: rgba(0, 0, 0, 0);
}
[data-bs-theme="dark"] .input-group-text, [data-bs-theme="dark"] .btn {
    border-color: rgba(0, 0, 0, 0);
}
[data-bs-theme="dark"] .hero, [data-bs-theme="dark"] .profile-sidebar {
    background-color: #16181a;
}
[data-bs-theme="dark"] .hero .level-1 {
    color: #ffd71e;
}
[data-bs-theme="dark"] .card {
    color: #ccc;
    border-color: rgba(0, 0, 0, 0);
}
[data-bs-theme="dark"] .btn-light, [data-bs-theme="dark"] .btn-light:disabled {
    background-color: #1b1e21;
    color: #fff;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
[data-bs-theme="dark"] .btn-light:not(:disabled):hover {
    background-color: #313539;
}
[data-bs-theme="dark"] .border-dark-0 {
    border: 0 !important;
}
[data-bs-theme="dark"] .text-black-50 {
    color: rgba(173, 181, 189, 0.75) !important;
}
[data-bs-theme="dark"] .text-dark-white {
    color: #fff !important;
}
[data-bs-theme="dark"] .bg-dark-black {
    background-color: #212529 !important;
    border-color: #06080a;
}
[data-bs-theme="dark"] .bg-dark-input, [data-bs-theme="dark"] #user-votes {
    background-color: #1b1e21 !important;
}
[data-bs-theme="dark"] .d-dark-block {
    display: block !important;
}
[data-bs-theme="dark"] .tag, [data-bs-theme="dark"] .post-username:not(.level) {
    color: #fff;
}
[data-bs-theme="dark"] .tag.bg-primary-subtle:hover {
    background-color: #03132b !important;
}
[data-bs-theme="dark"] .tag.bg-dark-input:hover {
    background-color: #181b1e !important;
}
[data-bs-theme="dark"] .post-username:before {
    background: linear-gradient(to right, transparent calc(100% - 6px), #212529);
}
[data-bs-theme="dark"] .comics-box {
    background-color: #1b1e21;
}
[data-bs-theme="dark"] .comics-sidebar {
    background-color: #212529;
}
[data-bs-theme="dark"] .comics-sidebar button, [data-bs-theme="dark"] .comics-sidebar input[type="submit"] {
    background-color: #2b3035;
    color: #ccc;
}
[data-bs-theme="dark"] .card .border {
    border-color: rgba(0, 0, 0, 0) !important;
}
[data-bs-theme="dark"] .modal-body, [data-bs-theme="dark"] .notification-inner a {
    color: #fff;
}
[data-bs-theme="dark"] .rule::after {
    background-image: url("../svg/arrow_white.svg");
}
[data-bs-theme="dark"] .submission {
    background-color: #212529;
}
[data-bs-theme="dark"] #container {
    background-color: #06080a;
}

@-webkit-keyframes xat {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@keyframes xat {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

.profile-sidebar {
    background-size: 0;
    background-repeat: no-repeat;
}
#profile-sidebar-inner {
    padding: 0;
}
.profile-banner-desktop {
    padding: 0;
    width: 100%;
    height: 130px;
    background-color: var(--bs-warning);
}
a.profile-banner-desktop, div.profile-banner-desktop {
    display: block;
}
a.profile-banner-desktop {
    text-decoration: none;
}
img.profile-banner-desktop {
    object-fit: cover;
}
.profile-banner-dim {
    padding-left: 0;
    padding-right: 0;
}
#profile-banner-btn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: 32px;
    height: 32px;
    opacity: 0;
}
#profile-banner-btn svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}
#profile-avatar {
    margin-top: -4rem;
    pointer-events: none;
}
#profile-avatar img {
    pointer-events: initial;
}
.profile-sidebar p, #follow-text a {
    color: rgb(var(--bs-body-color-rgb));
}

@media (min-width: 1200px) {
    .ps-xl-45 {
        padding-left: 2.25rem !important;
    }
}
@media (max-width: 991px) {
    /* user profile */
    .profile-sidebar {
        background-size: cover;
        background-position: center;
    }
    #profile-banner-btn {
        opacity: 1;
    }
    div.profile-banner-desktop, a.profile-banner-desktop {
        display: none;
    }
    .profile-banner-dim {
        padding: 1.5rem;
        background-color: rgba(0,0,0,0.8);
    }
    #profile-avatar {
        margin-top: 1rem;
    }
    [data-bs-theme="light"] .profile-sidebar p, [data-bs-theme="light"] #follow-text a {
        color: rgb(var(--bs-light-rgb)) !important;
    }

    .comic-card-info {
        border-bottom: 0;
        border-radius: 0;
    }
    .rounded-lg {
        border-radius: 0 !important;
    }
    [data-bs-theme="dark"] .d-notlg-dark-block {
        display: block !important;
    }
}
@media (max-width: 767px) {
    nav {
        height: auto;
        /* min-height: 64px; */
    }
    footer {
        min-height: 224px;
    }
    .navbar-bottom + footer {
        margin-bottom: 64px;
    }
    .contact {
        margin-top: 1rem !important;
        text-align: left !important;
    }
    .comic-preview {
        max-height: initial;
    }
    .comics-sidebar {
        border-radius: 0 0 10px 10px;
    }
    .comics-search input[type="submit"] {
        border-top-right-radius: 0;
    }
    #wrapper {
        padding-top: 58.64px;
    }
    .auth #pw-oop-bottom_rail {
        margin-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}
@media (max-width: 575px) {
    .navbar-expand-sm .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-collapse {
        overflow-y: auto;
        max-height: 80vh;
    }
}