/* ================================FEED=========================================*/
/* ================================FEED=========================================*/
/* ================================FEED=========================================*/

body{
    overflow-Y:scroll;
}

main{
    overflow-Y:scroll;
    grid-template-rows:calc(var(--abs-innerH-b-nav) - var(--hd-H)) 3.7em fit-content var(--3b);
    height:fit-content;
    gap:0;


    & *{
        .art_intro{
            font-style:italic;
        }

        .art_desc{
            margin-top:1.3em;
        }
    }
    & #Showcase{
        position:relative;
        z-index:52;
        grid-column:1;
        grid-row:1;

        display:flex;
        justify-content:center;

        height:calc(var(--abs-innerH-b-nav) - var(--b));
        width:var(--innerW);
        overflow:hidden;
        &>div{
            margin:0;
            width:100%;
            display:flex;
            height:fit-content;
            justify-content: center;
        }

        & .Last_Article{
            display:grid;

            grid-template-columns:auto 33%;
            grid-template-rows: auto;
            justify-content: center;
            height:calc(var(--abs-innerH-b-nav) - var(--b));
            width:100%;
             & .art_img{
                grid-column:1;
                grid-row:1;
                width:66vw;
                overflow:hidden;
                height:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                background-color:var(--BG-color);
                & img{
                    position:relative;
                    height:var(--abs-innerH-b-nav);
                    width:auto;
                    justify-self:center;
                    align-self:center;
                }
            }
            & form{
                position:relative;
                top:var(--demi-b);
                right:4%;
                z-index:46;

                display:flex;
                grid-row:3;
                justify-content:end;

                width:100%;
                height:100%;

                & button{
                    &:first-of-type{
                        align-items:center;
                    }
                    width:fit-content;
                }
            }
        }
        .art_content{
            position:relative;

            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:space-between;
            justify-self:center;

            width:100%;
            height:100%;
            
            padding-bottom:var(--b);

            background-color:rgba(255,255,255,0.8);


            &>section{ 
                padding:0;
                & h2{
                    padding:var(--demi-b);
                }
                .show_more{
                    display:none;
                }
                &:nth-child(1){
                    display:flex;
                    position:relative;
                }
                &:nth-child(2){
                    padding:var(--b);
                    width:var(--inner-b);
                    height:var(--inner-b);
                }
                &:nth-child(3){
                    padding:var(--b);
                    width:var(--inner-b);
                    display:flex;
                    justify-content:center;
                }
                
            }
            .interact_board{
                align-self: end;
                position:relative;
                margin:0;
                bottom:0;   
                height:fit-content;                       
            }

            

        }

        & form{
            display:flex;
            justify-self:center;
            z-index:46;
            height:100%;
            button{
                align-items:center;
                width:fit-content;
            }
        }
    }

    & #History{
        position:relative;
        margin-top:var(--b);
        height:fit-content;
        grid-column:1;
        grid-row:3;
        overflow-x:scroll;
        z-index:20;
        display:flex;
        justify-items:space-between;
        flex-direction:row;
        gap:var(--demi-b);
        display:flex;
        padding:var(--demi-b);
        width:var(--abs-inner-nav-b);
        &>.Feed_content{
            animation: animHeadline 1s ease-out;
            display:flex;
            flex-direction:column;
            margin:auto;
            height:calc(1.7 * var(--10b));
            width:500px;
            justify-content:center;
            align-items:space-around;
            background-color:white;
            padding:0 0 var(--b) 0;
            border-radius:var(--demi-b);
           box-shadow:var(--Dark-BG) 1px 5px 10px;
            & form{
                & button{
                    width:var(--3b);
                }
                margin:0;
            }

            &:hover{
                cursor:pointer;
            }
            
            & .art_img{
                border-radius: 1em 1em 0 0;
                overflow:hidden;
                width:auto;
                margin-bottom:var(--b);
                & img{
                    width:100%;
                }
            }
            & .art_content{
                top:-4em;

                display:flex;
                flex-direction:column;
                justify-content:space-between;
                align-items:center;
                border-radius:0 0 1em 1em;
                /* padding:1%; */
                gap:var(--b);
                padding:0 var(--b) 0 var(--b) ;
                background-color:white;
                opacity:0.8;
                & .article{
                        display:flex;
                        flex-direction:column;
                        justify-content:center;
                        align-items:center;
                        text-align:center;
                        button{
                            margin:var(--b) auto 0 auto 
                        }
                    }

                & section{

                    &:nth-child(1){
                        display:flex;
                        justify-content:space-around;
                        align-items:center;
                        margin-bottom:1em;
                        h2{
                            font-size:1.5em;
                            font-weight:600;
                            color:var(--FG-color);
                            position:relative;
                            padding:0.1em;
                            margin:auto;
                            align-self:center;
                        }
                        &>form{
                            padding:0 0 0 var(--b);
                        }
                    }
                    
                    &:nth-child(4){
                        display:none;
                        flex-direction:row;
                        justify-content:space-around;
                        align-items:center;
                    }

                .art_desc{
                    display:none;
                }
            }

        }
    }
    }
    
    & #Article_Breadcrumb{
        display:flex;
        grid-row:2;
        background-color:var(--Shadow-color);
        width:100%;
        align-items:center;
        box-shadow:var(--Dark-BG) 1px 5px 10px;
        & a{
            position:relative;
            left:-30px;
            background-color:var(--Button-color);
            animation-delay:2600ms;
            color:var(--Font-color);
            font-size:1.7em;
            font-weight:800;
            padding:var(--demi-b) var(--2b) var(--demi-b) var(--2b);
            text-align:center;
            text-justify:center;
            clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
            justify-content: center;
            align-items:center;
        }

    }

    & #Feed_nav{
        grid-row:4;
        position:relative;
        bottom:var(--b);
        width:100%;
        height:var(--3b);
        margin:auto;
        justify-self:center;
        display:flex;
        justify-content:center;
        align-items:center;
        & #Feed_Next{
            order:3;
        }
        & #Feed_Pagination{
            text-align:center;
            order:2;
            margin:5%;
            width:var(--5b);
            
        }
        & #Feed_Previous{
            order:1;
        }
    }
}

/* ================================MEDIA-QUERIES=========================================*/
/* ================================MEDIA-QUERIES=========================================*/
/* ================================MEDIA-QUERIES=========================================*/

@media screen AND (max-width:740px){
    main{
        grid-template-rows: 1fr 3.7em 42em 7em;
        /* margin:var(--nav-m) 0 var(--nav-m) 0; */
         & #Showcase{
            width:100vw;
             & .Last_Article{
                width:100%;
            }
        }
         & #History{
             width:100vw;
             padding:var(--b);
         }
         
        & .display_coms{
            background-color:var(--Paper-color);
            position:relative;
            display:flex;
            justify-content:center;
            flex-direction:column;
            align-items:center;
            border-radius:var(--b);
            padding:var(--demi-b);
            opacity:1.0;
            & .CONTAINER{
                height: 100%;
                margin-top:2.5em;
            }
        }
        & .write_coms{
            background-color:var(--Paper-color);
            position:relative;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            border-radius:1em;
            padding:1em;
            & .CONTAINER{
                height: 18em;
            }
        }
    }
}