.page-button-container{
    margin: 15px;
    border-radius: 25px;
    border: 2px solid #101010; 
    position: relative; 
    text-align: center;

    img{
    max-width: 100%;
    height: auto;
    display: block; 
    border-radius: 25px;
    }

    .page-button-image-text{
        color: white;
        background-color: rgba(0,0,0,.75);
        backdrop-filter: blur(1px);           
        -webkit-backdrop-filter: blur(1px);
        text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
        border-radius: 0px 0px 25px 25px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        font-size: 1.5em
    }

    .page-button-xml-text{
        color: white;
        background-color: rgba(0,0,0,.75);
        text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
        position: absolute;
        top: 0%;
        text-align: right;
        right: 0;
        padding: 10px;
        width: calc(100% - 20px);
        border-radius: 25px 25px 0px 0px;
        font-size: 1em;
    }

    &:hover{  
        cursor: pointer;
        border: 2px solid #FFDF00; 
        transition: all 300ms ease-in;
        filter: brightness(85%);
    }
}
    @media (max-width: 576px){
        .page-button-container{
            width: 150px;

            img{
                /* border: 3px solid #ff4500; */
            }
        }
    }    
    @media (min-width: 577px) and (max-width: 768px){
        .page-button-container{
            width: 175px;
        }
        
        img{
        /* border: 3px solid #2600ff; */
        }
    }    
    @media (min-width: 769px) and (max-width: 992px){
        .page-button-container{
            width: 200px;
        }

        img{
        /* border: 3px solid #9dff00; */
        }
    }

    @media (min-width: 993px){
        .page-button-container{
            width: 200px;
        }

        img{
        /* border: 3px solid #00eeff; */
        }
    }            

.page-button-link{
    color: white;
    text-decoration: none;

    :visited{
        color: white;
    }
}