@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&family=Zen+Kaku+Gothic+Antique&display=swap');

:root {
    --color-white: #f6f3ef;
    --color-black: #2b2722;
    --color-gray: #7D705F;
    --color-red: #a06867;
}

h1 {
    margin: 1rem 0;
    font-size: xx-large;
}

h2 {
    margin: 0.5rem 0;
    font-size: x-large;
}

body {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    padding: 4vh 8vw;
    line-height: normal;
    color: var(--color-black);
    background-color: var(--color-white);
}

a {
    color: var(--color-red);
}

a:hover {
    text-decoration: underline;
}

::selection {
    color: var(--color-white);
    background-color: var(--color-red);
}

pre {
    border: dotted var(--color-black);
    padding: 0.5rem 0.75rem;
    margin: 1rem 0;
    overflow: auto;
    /* scrollbar-color: var(--color-black) var(--color-white); */
    /* scrollbar-width: thin; */
}

code {
    font-family: 'M PLUS 1 Code', monospace;
    color: var(--color-red);
}

ul > li > ul {
    margin-left: 1rem;
}

ol > li > ol {
    margin-left: 1rem;
}

ul > li > ol {
    margin-left: 1rem;
}

ol > li > ul {
    margin-left: 1rem;
}

main {
    margin: auto;
    max-width: 50%;
}

footer {
    margin-top: 6rem;
    font-size: smaller;
}

.tag {
    margin-right: 0.5rem;
}

#blog-title {
    width: fit-content;
    float: left;
    line-height: 1;
}

#blog-title a {
    color: var(--color-black);
}

#blog-title a:hover {
    text-decoration: none;
}

#post-header {
    border-bottom: thin solid var(--color-gray);
    padding-bottom: 0.5rem;
}

.post-meta {
    color: var(--color-gray);
}

.post-meta a {
    color: var(--color-gray);
}

.post-content {
    margin-top: 1rem;
}

.post-content p {
    margin: 0.5rem 0;
}

.post-content img {
    object-fit: scale-down;
    max-width: 75%;
    max-height: 75vh;
    margin: 1rem auto;
    display: block;
}

.post-content lite-youtube {
    max-width: 75%;
    margin: 1rem auto;
    display: block;
}

.post-content ul {
    list-style: square inside;
}

.post-content ol {
    list-style: decimal inside;
}

.page-post {
    padding: 1rem 0;
    border-bottom: thin solid var(--color-gray);
}

.page-post-meta {
    margin-bottom: 1rem;
}

.page-post-meta h2 {
    margin-top: 0;
}

.page-post-meta h2 a {
    color: var(--color-black);
}

.page-post-meta p {
    color: var(--color-gray);
}

.page-post-meta p a {
    color: var(--color-gray);
}

.page-post-content {
    max-height: 30vh;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-move {
    color: var(--color-gray);
    margin: 1rem 0;
    text-align: center;
}



@media screen and (max-width: 768px) {
    body {
        padding: 1rem;
    }

    main {
        margin: auto;
        max-width: 95%;
    }

    #blog-title {
        float: none;
    }

    #blog-title h1 {
        margin-top: 0;
    }

    .post-content lite-youtube {
        max-width: 100%;
    }
}