#page-content{
    display: grid;
    padding: 16px;
    min-height: 100vh;
    grid-template-areas: 
        'media meta'
        'desc meta'
        'auto meta';

    grid-template-columns: 1fr;
}
#media-container,
#description-comment-container,
#meta-media-column{
    margin-block: 12px;
}
/*=[ Container for the actual art for the page along with tools ]=*/
#media-container{
    grid-area: media;
}
#media-container > div:nth-child(1){
    min-height: 200px;
    text-align: center;
    /*position: relative;
    left: 50%;
    transform: translateX(-50%);*/
}
#media-container > div:nth-child(1) img{
    max-width: 100%;
    max-height: 512px;
    object-fit: contain;
    cursor: zoom-in;
}
#media-container > div:nth-child(2){
    position: absolute;
    padding-left: 6px;
    transition: 0.25s ease;
    opacity: 0;
}
#media-container > div:nth-child(2) > button{
    margin-right: 6px;
    padding: 4px 10px 10px 10px;
    background-color: var(--color-9);
    border: 2px outset var(--color-6);
    border-radius: 5px;
    box-shadow: 
        2px 2px white, 
        -2px -2px white,
        -2px 2px white,
        2px -2px white,
        -2px -6px var(--color-14) inset;
    transition: 0.2s;
    cursor: pointer;
    font: bold 10px Verdana;
}
#media-container > div:nth-child(2) > button:active:hover{
    transform: translateY(4px);
    padding-bottom: 6px;
    margin-bottom: 4px;
    background-color: var(--color-13);
    box-shadow: 
        2px 2px white, 
        -2px -2px white,
        -2px 2px white,
        2px -2px white,
        -2px -2px var(--color-12) inset;
}
body.modal-open{
    overflow: hidden;
    position: fixed;
}
#media-container > dialog{
    min-height: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0 transparent;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: 0.25s ease;
    opacity: 1;
    background-color: rgba(55, 63, 61, .75);
}
#media-container > dialog::backdrop{
    background-color: transparent;
    
}
#media-container > dialog > div > div{
    position: fixed;
    display: flex;
    flex-direction: column;
    padding: 4px;
}
#media-container > dialog > div > div > button{
    margin-block: 6px;
    padding: 0;
    width: 32px;
    height: 32px;
    border: 0;
    background-color: transparent;
    border-radius: 50%;
}
#media-container > dialog > div > div > button:active{
    border-color: transparent;
}
#media-container > dialog > div > div > button > img{
    width: 100%;
    filter: invert(1);
}
#media-container > dialog input{
    cursor: grab;
    margin: 0;
    margin-block: -10px;
}
#media-container > dialog input:active{cursor: grabbing;}
#media-container > dialog > div > img{
    position: absolute;
    padding-bottom: 8px;
    max-width: 66vw;
    max-height: 90vh;
    left: 50%;
    top: 50%;
    image-rendering: auto;
    translate: -50% -50%;
    transition: 0.1s ease;
}
#media-container > dialog > div > img:hover{cursor:all-scroll}
#media-container > dialog > div > img:hover:active{cursor:none}

/*=[ Container for art title, author, desc, and comment section ]=*/
#description-comment-container{
    grid-area: desc;
}
#description-comment-container #pfp-img > img{
    margin-right: 12px;
    width: 64px;
    height: 64px;
    float: left;
    border-radius: 5px;
    border-right: 2px var(--color-5) outset;
    box-shadow: 3px 4px var(--color-14);
    border-bottom: 2px var(--color-5) outset;
    background-image: url(../assets/graphics/no-img-found001.png);
}
#description-comment-container #title-infos div{
    font-family: var(--font-family-1);
}
#title-infos > a{
    position: relative;
    z-index: 2;
}
#title-infos > a + div{
    margin-bottom: 20px;
    position: relative;
    top: 6px;
}
#title-infos #title{
    font-size: var(--font-size-5);
    font-weight: bold;
    letter-spacing: -1px;
}
#title-infos #autor{
    font-weight: bold;
}
#title-infos #categories{
    font-family: var(--font-family-2);
    font-size: var(--font-size-3);
    color: var(--color-2);
}
/*=[ Container for all the recommended art, neolinks, and meta of the art ]=*/
#meta-media-column{
    grid-area: meta;
    padding-left: 20px;
    width: 300px;
}
/*#meta-media-column #rand-art table{
    width: 100%;
    object-fit: cover;
    border-collapse: collapse;
}
#meta-media-column #rand-art table td{
    padding: 0;
}
#meta-media-column #rand-art img{
    width: 100%;
}*/
#meta-media-column > div{
    height: 100%;
}
#rand-art{
    margin-bottom: 20px;
}
#rand-art .big-button{
    box-shadow:
        0px -8px var(--color-11) inset,
        4px 8px var(--color-14);
}
#rand-art .big-button:hover:active{
    box-shadow:
        0px -4px var(--color-12) inset,
        4px 4px var(--color-14);
}
#meta-media-column #rand-art div:nth-child(2){
    /*background: var(--color-10);
    border: 2px var(--color-14) outset;*/
    border-radius: 5px;
}
#meta-media-column #rand-art #rand-grid div,
#meta-media-column #rand-art div > #rand-grid{
    display: grid;
    grid-template-columns: auto auto auto;
}
#meta-media-column #rand-art div > #rand-grid{
    gap: 12px;
    margin-bottom: 12px;
}
#meta-media-column #rand-art #rand-grid > div{
    border-radius: 5px;
    width: 92px;
    height: 92px;
    box-shadow: 
        rgba(0, 0, 0, 0.5) 0px 1px 4px,
        rgb(255, 255, 255) 0px 1px 1px inset;
}
#meta-media-column #rand-art #rand-grid > .grid-item-big{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    width: 196px;
    height: 196px;
}
#meta-media-column #rand-art #rand-grid > .grid-item-small{
    
}
#meta-media-column #rand-art #rand-grid a{
    width: inherit;
    height: inherit;
    position: relative;
    z-index: 2;
}
#meta-media-column #rand-art #rand-grid a > img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
    
}
#meta-media-column #share-media{

}
#share-media > div > div:last-child{
    text-align: center;
}
#share-media a{
    margin-inline: 4px;
    text-decoration: none;
}
#share-media a > i{
    display: inline-block;
    border: 2px black solid;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center 2px;
    image-rendering:crisp-edges ;
    width: 24px;
    height: 26px;
    transition: 0.25s ease;
}
#share-media a > i:hover:active{ height: 22px; }
.emoticon-twitter{
    background: url(../assets/spritesheet/twitter.gif) 0px 0;
    background-color: #1DA1F3;
    box-shadow: 
        0 -4px #1161B5 inset,
        1px 1px #B8E1FB inset,
        -1px 0 #B8E1FB inset;
}
.emoticon-twitter:hover{
    box-shadow: 
        0 -4px #1161B5 inset,
        1px 1px #B8E1FB inset,
        -1px 0 #B8E1FB inset,
        0px 1px 6px rgba(0, 0, 0, 0.7);
}
.emoticon-twitter:hover:active{
    background-color: #46b8ff;
    box-shadow: 
        0 0 #1161B5 inset,
        1px 1px #c6e8fd inset,
        -1px 0 #c6e8fd inset,
        0px 1px 6px rgba(0, 0, 0, 0.7);
}
.emoticon-mastodon{
    background: url(../assets/spritesheet/mastodon.gif) 0px 0;
    background-color: #605F80;
    box-shadow: 
        0 -4px #3D3D58 inset,
        1px 1px #9998D4 inset,
        -1px 0 #9998D4 inset;
}
.emoticon-mastodon:hover{
    box-shadow: 
        0 -4px #3D3D58 inset,
        1px 1px #9998D4 inset,
        -1px 0 #9998D4 inset,
        0px 1px 6px rgba(0, 0, 0, 0.7);
}
.emoticon-mastodon:hover:active{
    background-color: #717099;
    box-shadow: 
        0 0 #3D3D58 inset,
        1px 1px #a4a2e4 inset,
        -1px 0 #a4a2e4 inset,
        0px 1px 6px rgba(0, 0, 0, 0.7);
}
.emoticon-reddit{
    background: url(../assets/spritesheet/reddit.gif) 0px 0;
    background-color: #FF5700;
    box-shadow: 
        0 -4px #912C37 inset,
        1px 1px #FFA042 inset,
        -1px 0 #FFA042 inset;
}
.emoticon-tumblr{
    background: url(../assets/spritesheet/tumblr.gif) 0px 0;
    background-color: #3B455D;
    box-shadow: 
        0 -4px #252C42 inset,
        1px 1px #B3B7C0 inset,
        -1px 0 #B3B7C0 inset;
}
.emoticon-notepad{
    background: url(../assets/spritesheet/notepad.gif) 0px 0;
    background-color: #555E4E;
    box-shadow: 
        0 -4px #3C4237 inset,
        1px 1px #859379 inset,
        -1px 0 #859379 inset;
}
#description-comment-container .widget-header-css{
    display: none;
}
#description-comment-container .widget-body-clear{
    margin: 0;
}
#description{
    padding-inline: 10px;
    font-size: var(--font-size-3);
}

.meta-headers{
    margin-top: 8px;
    margin-bottom: -8px;
    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px;
    font: bold 15px Trebuchet MS;
}
#img-meta > div{
    display: flex;
    flex-direction: column;
}
#img-meta > div > div:nth-child(3){
    margin-bottom: 16px;
    color: var(--color-5);
    font-size: var(--font-size-3);
}
#img-meta > div > div > div{
    position: relative;
}
#img-meta > div span{
    position: absolute;
    right: 0;
    color: var(--color-0);
}
#img-meta > div input{
    padding-left: 24px;
    cursor: pointer;
    margin-top: 0;
    max-width: 156px;
}
#img-meta > div input + button{
    position: absolute;
    right: 8px;
    margin-inline: 6px;
    padding: 4px 4px 10px 4px;
    cursor: pointer;
    border-color: var(--color-6);
    border-radius: 5px;
    background-color: var(--color-9);
    box-shadow: 
        -2px -6px var(--color-14) inset,
        4px 8px var(--color-14);
    max-height: 32px;
    width: auto;
    min-width: fit-content;
    transition-duration: 0.1s;
    font: bold var(--font-size-4) var(--font-family-1);
}
#img-meta > div input + button:active:hover{
    padding-bottom: 6px;
    transform: translateY(4px);
    border: 2px var(--color-6) inset;
    box-shadow:
        -2px -2px var(--color-12) inset,
        0px 4px var(--color-14);
    background-color: var(--color-13);
    max-height: 28px;
}
#img-meta > div input + button > span{
    position: relative;
    bottom: 10px;
}
#img-meta > div input + button > img{
    position: relative;
    bottom: 4px;
    width: 20px;
    height: 20px;
}
#img-meta > div div + img{
    position: absolute;
    height: 20px;
    width: 20px;
    margin-top: 6px;
    margin-left: 4px;
    pointer-events: none;
}
.neolink:last-child{
    position: sticky;
    top: 8px;
    margin-top: 16px;
}

@media screen and (width <= 720px) and (orientation: portrait) {
    #page-content{
        grid-template-areas: 
        'media'
        'desc'
        'meta'
        ;
    }
    #meta-media-column{
        padding-left: 0;
        margin-inline: auto;
        width: 100%;
    }
    #meta-media-column .neolink{
        text-align: center;
    }
    #meta-media-column #rand-art div > #rand-grid{
        width: 300px;
        text-align: center;
        margin-inline: auto;
    }
    #media-container > div:nth-child(2) > button:first-child{
        display: none;
    }
}