@import url(font/gen-jyuu-gothicx.css);

html {
    --bg-color: #f2e5bc;
    --bg-color2: #d5c4a1;
    --fg-color: #3c3836;
    --fg-color0: #282828;
    --fg-color2: #504945;
}

hr.inu {
    height: 24px;
    color: var(--bg-color2);
    background-image: url("inu-light.svg");
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    width: 100%;
    position: absolute;
    left: 0;
    box-sizing: border-box;
    color: transparent;
    border-color: transparent;
}

hr.inu:first-child {
    top: 12px;
}

#avatar {
	display: inline;
	height: 2em;
	width: 2em;
	border-radius: 10%;
}

@media (prefers-color-scheme: dark) {
    html {
        --bg-color: #32302f;
        --bg-color2: #504945;
        --fg-color: #ebdbb2;
        --fg-color0: #fbf1c7;
        --fg-color2: #d5c4a1;
    }

    inu {
        background-image: url("inu-dark.svg");
    }
}
a:link {
    color: #d65d0e;
}

a:visited {
    color: #b16286;
}

body {
    max-width: 800px;
    padding: 25px;
    width: 100%;
    margin: 0 auto;
    font-family: Gen Jyuu GothicX, sans-serif;
    background-color: var(--bg-color);
    color: var(--fg-color);
    box-sizing: border-box;
}

h1, h2 {
    color: var(--fg-color0);
    width: 100%;
}

h1::after, h2::after {
    content: '';
    display: block;
    width: 75%;
    height: 2px;
    background: linear-gradient(90deg, #b90000, #fffd00);
}

h2::after {
    width: 50%;
}

pre {
    max-width: 700px;
    margin: 10px auto;
    background: var(--fg-color);
    color: var(--bg-color);
    border-radius: 10px;
    padding: 10px;
    overflow: auto;
}

#omemo {
    text-align: center;
}

.comment, a.comment:link, a.comment:visited {
    color: #98971a;
    text-decoration: none;
}
a.comment:hover, a.comment:active {
    text-decoration: underline;
}

a.fediring {
    display: block;
    color: var(--fg-color2);
    text-decoration: none;
    float: left;
}

#fediring-prev {
    width: 40%;
    text-align: left;
}
#fediring-link {
    width: 20%;
    text-align: center;
}
#fediring-next {
    width: 40%;
    text-align: right;
}

#footer, footer {
    margin-top: 50px;
    border-top: 2px solid var(--bg-color2);
    padding: 10px;
}

.button {
    image-rendering: pixelated;
}