:root {
    --white: #fefbf7;
    --green: #546846;
}

* {
    padding: 0;
    scrollbar-color: var(--green) var(--white);
}

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

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

.skip-to-content {
    position: absolute;
    transform: translateY(-100%);
    opacity: 0;
}

.skip-to-content:focus {
    transform: translateY(0%);
    opacity: 1;
}

.strikethrough {
    text-decoration: underline var(--green) .08em;
    text-underline-offset: -.25em;
    text-decoration-skip-ink: none;
}

hr {
    color: var(--green);
    margin: 0.5em;
    border-top: double var(--green);
}

body {
    min-height: 100vh;

    background: #fefbf7 url(/image-files/backgrounds/bg3-alt.png);
    background-attachment: fixed;
    color: var(--green);
    font-family: MS PGothic;
}

header {
    background: var(--green);
    color: var(--white);

    min-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    background: var(--green);
    color: var(--white);
    
    margin-top: 3vh;

    min-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

main {
    display: flex;
    gap: 20px;
    margin: 3vh 2vw 0 2vw;
    width: 1300px;
    margin: 2em auto 0 auto;
}

.leftside {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#navigation-box {
    max-height: 30em;
    min-height: 23em;
    min-width: 288px;
}

#nav-content {
    max-height: 33em;
    overflow: hidden scroll;
    padding: 0.6lh 2ch 0lh 2ch;
    margin-bottom: 0.5lh;
    display: flex;
    flex-direction: column;
    gap: 1lh;
}

details:first-of-type summary::marker, :is(::-webkit-details-marker) {
    content: "⤵ ";
}

details[open]:first-of-type summary::marker {
    content: "⤴ ";
}

li::marker {
    content: "♡︎ ";
}

ol li::marker {
    content: initial;
}

summary:focus {
    background-color: var(--green);
    color: var(--white)
}

a {
    position: relative;
    color: #546846;
    transition: color .3s ease-in-out;
    z-index: 0;
    &:after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 0;
        background-color: #546846;
        transition: width .3s ease-in-out;
        z-index: -1;
    }
    &:hover, &:focus {
        color: white;
    }
    &:hover:after, &:focus:after {
        width: 100%;
    }
}

#left-width {
    min-width: 280px;
    max-width: 280px;
}

.yumeoi-name {
    writing-mode: vertical-rl;
    margin-top: 0.8em;
    font: 1.2em MS PGothic;
}

.letter {
    text-combine-upright: all;
}

#to-do ol {
    padding: 0 1em 1em 1em;
}

#to-do div {
    height: min-content;
}

.empty-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    min-width: 230px;
}

#panels {
    display: flex;
    flex-direction: column;
    gap: 1em;
    image-rendering: optimizeSpeed;
}

ul, ol {
    margin-left: 1em;
}

.header { 
    display: flex;
    justify-content: space-between;
}

.header span {
    background: linear-gradient(180deg,rgba(254, 251, 247, 0) 0%, rgba(254, 251, 247, 1) 50%);
    margin-left: 3ch;
    position: relative;
    bottom: 2px;
}

#content { 
    padding: 0.6lh 0.6ch 1lh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1lh;
    height: 18lh;
    overflow-y: scroll;
    margin: auto 0 0.55lh 0.34em;
    text-align: center;
}

#png-gallery, #item-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#png-gallery img, #item-gallery img, #pattern-gallery img {
    height: 200px;
}

#png-gallery a:nth-child(odd), #item-gallery a:nth-child(odd) {
    transition: transform 0.5s;
}

#png-gallery a:nth-child(even), #item-gallery a:nth-child(even) {
    transition: transform 0.5s;
}

#png-gallery a:hover:nth-child(odd), #item-gallery a:hover:nth-child(odd) {
    transform: scale(1.05) rotate(-2deg);
}

#png-gallery a:hover:nth-child(even), #item-gallery a:hover:nth-child(even) {
    transform: scale(1.05) rotate(2deg);
}

#pattern-gallery img {
    transition: transform 0.5s;
}

#pattern-gallery img:hover {
    transform: scale(0.96);
    filter: blur(0.6px);
}

#png-gallery a, #item-gallery a, #pattern-gallery a {
    transition: initial;
    &:after {
        background-color: #ffffff00;
        transition: initial;
    }
    &:hover {
        color: #ffffff00;
    }
    &:focus {
        color: #ffffff00;
    }
}

#divider-text {
    color: var(--green);
    background-color: var(--white);
    border: 2px solid var(--green);
    box-shadow: 6px 6px;

    width: min-content;
    padding: 5px;
    align-self: center;
}

#movies { 
    padding: 0.6lh 0.6ch 1lh 0;
    margin: auto 0 0.55lh 0.34em;
}

.img-borders {
    border: 6px double var(--green);
}

#s-m-t-tooltip {
    z-index: 938458935;
    background: var(--white);
    color: var(--green);
    font-size: 1em;
    line-height: 140%;
    text-align: center;
    border: 2px solid var(--green);
    max-width: 7rem;
    word-wrap: normal;
    padding: 5px;
    display: block;
    margin: 1.4em;
}

#book-gallery {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.book {
    display: flex;
    gap: 3ch;
    align-items: center;
}

.card {
    width: 100%;
    max-width: 30em;
    box-shadow: 2px 2px 5px 0px rgba(95, 95, 95, 0.1);
    background-color: #fffaeb;
    color: black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    text-align: left;
    font-size: 0.7em;
    align-items: start;
}
    
.card-details {
    text-align: center;
    font-size: 1rem;
    font-family: 'Special Elite';
}

.card-details-pre {
    font-size: 1rem;
    font-family: 'Special Elite';
}

.card-details-small {
    font-family: 'Special Elite';
    font-size: 0.8rem;
    padding: 10px 0 0 10px;
}

.template {
    color: #2e477e;
}

.full-row {
    grid-column: span 2;
    border-bottom: 2px solid #2e477e;
    padding: 5px;
    font-weight: bold;
    min-height: 45px;
}

.full-row:first-child {
    border-bottom: none;
    padding: 0;
}

.full-row:nth-child(n+2):nth-child(-n+2) {
    min-height: initial;
}

.full-row:nth-child(n+4):nth-child(-n+4) {
    border-bottom: 4px double #2e477e;
}

.section {
    display: contents;
    font-weight: bold;
    text-align: center;
}

.section div {
    border-bottom: 2px solid #2e477e;
    border-right: 2px solid #2e477e;
    padding: 2px;
}

.section div:last-child {
    border-right: none;
}

.rows {
    display: contents;
}

.cell {
    border-bottom: 2px solid #2e477e;
    border-right: 2px solid #2e477e;
    padding: 20px;
    min-height: 40px;
}

.cell:nth-child(2n) {
    border-right: none;
}

.cell:last-child, .cell:nth-child(n + 3) {
    border-bottom: initial;
}

@media (max-width: 500px) {
    .card {
        grid-template-columns: 1fr;
    }

    .full-row {
        grid-column: 1;
    }

    .section div {
        border-right: none;
    }

    .cell {
        border-right: none;
    }
}

.scroll-container {
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
    max-width: 40em;
}

.scroll-container img {  
    border: solid;
    border-width: 20px 10px;
    border-image: url(film.png) 81 16 81 16 / 20px 10px / 0px stretch;
    filter:grayscale(50%);
    margin: -2.6px;
}

@media only screen and (max-width: 1200px) {

    main {
        flex-direction: column;
        justify-content: initial;
        width: initial;
        margin: 2em 10px 0 10px;
    }

    .leftside {
        display: flex;
        flex-direction: initial;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    #navigation-box {
        max-height: 25em;
        min-height: 25em;
        min-width: 288px;
    }

    #nav-content {
        max-height: 23em;
        overflow: hidden scroll;
        text-align: center;
        align-items: center;
    }

    li {
        list-style-position: outside;
    }

    .yumeoi-name {
        writing-mode: initial;
        text-align: center;
        margin-top: initial;
        margin-bottom: -2.5em;
    }

    .letter {
        text-combine-upright: none;
    }

    .empty-sec {
        align-self: center;
    }
    
    #content {
        max-height: 18lh;
    }

    .book {
        flex-direction: column;
    }

    .scroll-container {
        max-width: 24em;
    }

}

@media (prefers-reduced-motion: reduce) {
    a {
        transition: initial;
    }

    #png-gallery a:nth-child(odd), #item-gallery a:nth-child(odd) {
        transition: initial;
    }

    #png-gallery a:nth-child(even), #item-gallery a:nth-child(even) {
        transition: initial;
    }

    #png-gallery a:hover:nth-child(odd), #item-gallery a:hover:nth-child(odd) {
        transform: initial;
    }

    #png-gallery a:hover:nth-child(even), #item-gallery a:hover:nth-child(even) {
        transform: initial;
    }

    #pattern-gallery img {
        transition: initial;
    }

    #pattern-gallery img:hover {
        transform: initial;
        filter: initial;
    }

}

@media (prefers-color-scheme: dark) {

* {
    padding: 0;
    scrollbar-color: var(--white) var(--green);
}

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

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

.strikethrough {
    text-decoration: underline var(--white) .08em;
}

hr {
    color: var(--white);
    border-top: double var(--white);
}

body {
    background: #3e4936 url(/image-files/backgrounds/bg3-alt.png);
    color: var(--white);
}

header {
    background: var(--white);
    color: var(--green);
}

footer {
    background: var(--white);
    color: var(--green);
}

summary:focus {
    background-color: var(--white);
    color: var(--green)
}

a {
    position: relative;
    color: #fefbf7;
    transition: color .3s ease-in-out;
    z-index: 0;
    &:after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 0;
        background-color: #fefbf7;
        transition: width .3s ease-in-out;
        z-index: -1;
    }
    &:hover, &:focus {
        color: var(--green);
    }
    &:hover:after, &:focus:after {
        width: 100%;
    }
}

.header span {
    background: linear-gradient(180deg,rgba(84, 104, 70, 0) 0%, rgba(84, 104, 70, 1) 50%);
}

#divider-text {
    color: var(--white);
    background-color: var(--green);
    border: 2px solid var(--white);
    box-shadow: 6px 6px;
}

.img-borders {
    border: 6px double var(--white);
}

#s-m-t-tooltip {
    background: var(--green);
    color: var(--white);
    border: 2px solid var(--white);
}

.card {
    box-shadow: 2px 2px 5px 0px rgba(231, 231, 231, 0.315);
    background-color: #fffaeb;
    color: black;
}

.template {
    color: #2e477e;
}

.full-row {
    grid-column: span 2;
    border-bottom: 2px solid #2e477e;
    padding: 5px;
    font-weight: bold;
    min-height: 45px;
}

.full-row:nth-child(n+4):nth-child(-n+4) {
    border-bottom: 4px double #2e477e;
}

.section div {
    border-bottom: 2px solid #2e477e;
    border-right: 2px solid #2e477e;
    padding: 2px;
}

.cell {
    border-bottom: 2px solid #2e477e;
    border-right: 2px solid #2e477e;
    padding: 20px;
    min-height: 40px;
}

#png-gallery img, #item-gallery img {
    filter:drop-shadow(0px 0px 8px rgba(150, 148, 148, 0.281))
}

}