@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    box-sizing: border-box;
}

:root {
    --font: "LXGW WenKai TC", monospace;
    --title-font-size-desktop: 32px;
    --h2-font-size-desktop: 28px;
    --h3-font-size-desktop: 24px;
    --h4-font-size-desktop: 22px;
    --p-font-size: 1.2rem;
}

body {
    font-family: var(--font);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

img {
    max-height: 500px;
    max-width: 100%;
}

.container {
    margin-bottom: 32px;
}

.container > h1 {
    font-size: var(--title-font-size-desktop);
    padding: 10px 0;
    margin: 10px 0;
    font-weight: 500;
}

strong {
    font-weight: 600;
}

h2, h3, h4 {
    padding: 10px 0;
    margin: 5px 0;
    font-weight: 500;
}

h2 {
    font-size: var(--h2-font-size-desktop);
}

h3 {
    font-size: var(--h3-font-size-desktop);
}

h4 {
    padding: 5px 0;
    margin: 5px 0;
    font-size: var(--h4-font-size-desktop);
}

p {
    font-size: var(--p-font-size);
    padding: 10px 0;
}

pre {
    margin: 10px 0;
}

.article > a {
    font-size: var(--p-font-size);
}

.container a,
.container a:visited {
    color: #e62727;
    text-decoration: none;
}

blockquote {
    color: #777;
    padding: 0px 15px;
    margin: 10px 0;
    border-left: 4px solid #ddd;
}

code {
    color: black;
    background-color: oklch(94.8% 0.007 247.896);
}

ul, ol {
    margin: 10px 0;
}

li {
    font-size: 18px;
    margin-left: 28px;
}

.container {
    display: flex;
    width: 60vw;
    justify-content: center;
    flex-direction: column;
    font-size: 1.1rem;
}

@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 85vw;
    }
}

@media (max-width: 767px) {
    .container {
        width: 90vw;
    }

    p, li {
        font-size: 1.1rem;
    }
}