html
{
    /*background-image: url(https://files.catbox.moe/lu6up7.png);*/
    overflow: scroll;
    overflow-x: hidden;
}

body
{
    margin: 0;
    
    background-image: url('https://files.catbox.moe/m2nvcu.png');
    background-attachment: fixed;
    background-repeat: repeat;
    overflow: hidden;
}

#main-container
{
    max-height: 100hv;
    /*max-height: 4000px;*/
    /*max-width: 900px;*/
    max-width: 100vh;
    /*width: 110vh;*/
    
    margin-left:auto;
    margin-right: auto;
    margin-top: 25px;
    padding: 5px;
    
    display:grid;
    grid-gap: 8px;
    
    /*grid-template-columns: 200px minmax(0, 1fr) 150px;*/
    /*grid-template-columns: 170px 420px 150px;*/
    /*grid-template-columns: repeat(auto-fit, minmax(0, 1fr));*/
    /*grid-template-columns: 170px minmax(0, 1fr) 150px;*/
    grid-template-columns: 0.4fr minmax(0, 1fr);
    
    grid-template-rows: auto auto 4fr auto auto;
    grid-template-areas:
        "header header"
        "navbar main"
        "navbar main"
        "moonbox main"
        "footer footer";
    
    /*
    grid-template-columns: 0.4fr 0.1fr minmax(0, 9fr);
    
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header header header"
        "navbar navbar main"
        "moonbox gifmanager main"
        "footer footer footer";
        */
    
    border-width:7px;
    border-style: solid;
    border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;        
}

@media only screen and (max-width:600px)
{
    #main-container
    {
        grid-template-columns: 1fr;
        /*grid-template-rows: repeat(7, 0.4fr);*/
        
        grid-template-areas:
            "header"
            "navbar"
            "gifmanager"
            "main"
            "socials"
            "moonbox"
            "buttonbox"
            "footer";
    }
    
    nav 
    {
        text-align: center;
    }
    
    nav ul
    {
        padding: 0;
        list-style-type: none;
        list-style-position: inside;
    }
    
    footer
    {

    }
}