/* sippo custom 24-03 */
:root {
    --BACK: #20354a;
    --TEXT_MAIN: #f0f0f0;
    --TEXT_SUB: #c0cbd5;
    /*
    --BACK: #1e2832;
    --TEXT_MAIN: #f0f0f0;
    --TEXT_SUB: #aab4be;
    */
}

* {
    margin: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    word-break: break-word;
    scrollbar-color: var(--TEXT_MAIN) var(--TEXT_SUB);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: var(--TEXT_SUB);
}

*::-webkit-scrollbar-thumb {
    background: var(--TEXT_MAIN);
}

body {
    background-color: var(--BACK);
    min-height: calc(100vh -32px);
    min-height: calc(100svh - 32px);
}

header, footer, #meta, #main, #pan{
    width: 90%;
    max-width: 720px;
    margin: 0 auto;
}

header {
    margin-top: 32px;
    margin-bottom: 64px;
}

header #headerSiteName {
    font-size: 28px;
    font-weight: bold;
}

header #headerSiteName a {
    text-decoration: none;
}

header nav {
    overflow-x: auto;
    white-space: nowrap;
}

header nav a {
    color: var(--TEXT_SUB);
    font-size: 16px;
    white-space: nowrap;
}

footer {
    position: sticky;
    top: 100vh;
    top: 100svh;
    margin: 32px auto 0 auto;
}

footer * {
    color: var(--TEXT_MAIN);
}

h1, h2, h3, h4, h5, h6, div, p, span, a, code:not(pre code) {
    color: var(--TEXT_MAIN);
}

a {
    word-break: normal;
    overflow-wrap: break-word;
}

hr {
    margin: 4px 0;
    border: dashed 1px var(--TEXT_SUB);
}

#meta {
    display: flex;
    flex-direction: column;
    margin-bottom: 64px;
}

#meta #postTitle {
    font-size: 28px;
    font-weight: bold;
}

#meta .post_meta {
    color: var(--TEXT_SUB);
    font-size: 12px;
}

#meta .post_meta * {
    color: var(--TEXT_SUB);
}

#main {
    margin-bottom: 32px;
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    margin-bottom: 8px;
    font-weight: bold;
}

#main h1 {
    border-bottom: solid 2px var(--TEXT_SUB);
    font-size: 28px;
}

#main h2, #main h3 {
    padding-left: 8px;
    border-left: solid 2px var(--TEXT_SUB);
}

#main h2 {
    font-size: 20px;
}

#main h3 {
    font-size: 18px;
}

#main h4, #main h5, #main h6 {
    position: relative;
    padding-left: 8px;
}

#main h4::after, #main h5::after, #main h6::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--TEXT_SUB);
    width: 2px;
    height: 24%;
}

#main h4 {
    font-size: 16px;
}

#main h5 {
    font-size: 14px;
}

#main h6 {
    font-size: 12px;
}

#main p {
    margin: 16px 0;
    line-height: 1.6em;
    letter-spacing: 0.05em;
}

#main pre {
    background-color: var(--TEXT_SUB);
    margin: 16px 0;
    padding: 16px 8px;
    border-radius: 4px;
    overflow-x: auto;
    /*-webkit-overflow-scrolling: touch;*/
}

#main code:not(pre code) {
    background-color: var(--TEXT_MAIN);
    color: var(--BACK);
    padding: 0 4px;
    border-radius: 4px;
}

#main blockquote {
    position: relative;
    margin: 16px 0;
    padding: 16px;
    border-radius: 4px;
}

#main blockquote::before, #main blockquote::after {
    z-index: -1;
    position: absolute;
    color: var(--TEXT_SUB);
    font-size: 16px;
    font-weight: bold;
}

#main blockquote::before {
    content: "“";
    top: 0px;
    left: 8px;
}

#main blockquote::after {
    content: "”";
    bottom: 0px;
    right: 8px;
}

#main blockquote * {
    color: var(--TEXT_SUB);
}

#main img, #main video {
    background-color: var(--TEXT_SUB);
    width: 100%;
    margin: 16px 0;
    aspect-ratio: 16/9;
    object-fit: contain;
}

#main table {
    display: block;
    max-width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    overflow: hidden;
    overflow-x: auto;
}

#main table thead {
    border-bottom: 2px solid var(--TEXT_SUB);
}

#main table th, #main table td {
    min-width: 120px;
    padding: 8px 16px;
    border: none;
    border-left: 1px solid var(--TEXT_SUB);
    border-top: 1px solid var(--TEXT_SUB);
    text-align: left;
}

#main table td:first-child, #main table th:first-child{
    border-left:none;
}

#main table tr:first-child td, #main table tr:first-child th{
    border-top:none;
}

#main ul, #main ol {
    margin-bottom: 8px;
    padding-left: calc(20px + 16px);
}

#pan {
    display: grid;
    gap: 16px;
    grid-template-columns: calc(50% - 8px) calc(50% - 8px);
    justify-content: center;
    min-height: 120px;
    user-select: none;
}

#pan .pan_card {
    display: flex;
    min-height: 120px;
    padding: 8px;
    border: solid 2px var(--TEXT_SUB);
    border-radius: 4px;
    text-decoration: none;
    flex-direction: column;
}

#pan .pan_card_prev, #pan .pan_card_next {
    font-size: 14px;
    font-weight: bold;
}

#pan .pan_card_next {
    text-align: right;
}

#pan .pan_card_title {
    display: -webkit-box;
    word-break: break-all;
    font-size: 18px;
    font-weight: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*
#main blockquote::before {
    content: "> Quote";
    position: absolute;
    top: 2px;
    left: 8px;
    font-size: 14px;
}

#main blockquote::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--TEXT_SUB);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    opacity: 0.2;
}
*/
.info_card {
    position: relative;
    margin: 16px 0;
    padding: 32px 8px 8px 8px;
}

.info_card::before {
    content: "❖";
    position: absolute;
    top: 8px;
    left: 8px;
    color: var(--TEXT_SUB);
    font-size: 24px;
    font-weight: bold;
}

.info_card::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--TEXT_SUB);
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.link_card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    padding: 8px;
    text-decoration: none;
}

.link_card::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--TEXT_SUB);
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.link_card .link_card_title {
    display: -webkit-box;
    word-break: break-all;
    font-size: 18px;
    font-weight: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.link_card .link_card_here {
    margin-top: 16px;
    font-size: 12px;
    font-weight: bold;
}


.post_card {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    padding: 8px;
    text-decoration: none;
}

.post_card .post_card_title {
    text-decoration: underline;
    font-size: 24px;
}

.post_card .post_card_mata {
    color: var(--TEXT_SUB);
    font-size: 14px;
}

/*
.post_card::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--TEXT_SUB);
    width: 100%;
    height: 100%;
    opacity: 0.3;
}
*/