.card , .card-header
{
    position: relative;
}
.card-header
{
    padding-top: 1rem;
    background-image: url('../images/card-header/center.webp');
    background-repeat: repeat;
    box-shadow: 0 3px 9px black;
    z-index: 3;
}
.card-body
{
    background-color: var(--color-brown);
    background-image: url('../images/PATTERN.webp');
    background-repeat: repeat;
}
.left-border-card
{
    position: absolute;
    top: 0;
    left: -5px;
    width: 10px;
    height: 100%;
    background-image: url('../images/card-body/middle-left.webp');
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 4;
}
.right-border-card
{
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    background-image: url('../images/card-body/middle-right.webp');
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 4;
}
.bottom-border-card
{
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: url('../images/card-body/middle-bottom.webp');
    background-repeat: repeat-x;
    background-size: contain;
    z-index: 4;
}
.top-border-card
{
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: url('../images/card-body/middle-top.webp');    
    background-repeat: repeat-x;
    background-size: contain;
    z-index: 4;
}
.left-bottom-corner-card
{
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 30px;
    height: 30px;
    background-image: url('../images/card-body/bottom-left.webp');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}
.left-top-corner-card
{
    position: absolute;
    top: -5px;
    left: -5px;
    width: 30px;
    height: 30px;
    background-image: url('../images/card-body/top-left.webp');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}
.right-bottom-corner-card
{
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background-image: url('../images/card-body/bottom-right.webp');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}
.right-top-corner-card
{
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background-image: url('../images/card-body/top-right.webp');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}
/* Card Header Borders */
.left-border-header
{
    position: absolute;
    top: 0;
    left: 3px;
    width: 10px;
    height: 100%;
    background-image: url('../images/card-header/left-middle.webp');
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 5;
}
.right-border-header
{
    position: absolute;
    top: 0;
    right: 3px;
    width: 10px;
    height: 100%;
    background-image: url('../images/card-header/right-middle.webp');
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 5;
}
.top-border-header
{
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: url('../images/card-header/top-middle.webp');    
    background-repeat: repeat-x;
    background-size: contain;
    z-index: 4;
}