/* --- FONTS --- */

@font-face {
    font-family: 'SuisseIntl';
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
    src: url(https://res.hajimehoshi.com/fonts/SuisseIntl-Regular-WebXL.woff2) format('woff2');
}

@font-face {
    font-family: 'SuisseIntl';
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
    font-display: swap;
    src: url(https://res.hajimehoshi.com/fonts/SuisseIntl-SemiBold-WebXL.woff2) format('woff2');
}

@font-face {
    font-family: 'SuisseIntlCond';
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
    font-display: swap;
    src: url(https://res.hajimehoshi.com/fonts/SuisseIntlCond-Bold-WebXL.woff2) format('woff2');
}

@font-face {
    font-family: 'SuisseIntlMono';
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
    src: url(https://res.hajimehoshi.com/fonts/SuisseIntlMono-Regular-WebXL.woff2) format('woff2');
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    size-adjust: 95%;
    font-display: swap;
    src: url(https://fonts.bunny.net/noto-sans-jp/files/noto-sans-jp-japanese-400-normal.woff2) format('woff2')
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    size-adjust: 95%;
    font-display: swap;
    src: url(https://fonts.bunny.net/noto-sans-jp/files/noto-sans-jp-japanese-700-normal.woff2) format('woff2')
}

/* defines some custom layers */
@layer margin, size, font, font-size, text-decoration, color, border, grid, figure, dark-mode;

/* resets all margins and paddings to zero for all elements as a default */
@layer margin { 
    * {
        padding: 0;
        margin: 0;
    }
}

/* define variables for various sizes */
@layer size {
    :root {
        --unit-size: 24px;
        --column-size: calc(7 * var(--unit-size));
        --thick-border-width: 2px;
        --thin-border-width: 0.5px;
    }
    :root:has(input#dark-mode:checked) {
        --thick-border-width: 1.5px;
    }
}

/* define fonts for different elements */
@layer font {
    body {
        font-family: 'SuisseIntl', 'Helvetica Neue', 'Helvetica', 'Arial', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', 'Meiryo', sans-serif;
        letter-spacing: 0.02em;
    }
    h1 {
        font-family: 'SuisseIntl', 'Helvetica Neue', 'Helvetica', 'Arial', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', 'Meiryo', sans-serif-condensed, sans-serif;
        font-weight: bold;
        letter-spacing: 0;
    }
    section.title h1 {
        font-family: 'SuisseIntlCond', 'HelveticaNeue-CondensedBold', 'Helvetica Neue', 'Helvetica', 'Arial', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', 'Meiryo', sans-serif-condensed, sans-serif;
        font-weight: bold;
        letter-spacing: 0;
    }
    h2, h3, h4, dt {
        font-family: 'SuisseIntl', 'Helvetica Neue', 'Helvetica', 'Arial', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', 'Meiryo', sans-serif;
        font-weight: bold;
        letter-spacing: 0;
    }
    code {
        font-family: 'SuisseIntlMono', monospace;
        letter-spacing: -0.04em;
    }
}

/* define font sizes and line heights elements */
@layer font-size {
    body {
        font-size: calc(var(--unit-size) * 2 / 3);
        line-height: var(--unit-size);
    }
    h1 {
        font-size: calc(2 * var(--unit-size) * 2 / 3);
        line-height: calc(2 * var(--unit-size));
    }
    section.title h1 {
        font-size: calc(3 * var(--unit-size) * 2 / 3);
        line-height: calc(3 * var(--unit-size));
    }
    h2 {
        font-size: var(--unit-size);
        line-height: var(--unit-size);
    }
    h3 {
        font-size: calc(var(--unit-size) * 2 / 3);
        line-height: var(--unit-size);
    }
}

/* define anchor tag decoration */
@layer text-decoration {
    a {
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
    }
}

/* define button decoration */
#infinityButton {
    color: var(--foreground-color);
    background: none;
}

/* define core colors */
@layer color {
    :root {
        --color-white: #ffffff;
        --color-black: #101010;
        --background-color: color-mix(in oklab, var(--color-black) 0%, var(--color-white));
        --foreground-color: color-mix(in oklab, var(--color-black) 80%, var(--color-white));
        --thin-border-color: var(--foreground-color);
    }
    :root:has(input#dark-mode:checked) {
        --background-color: color-mix(in oklab, var(--color-black) 100%, var(--color-white));
        --foreground-color: color-mix(in oklab, var(--color-black) 20%, var(--color-white));
        --thin-border-color: color-mix(in oklab, var(--foreground-color), transparent 50%);
    }
    html {
        background-color: var(--background-color);
        transition: background-color 0.1s ease;
    }
    * {
        color: var(--foreground-color);
        transition: color 0.1s ease;
    }
}

/* define layout with flexbox for dynamic sizing and alignment */
@layer flex {
    body {
        display: flex;
    }
    main {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-items: center;
    }
    article {
        display: flex;
        flex-direction: column;
        width: calc(4 * var(--column-size) + 3 * var(--unit-size));
        max-width: calc(100vw - 2 * var(--unit-size) + 2 * var(--unit-size) / 6);
    }
}

/* define borders */
@layer border {
    article {
        border-top: var(--thick-border-width) solid var(--foreground-color);
        margin-top: calc((var(--unit-size) - var(--thick-border-width)) / 2 + var(--unit-size));
        padding-top: calc((var(--unit-size) - var(--thick-border-width)) / 2);
        border-bottom: var(--thick-border-width) solid var(--foreground-color);
        margin-bottom: calc((var(--unit-size) - var(--thick-border-width)) / 2 + var(--unit-size));
        padding-bottom: calc((var(--unit-size) - var(--thick-border-width)) / 2 + var(--unit-size));
    }
    h2 {
        border-bottom: var(--thin-border-width) solid var(--thin-border-color);
        margin-bottom: calc((var(--unit-size) - var(--thin-border-width)) / 2 - var(--unit-size)); /* This negative margin invalidates the gap of the grid of a section. */
        padding-bottom: calc((var(--unit-size) - var(--thin-border-width)) / 2);
    }
    section {
        border-top: var(--thick-border-width) solid var(--foreground-color);
        margin-top: calc((var(--unit-size) - var(--thick-border-width)) / 2 + var(--unit-size));
        padding-top: calc((var(--unit-size) - var(--thick-border-width)) / 2);
    }
    section:first-of-type {
        border-top-style: none;
        margin-top: 0;
        padding-top: 0;
    }
}

/* define section layout with grid for element alignment */
@layer grid {
    section {
        display: flex;
        flex-flow: row-reverse wrap;
        gap: var(--unit-size);
    }
    section > * {
        width: calc((100% - 3 * var(--unit-size)) / 4 * 3 + 2 * var(--unit-size));
    }
    section > h2, section > dl {
        width: 100%;
    }
    section > aside {
        width: var(--column-size);
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, calc((100% - 2 * var(--unit-size)) / 3));
        gap: var(--unit-size);
    }
    .grid-item-1 {
        grid-column: span 1;
    }
    .grid-item-2 {
        grid-column: span 2;
    }
    .grid-item-3 {
        grid-column: span 3;
    }
    h2 {
        padding-left: calc((100% - 3 * var(--unit-size)) / 4 + var(--unit-size))
    }
    dl {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    dt {
        width: var(--column-size);
        padding-right: var(--unit-size);
        text-align: right;
    }
    dd {
        width: calc(100% - var(--column-size) - var(--unit-size));
    }
    dt, dd {
        padding-top: calc((var(--unit-size) / 3 - var(--thin-border-width)) / 2);
        border-top: var(--thin-border-width) solid var(--thin-border-color);
        margin-top: calc((var(--unit-size) / 3 - var(--thin-border-width)) / 2);
    }
    dt:first-of-type, dd:first-of-type {
        padding-top: 0;
        border-top-style: none;
        margin-top: 0;
    }

    /* dynamically resize content for screens of different sizes */
    @media only screen and (max-width: calc(4 * 168px + 5 * 24px)) {
        section > * {
            width: 100%;
        }
        section.title > header {
            width: calc((100% - 2 * var(--unit-size)) / 3 * 2 + var(--unit-size));
        }
        section > *:empty {
            display: none;
        }
        section {
            grid-template-columns: 1fr calc((100% - 2 * var(--unit-size)) / 3);
        }

        .grid-container {
            grid-template-columns: repeat(3, calc((100% - 2 * var(--unit-size)) / 3));
        }
        .grid-item-2 {
            grid-column: span 3;
        }
        h2 {
            padding-left: 0;
        }
        section > h2, .grid-container {
            padding-left: calc(var(--unit-size) / 6);
            padding-right: calc(var(--unit-size) / 6);
        }
        dt {
            width: calc((100% - 2 * var(--unit-size)) / 3);
        }
        dd {
            width: calc((100% - 2 * var(--unit-size)) / 3 * 2 + var(--unit-size));
        }
        ul {
            padding-left: var(--unit-size);
        }
    }

    @media only screen and (max-width: calc(3 * 168px + 4 * 24px)) {
        section.title > aside {
            width: 100%;
        }
        section.title > header {
            width: 100%;
        }
        .grid-container {
            grid-template-columns: repeat(2, calc((100% - var(--unit-size)) / 2));
        }
        .grid-item-2 {
            grid-column: span 2;
        }
        .grid-item-3 {
            grid-column: span 2;
        }
        section > header, dt, dd {
            padding-left: calc(var(--unit-size) / 6);
            padding-right: calc(var(--unit-size) / 6);
        }
        dt {
            width: 100%;
            text-align: left;
        }
        dd {
            width: 100%;
        }
        dd {
            padding-top: 0;
            border-top-style: none;
            margin-top: 0;
        }
    }

    @media only screen and (max-width: calc(2 * 168px + 3 * 24px)) {
        .grid-container {
            grid-template-columns: 100%;
        }
        .grid-item-2 {
            grid-column: span 1;
        }
        .grid-item-3 {
            grid-column: span 1;
        }
    }
}

/* defines figures */
@layer figure {
    figure {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
    }
    figure:only-child {
        height: 100%;
    }
    figure * {
        vertical-align: middle;
    }
}

/* defines styles when toggling dark mode */
@layer dark-mode {
    input#dark-mode {
        display: none;
    }
    input#dark-mode ~ label {
        display: inline-block;
        position: absolute;
        top: calc((var(--unit-size) - var(--thick-border-width)) / 4); /* Put the image in the middle of the article top. */
        right: max(calc((100vw - 4 * var(--column-size) - 3 * var(--unit-size) ) / 2), var(--unit-size));
    }
    input#dark-mode ~ label#dark-mode-light {
        display: none;
    }
    input#dark-mode:checked ~ label#dark-mode-light {
        display: inline-block;
    }
    input#dark-mode:checked ~ label#dark-mode-dark {
        display: none;
    }
    input#dark-mode ~ label {
        cursor: pointer;
    }
    input#dark-mode ~ label svg {
        width: var(--unit-size);
        height: var(--unit-size);
    }
    input#dark-mode ~ label svg path {
        fill: var(--foreground-color);
    }
}

footer {
    /* position: fixed; */
    bottom: 0px;
    margin-bottom: 25px;
}

#click-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.click-animation {
    position: absolute;
    font-size: 14px;
    color: #333;
    user-select: none;
    pointer-events: none;
    animation: clickFade 1s ease-out forwards;
}

@keyframes clickFade {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-20px);
    }
}

.author {
    font-style: italic;
}

.rating {
    font-weight: bold;
}

.isbn {
    font-style: italic;
}