:root {
        --button-red-diameter: calc(.125 * var(--cur-width) * 1px);         /* 15% of current image width */
        --button-red-top: calc(.16 * var(--cur-height) * 1px);              /* 1px has to be inside the calc for the unit to be assigned */
        --box-shadow: calc(.005 * var(--cur-width) * 1px);
        /* === NEW RESPONSIVE ONHOVER NEON GLOW VARIABLES === */
        --glow-blur-inner: calc(0.04 * var(--button-red-diameter));          /* ~4% of button diameter for inner blur */
        --glow-spread-inner: calc(0.008 * var(--button-red-diameter));       /* ~0.8% of button diameter for inner spread */
        --glow-blur-outer: calc(0.08 * var(--button-red-diameter));          /* ~8% of button diameter for outer blur */
        --glow-spread-outer: calc(0.016 * var(--button-red-diameter));       /* ~1.6% of button diameter for outer spread */

    }

    #amazon-button-red-wrapper {
        position: absolute;
        width: var(--button-red-diameter);
        aspect-ratio: 1/1;                          /* Sets height equal to width */
        top: var(--button-red-top);
        left: calc(.1 * var(--cur-width) * 1px);

    }
                
    #barnesnoble-button-red-wrapper {
        position: absolute;
        width:  var(--button-red-diameter);
        aspect-ratio: 1/1;
        top: var(--button-red-top);
        right: calc(.1 * var(--cur-width) * 1px);
    }
  
    .book-type {
        top: calc(.95 * var(--cur-height) * 1px);
        font-size: calc(.25 * var(--button-red-diameter));
        color: #fff;
        text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
        line-height: .75;
        text-align: center;
        text-decoration: none;
    }

    .custom-btn {
        height:100%;
        width: 100%;
        max-width: 100%;
        color: #fff;
        border-radius: 50%;
        padding: 0; 
        text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
        background: transparent;
        cursor: pointer;
        position: relative;
        display: inline-block;
/*        box-shadow: inset 0.5em 0.5em 0.5em rgba(255, 255, 255, 1),
            0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3); */
        box-shadow: inset var(--box-shadow) var(--box-shadow) var(--box-shadow) rgba(255, 255, 255, 1),
            var(--box-shadow) var(--box-shadow) var(--box-shadow) rgba(0, 0, 0, 0.3);
        outline: none;
        border: 1px solid #ba6;

        /* on hover effect */
        transition: box-shadow 0.3s ease-in-out;
    }
    .custom-btn:active{
        transform: translateY(1.5vh);
    }
    .custom-btn img {
        width: 90%; 
        height: auto;
        display: block;
        object-fit: contain;
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(var(--unified-scale)); /* Scale button images */
        border-radius: 0;
    }

    .btn-red{
        border-color: #d97f8a;
        background: -webkit-gradient(linear, left top, left bottom, from(#fc021f), to(#bf0117));
    }
   .btn-red:hover {
     box-shadow: 
        /* Inner metallic shadow (kept) */
        inset var(--box-shadow) var(--box-shadow) var(--box-shadow) rgba(255, 255, 255, 1),
        /* Outer metallic shadow (kept) */
        var(--box-shadow) var(--box-shadow) var(--box-shadow) rgba(0, 0, 0, 0.3),
        /* NEON GREEN GLOW (Inner - Brighter) */
        0 0 calc(var(--glow-blur-inner)*1.5) calc(var(--glow-spread-inner)*1.5) rgba(0, 255, 0, 1), 
        /* NEON GREEN GLOW (Outer - Brighter) */
        0 0 calc(var(--glow-blur-outer)*1.25) calc(var(--glow-spread-outer)*1.25) rgba(0, 255, 0, 0.7);
    }    

    /* ========================================================= */
    /* MOBILE PHONE STYLES (Viewport width up to 480px) */
    /* ========================================================= */
    @media screen and (max-width: 480px) {
    

    }