/*
    # Image Box (Stylesheet)
    By Joseph Juma

    ## About
    A stylesheet to coincide with the imgbox script.
*/

:root {
    /* Colors */
    --ash: #333333;
    --rikyu-grey: #8C867B;
    --aku: #BCB09C;
    --desert-glare: #E6D7BE;
    --twilight: #FF7952;

    --charcoal: #232323;
}

div.imgbox-overlay
{
    position:fixed;
    top:0;
    left:0;

    display:flex;

    justify-content:center;
    align-items:center;

    width:100%;
    height:100%;
    background-color:#333333AA;
    backdrop-filter: blur(4px); 

    z-index:10000;
}

img.imgbox-image
{
    aspect-ratio: 16 / 9;
    width:100%;
    object-fit: cover;
    object-position: center 40%;

    border:1px solid var(--aku);
}

div.imgbox-img-container
{
    position:relative;
    width:100%;
    max-width:60vw;
}

div.imgbox-img-container div.imgbox-img-ctrls
{
    position:absolute;
    right:0;
    top:0;

    cursor:pointer;

    color:var(--rikyu-grey);
    font-size:24px;

    padding-left:16px;
    padding-right:16px;
    padding-top:4px;

    opacity:0%;
    transition: opacity 0.25s;
    z-index:100;
}

div.imgbox-img-container:hover div.imgbox-img-ctrls
{
    opacity:100%;
    transition: opacity 0.20s;
}

div.imgbox-img-ctrls div.imgbox-exit
{
    text-shadow:0 0 12px rgba(0,0,0,0.4);
    transition: color 0.35s;
}

div.imgbox-img-ctrls div.imgbox-exit:hover
{
    color:var(--twilight);
    transition: color 0.25s;
}