/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
body {
    min-height: 100vh;
    line-height: 1.4;
}
img, picture, svg, canvas, video {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
input, button, textarea, select {
    font: inherit;
}
:root {
    --ff-base: -apple-ui, system-ui, sans-serif;
    --page-width: 44em;

    --ctp-mocha-rosewater: #f5e0dc;
	--ctp-mocha-flamingo: #f2cdcd;
	--ctp-mocha-pink: #f5c2e7;
	--ctp-mocha-mauve: #cba6f7;
	--ctp-mocha-red: #f38ba8;
	--ctp-mocha-maroon: #eba0ac;
	--ctp-mocha-peach: #fab387;
    --ctp-mocha-yellow: #f9e2af;
	--ctp-mocha-green: #a6e3a1;
	--ctp-mocha-teal: #94e2d5;
	--ctp-mocha-sky: #89dceb;
	--ctp-mocha-sapphire: #74c7ec;
	--ctp-mocha-blue: #89b4fa;
	--ctp-mocha-lavender: #b4befe;
    --ctp-mocha-text: #cdd6f4;
    --ctp-mocha-subtext1: #bac2de;
    --ctp-mocha-subtext0: #a6adc8;
    --ctp-mocha-overlay2: #9399b2;
    --ctp-mocha-overlay1: #7f849c;
    --ctp-mocha-overlay0: #6c7086;
    --ctp-mocha-surface2: #585b70;
    --ctp-mocha-surface1: #45475a;
    --ctp-mocha-surface0: #313244;
    --ctp-mocha-base: #1e1e2e;
    --ctp-mocha-mantle: #181825;
    --ctp-mocha-crust: #11111b;
}

/* Site Rules */
::selection {
    background-color: var(--ctp-mocha-lavender);
    color: var(--ctp-mocha-crust);
}
body {
    font-family: var(--ff-base);
    background: var(--ctp-mocha-base);
    color: var(--ctp-mocha-text);
    font-size: 1.1em;
    margin: 0 auto;
}
a {
    text-decoration: none;
    color: var(--ctp-mocha-blue);
    transition: color 0.5s;
}
a:hover {
    text-decoration-color: var(--ctp-mocha-lavender);
}
ol, ul {
    padding-left: 1.5em;
    line-height: 1.75;
}
p, ol, ul, figure {
    margin: 0.75em 0;
}

/* Header */
.site-nav {
    max-width: var(--page-width);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 0.5em;
    justify-content: start;
    align-items: start;
    padding: 1.5em;
    padding-bottom: 0;
    margin: 0 auto;
}
.site-title a {
    color: transparent;
    transition: text-shadow 0.25s, color 0.25s;
    transition-timing-function: ease-out;
}
.site-menu {
    padding: 0;
    margin: 0;
    font-size: 120%;
    font-weight: 600;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1em;
    align-items: center;
    width: fit-content;
}
.site-menu a {
    color: var(--ctp-mocha-text);
    transition: text-shadow 0.25s, color 0.25s;
    transition-timing-function: ease-out;
}
.site-menu a:hover, .site-title a:hover {
    text-shadow: 0 0 20px var(--ctp-mocha-text);
    color: var(--ctp-mocha-text);
    text-decoration: none;
}

/* Main */
@keyframes text-appears {
    from {opacity: 0;}
    to {opacity: 1;}
}
main {
    animation: text-appears 0.5s;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 1.5em;
    min-height: 86vh;
}

/* Footer */
footer {
    background-color: var(--ctp-mocha-mantle);
}
.site-footer {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 1.5em;
}
.cc0-notice {
    margin-bottom: 1em;
    font-size: 90%;
    text-align: center;
}
.cc0-notice img {
    margin: 0;
    max-height: 1.5em;
    display: inline;
    vertical-align: text-top;
}
.social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1em;
    row-gap: 1em;
    align-items: center;
    justify-content: center;
}
.single-social-link {
    margin: 0;
    max-height: 1.25em;
    display: inline;
}
.taycat-gradient-bar {
    background: linear-gradient(90deg, var(--ctp-mocha-sky), var(--ctp-mocha-mauve));
    height: 5px;
}

/* Section Pagination */
.list-pagination {
    margin: 0.5em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.5em;
    font-weight: 700;
}
.pagination-icons img {
    height: 1.25em;
}
.page-number {
    font-size: 1.25em;
}

/* Single Navigation */
.single-navigation {
    display: flex;
    justify-content: center;
    margin: 0.75em 0;
    column-gap: 1.5em;
    font-weight: 600;
}

/* tayimg shortcode */
figcaption {
    color: var(--ctp-mocha-subtext0);
    font-size: 95%;
    text-align: center;
    margin: 0.25em auto;
    max-width: 32em;
}

/* Artwork Page */
.art-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}
.single-art-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.single-art-title {
    text-align: center;
    font-weight: 700;
    font-size: 150;
}
.page-art-date {
    font-weight: 700;
    font-size: 120%;
}

/* Entries Page */
.entries-container {
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
}
.single-entry h2 {
    font-size: 1.35em;
}
.single-entry h2 a {
    color: var(--ctp-mocha-text);
    transition: color 0.5s;
}
.single-entry a:hover {
    color: var(--ctp-mocha-mauve);
}
.single-entry p:first-of-type {
    margin-top: 0;
}

/* Questions Page */
form {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
}
textarea {
    resize: none;
    overflow: auto;
    width: 100%;
    height: 8em;
    margin: auto;
    background-color: var(--ctp-mocha-crust);
    border: 1px solid var(--ctp-mocha-crust);
    border-radius: 6px;
    padding: 0.25em;
    color: var(--ctp-mocha-text);
}
textarea:focus {
    outline: none;
    border: 1px solid var(--ctp-mocha-lavender);
}
button {
    padding: 0.25em 0.5em;
    background-color: var(--ctp-mocha-crust);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    margin: 0.5em auto;
    font-weight: 700;
    font-size: 1.1em;
}
button:hover {
    background-color: var(--ctp-mocha-surface0);
}
.questions-container {
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
}
.single-question time {
    font-size: 92.5%;
    font-weight: 700;
    color: var(--ctp-mocha-subtext0);
    transition: color 0.25s;
}
.single-question time:hover {
    color:var(--ctp-mocha-subtext1);
}
.single-page-time:hover {
    color:var(--ctp-mocha-subtext0);
}
.single-question p:first-of-type {
    margin-top: 0;
}
.single-question h2 {
    font-size: 1.35em;
}

/* Different Screen Resolutions */

@media screen and (min-width: 646px) {
    .site-nav {
        flex-direction: row;
        justify-content: space-between;
    }
    main {
        min-height: 89svh;
    }
}
@media screen and (max-width: 750px) {
    .art-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 570px) {
    .art-container {
        grid-template-columns: 1fr;
    }
}