#item-modal {
    xborder:5px solid lime;
    position:absolute;
    width:100%;
    height:100%;
    z-index:2;
    background-color:rgba(0,0,0,0.5);
    display:flex;
    justify-content: center;
    align-items: center;
    transition:all 0.2s;

    /*
    border-style: solid;
	border-image-source: url('../img/border.png');
	border-image-slice: 150;
	border-image-width: 3em;
	border-image-outset: 0;
	border-image-repeat: round;
    box-shadow: inset 0px 0px 10px 10px rgba(0,0,0, 0.8);
    */
}

#item-modal.hidden {
    display:none;
}

#item-modal > .content {
    xborder:5px solid lime;
    width: 80%;
    height:50%;
    background-color:rgb(65, 65, 65);
}

#item-modal > .content  > .button-container {
    xborder: 1px solid red;
    width:100%;
    flex:20%;
    display:flex;
    justify-content: center;
    align-items: center;
}


#item-modal > .content  > .button-container > .button {
    text-align:center;
    width:300px;
    aspect-ratio:300/86;

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

    background-image: url('../img/button.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    font-size:2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;

    color:#ffffff;
    text-shadow: 0px 0px 10px orange, 0px 0px 5px rgb(160, 160, 160);
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.9));
}



#item-modal > .content  > .button-container > .button:active {
    background-image: url('../img/button_dark.png');
    font-size:1.9em;
}