.content 
{
    grid-area: content; display: flex; flex-direction: column; padding: 1rem; opacity: 1;
    scrollbar-width: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    article
    {
        filter: drop-shadow(0 4px 8px var(--shadow5));
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        
        .pContainer
        {
            display: flex; flex-direction: column-reverse; margin-bottom: 1.5rem; white-space: pre-wrap;
            background-color: var(--background-dark);

            .pLabel
            {
                padding: .5rem; margin: 0;
                background-color: var(--primary);
                color: var(--text);
                text-shadow: 0px 4px 8px var(--shadow5);
                filter: drop-shadow(0 4px 8px var(--shadow5));
            }
        }
        p
        {
            padding: 1rem;
            padding-left: 3rem;
            padding-right: 3rem;

            img
            {
                display: block; object-fit: contain;
                height: auto; max-width: 75%; margin: 1rem auto; margin-bottom: 0; border-radius: 4px;
                filter: drop-shadow(0 4px 8px var(--shadow5));
            }
        }
        .pContainer-home
        {
            flex-direction: column; white-space: normal;
        }
    }
    .browser
    {
        .wrapper
        {
            display: grid; gap: .5rem; padding: 1rem; margin: 1rem; 
            min-height: 0; 
            max-height: 50vh;
            background-color: var(--background-dark);
            grid-template-columns: 2fr 2fr 1fr 3fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-areas: 
                "cover title title syno"
                "cover maker maker syno"
                "cover rating notes syno"
                "cover release release syno"
                "cover start start syno"
                "cover end end syno";
            filter: drop-shadow(0 4px 8px var(--shadow5));

            .object
            {
                display: flex; 
                flex-direction: row;
                flex-grow: 1;
                width: 100%;
                min-height: 0;

                .head
                {
                    display: flex; 
                    padding: .5rem;
                    background-color: var(--primary-bright);
                    align-items: center; text-align: center; justify-content: center;
                    flex: 0 0 10rem; 
                    box-sizing: border-box;
                }
                .body
                {
                    display: flex; 
                    flex-grow: 1; 
                    padding: .5rem;
                    background-color: var(--background-darker);
                    align-items: center; text-align: center; justify-content: center;
                    flex: 1;
                    min-width: 0;
                }
            }
            .cover
            {
                grid-area: cover;
                cursor: default;
            }
            .cover[id]
            {
                cursor: pointer;
            }
            .title
            {
                grid-area: title;
                display: flex;
                background-color: var(--primary);
                align-items: center; text-align: center; justify-content: center;
                filter: drop-shadow(0 4px 8px var(--shadow5));
            }
            .title.nsfw
            {
                background-color: var(--red);
            }
            .watch
            {
                grid-column: 2 / 4;
                grid-row: 4 / 7;
                display: grid;
                grid-template-columns: subgrid;
                grid-template-rows: subgrid;
                filter: drop-shadow(0 4px 8px var(--shadow5));

                .release 
                { 
                    grid-area: release; 
                }
                .start   
                { 
                    grid-area: start; 
                }
                .end     
                { 
                    grid-area: end; 
                }
            }
            .data
            {
                grid-column: 2 / 4;
                grid-row: 2 / 4;
                display: grid;
                grid-template-columns: subgrid;
                grid-template-rows: subgrid;
                filter: drop-shadow(0 4px 8px var(--shadow5));
                min-height: 0;

                .maker
                {
                    grid-area: maker;
                    display: flex;
                    flex-direction: row;
                    min-height: 0;

                    .head
                    {
                        flex: 0 0 10rem;
                    }

                    .body
                    {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        
                        flex: 1;
                        min-width: 0;
                        box-sizing: border-box;
                        overflow-y: auto;
                        scrollbar-width: none;
                        &::-webkit-scrollbar { display: none; }

                        text-align: center;
                        align-items: center;
                        padding: 0 0.5rem;

                        -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
                        mask-image: linear-gradient(to bottom, black 85%, transparent 100%);

                        span, p
                        {
                            display: block;
                            width: 100%;
                            padding-top: 0.5rem;
                            padding-bottom: 0.5rem;
                            flex-shrink: 0;
                        }

                        &::before
                        {
                            content: "";
                            display: block;
                            margin-top: auto; 
                        }
                        
                        &::after
                        {
                            content: "";
                            display: block;
                            margin-bottom: auto;
                        }
                    }
                }
                .rating
                {
                    grid-area: rating;

                    .head
                    {
                        flex: 0 0 10rem;
                    }
                }
                .note
                {
                    grid-area: note;
                    display: flex; padding: .5rem;
                    align-items: center; text-align: center; justify-content: center;
                }
                .note.true
                {
                    background-color: var(--green);
                }
                .note.false
                {
                    background-color: var(--red);
                }
            }
            .synopsis
            {
                grid-area: syno;
                display: flex; flex-direction: column; height: 100%;
                min-height: 0;
                filter: drop-shadow(0 4px 8px var(--shadow5));

                .head
                {
                    background-color: var(--primary);
                    filter: drop-shadow(0 4px 8px var(--shadow2));
                    
                    flex: 0 0 auto; 
                    padding: 0.5rem 1rem;
                    box-sizing: border-box;
                    
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }
                .body
                {
                    display: block; 
                    flex: 1 1 auto;
                    min-height: 0;
                    
                    padding: 1rem; 
                    padding-bottom: 2rem;
                    overflow-y: auto; 
                    scrollbar-width: none;
                    text-align: left; 
                    align-items: normal; 
                    justify-content: normal;
                    
                    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
                    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);

                    p
                    {
                        padding: 0;
                        margin: 0;

                        &:not(:last-child)
                        {
                            margin-bottom: 1rem;
                        }
                    }
                }
            }
        }
    }

    .relContainer
    {
        display: flex; flex-direction: column;

        .relObj
        {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;

            .child
            {
                display: grid; grid-template-rows: 1fr 4fr; margin: .5rem 1rem; min-height: 10rem;
                background-color: var(--background-dark);
                filter: drop-shadow(0 4px 8px var(--shadow5));

                .relation
                {
                    display: flex; position: relative;
                    background-color: var(--primary-bright);
                    text-shadow: 0px 2px 4px var(--shadow5);
                    justify-content: center; align-items: center;
                    filter: drop-shadow(0 4px 8px var(--shadow5));
                }
                .title
                {
                    display: flex; padding: .5rem;
                    align-items: center; text-align: center; justify-content: center;
                }
            }
        }
    }
}
.content.hide
{
    opacity: 0;
}

@media (width >= 1800px) 
{
    .content
    {
        overflow-y: auto; overflow-x: hidden;
        &::-webkit-scrollbar {display: none;}
        scrollbar-width: none;

        margin-left: -10rem;
        margin-right: -10rem;

        padding-left: 11rem;
        padding-right: 11rem;
        box-sizing: border-box;

        .browser
        {
            grid-template-columns: 1fr 3.5fr 1fr; grid-template-rows: .5fr 10fr; gap: 0; min-height: 100vh;
            grid-template-areas:
            "header         header  header"
            "leftSidebar    content rightSidebar";

            .wrapper
            {
                max-height: 20vh;
                grid-template-columns: 1fr 3fr 3fr; 
                grid-template-rows: .5fr 1fr 1fr;
                grid-template-areas: 
                    "cover title syno"
                    "cover data  syno"
                    "cover watch syno";

                .object
                {
                    flex-direction: column;

                    .head
                    {
                        flex: none;
                        width: 100%;
                    }
                    .body
                    {
                        flex: 1;
                        width: 100%;
                    }
                }
                .data
                {
                    grid-area: data;
                    display: flex; 
                    flex-direction: row;
                    grid-column: auto;
                    
                    grid-row: 2 / 3; 
                    order: 2;
                    
                    grid-template-columns: none;
                    grid-template-rows: none;

                    .maker
                    {
                        flex-direction: column;
                        flex: 2;

                        .head
                        {
                            flex: none;
                            width: 100%;
                        }
                    }
                    
                    .rating
                    {
                        flex: 1;
                        justify-content: center;
                        text-align: center;
                        vertical-align: center;

                        .head 
                        {
                            flex: none;
                            width: 100%;
                        }
                        .body 
                        {
                            flex: 1;
                            width: 100%;
                        }
                    }
                    
                    .note
                    {
                        flex: 1;
                    }
                }
                .watch
                {
                    grid-area: watch;
                    display: flex; 
                    flex-direction: row;
                    grid-column: auto;
                    
                    grid-row: 3 / 4; 
                    order: 3;
                    
                    grid-template-columns: none;
                    grid-template-rows: none;
                }
            }
        }
    }
}