.header-title {
    p:first-of-type {
        color: var(--happy);
        font-weight: 900;
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3);
        font-style: italic;
    }

    p:last-of-type {
        font-style: italic;
        font-size: var(--font-size-regular);
        line-height: var(--line-height-regular);
        opacity: .5;
    }
}

body {
    color: white;

    .main-container {
        padding: var(--default-pad);
    }

    main {
        max-width: 1000px;
        margin: 0px auto;
        background-color: white;
        border-radius: var(--normal-radius);
        color: var(--black);
        padding: var(--default-pad) 0 0 0;

        > section {
            padding: var(--default-pad) var(--double-pad) var(--default-pad) var(--double-pad);
            h2:first-of-type, h3:first-of-type, h4:first-of-type {
              margin-top: 0;
            }
        }

        .grid-1-1 {
            display: grid;
            gap: var(--default-pad);
            grid-template-columns: var(--grid-1-1-columns);
        }

        .grid-1-2 {
            display: grid;
            gap: var(--default-pad);
            grid-template-columns: var(--grid-1-2-columns);
        }

        .grid-2-1 {
            display: grid;
            gap: var(--default-pad);
            grid-template-columns: var(--grid-2-1-columns);
        }

        .grid-5-7 {
            display: grid;
            gap: var(--default-pad);
            grid-template-columns: var(--grid-5-7-columns);
        }

        .grid-7-5 {
            display: grid;
            gap: var(--default-pad);
            grid-template-columns: var(--grid-7-5-columns);
        }

        .grid-2-3 {
            display: grid;
            gap: var(--default-pad);
            grid-template-columns: var(--grid-2-3-columns);
        }

        > section.gtk {
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
                li {
                    border-left: 3px var(--chill) solid;
                    padding-left: 20px;
                    margin-bottom: var(--line-height-regular);
                    -webkit-column-break-inside: avoid;
                    page-break-inside: avoid;
                    break-inside: avoid;
                }
            }
            .no-image {
                ul {
                    columns: min(var(--max-columns), 2);
                }
            }
        }

        > section.features {
            background: var(--mild);

            img {
                width: 80px;
                height: auto;
                border-radius: 4px;
            }

            h4 {
                margin: 0;
                line-height: var(--line-height-regular);
                font-size: var(--font-size-regular);
            }
            h5 {
                margin: 0;
                color: var(--grey);
                font-style: italic;
                font-weight: 400;
                font-size: var(--font-size-regular);
                line-height: var(--line-height-regular);
            }
            .characters-and-audio {
                display: flex;
                flex-direction: column;
                gap: var(--default-pad);
            }
            .characters {
                h3 {
                    margin: 0;
                    color: var(--chill);
                    font-style: italic;
                    font-weight: 500;
                    font-size: var(--font-size-big);
                    line-height: var(--line-height-big);
                }
                > div {
                    display: flex;
                    > div {
                        margin-left: var(--half-pad);
                    }
                }
                ul {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: var(--half-pad);
                    list-style: none;
                    padding: var(--half-pad) 0 0 0;
                    margin: 0;
                }
                li {
                    background-color: var(--character);
                    border-radius: var(--small-radius);
                    padding: 6px 12px;
                    p {
                        margin: 0;
                    }
                }
            }

            .similar {
                > div {
                    display: flex;
                    flex-direction: column;
                    gap: var(--default-pad);

                    a, > div {
                        display: block;
                        box-shadow: var(--shadow);
                        border-radius: var(--normal-radius);
                        padding: var(--default-pad);
                        background-color: white;

                        > div {
                            display: flex;
                            > div:not(:first-child) {
                                margin-left: var(--half-pad);
                            }
                            margin: 0 0 var(--half-pad) 0;
                        }
                    }

                    a:hover {
                        box-shadow: var(--shadow-hover);
                    }
                }

            }
        }

        > section.sources {
            display: block;
            background: var(--mild);
            border-radius: 0 0 var(--normal-radius) var(--normal-radius);
            > div {
                columns: var(--sources-columns);
                column-fill: balance;
                p {
                    -webkit-column-break-inside: avoid;
                    page-break-inside: avoid;
                    break-inside: avoid;
                    overflow-wrap: break-word;
                    margin-top: 0;

                    a {
                        color: var(--relax);
                        text-decoration: underline;
                    }
                }
                p:target {
                    background: var(--white);
                }
            }
        }
    }
}

.portrait-img {
    display: flex;
    flex-direction: column;
    margin: 0;

    a {
        font-size: var(--font-size-super-small);
        line-height: var(--line-height-super-small);

        color: var(--grey);
        > span {
            font-size: var(--font-size-small);
            line-height: var(--line-height-small);
            color: var(--black);
        }
    }

    img {
        border-radius: 4px;
        max-width: 100%;
        height: auto;
        margin-bottom: 0;
    }
}