﻿
.glassmorphism {
    position: relative;
}

    .glassmorphism,
    .glassmorphism > .glassmorphism-body,
    .glassmorphism > .glassmorphism-body > .glassmorphism-content {
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        flex: 1 0;
        min-height: 250px;
        border-radius: 10px; /* border radius added */
        transition: box-shadow 0.5s ease;
        -webkit-transition: box-shadow 0.5s ease;
    }

        .glassmorphism > .glassmorphism-body {
            margin: 15px;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

            .glassmorphism > .glassmorphism-body > .glassmorphism-content {
                padding: 3rem;
                background: rgba(255, 255, 255, 0.05);
            }

        .glassmorphism[data-btn] > .glassmorphism-body > .glassmorphism-content {
            align-items: center;
            justify-content: center;
        }

            .glassmorphism[data-btn] > .glassmorphism-body > .glassmorphism-content > img {
                min-width: 250px;
                max-height: 110px;
            }

        .glassmorphism > .background-blur {
            position: absolute;
            top: -20%;
            left: 0;
            bottom: -30%;
            right: 0;
            background-size: 150%;
            filter: blur(80px) brightness(1.2) contrast(1.3) saturate(1.8);
            transform: rotate(5deg);
            z-index: -1;
        }

        .glassmorphism[data-btn] > .glassmorphism-body.btn {
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37), inset 0 0 0px rgba(255, 255, 255, 0); /* added this inset shadow, initially not visible */
        }

        .glassmorphism[data-btn] > .glassmorphism-body.hover .glassmorphism-content,
        .glassmorphism[data-btn] > .glassmorphism-body:hover .glassmorphism-content {
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 215, 0, 0.1);
        }

        .glassmorphism[data-btn] > .glassmorphism-body.active .glassmorphism-content,
        .glassmorphism[data-btn] > .glassmorphism-body:active .glassmorphism-content {
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 215, 0, 0.1),inset 5px 5px 15px 5px rgba(0,0,0, 0.2);
        }
