/*Glass morphism*/
/*https://codepen.io/sambatlim/pen/mdrEXJY*/

.glass-morphism-container1 {
    position: relative;
    background-color: rgba(255, 255, 255,0.2);
    padding: 60px;
    color: #008eb5;
    border-radius: 25px;
    border: solid 2px transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
    backdrop-filter: blur(40px);
}

.glass-morphism-container2 {
    background-color: rgba(255, 255, 255,0.5);
    padding: 60px;
    color: #008eb5;
    border-radius: 25px;
    border: solid 2px transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
    backdrop-filter: blur(30px);
}

.glass-morphism-container3 {
    background-color: rgba(255, 255, 255,0.6);
    padding: 60px;
    color: #008eb5;
    border-radius: 25px;
    border: solid 2px transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
    backdrop-filter: blur(50px);
}

.glass-morphism-container-hover-effect {
    position: relative;
    background-color: rgba(255, 255, 255,0.1);
    padding: 60px;
    color: #008eb5;
    border-radius: 25px;
    border: solid 2px transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
    backdrop-filter: blur(50px);
    overflow: hidden;
    cursor: pointer;
}

    .glass-morphism-container-hover-effect::before {
        --size: 0;
        content: '';
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background: radial-gradient(circle closest-side, rgba(255, 255, 255,0.2), transparent);
        transform: translate(-50%, -50%);
        transition: width .2s ease, height .2s ease;
    }

    .glass-morphism-container-hover-effect:hover::before {
        --size: 400px;
    }

/*Glass container*/
/*https://css.glass*/

.glass {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba( 255, 255, 255, 0.18);
    /*border: 1px solid rgba(255, 255, 255, 0.3);*/
    color: whitesmoke;
}

/*Glass card*/
/*https://codepen.io/thedevenv/pen/JjrXayd*/

.glass-card {
/*    width: 400px;
    min-height: 250px;*/
    background: rgba( 255, 255, 255, 0.15 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 18px );
    -webkit-backdrop-filter: blur( 18px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    border-radius: 1rem;
    padding: 1.5rem;
    z-index: 10;
    color: whitesmoke;
}