/* ==========================================
   Pun Cards
========================================== */

ol.wp-block-list{
    list-style-position:outside;
    padding-left:35px;
}

ol.wp-block-list li{

    position:relative;

    margin:18px 0;

    padding:22px 150px 22px 22px;

    background:linear-gradient(135deg,#f8fff8,#ecfff3);

    border:2px solid #b8efc8;

    border-radius:22px;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    transition:all .35s ease;

    font-size:20px;

    font-weight:600;

    line-height:1.7;

    overflow:hidden;

}

/* Hover */

ol.wp-block-list li:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 28px rgba(0,0,0,.12);

    border-color:#84e3a3;

}

/* Shine */

ol.wp-block-list li::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

    transition:.8s;

}

ol.wp-block-list li:hover::before{

    left:140%;

}

/* Copy Button */

.pun-copy-btn{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    background:#a21d35;

    color:#fff;

    border:none;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.pun-copy-btn:hover{

    background:#c11f3e;

    transform:translateY(-50%) scale(1.05);

}

/* Toast */

#pun-copy-toast{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    background:#222;

    color:#fff;

    padding:14px 24px;

    border-radius:40px;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999999;

}

#pun-copy-toast.show{

    opacity:1;

    visibility:visible;

}

/* Mobile */

@media(max-width:768px){

ol.wp-block-list li{

padding:18px;

font-size:18px;

}

.pun-copy-btn{

position:static;

transform:none;

display:block;

margin-top:15px;

width:120px;

}

}
/* ==============================
   Copy All Button
============================== */

.copy-all-puns{

display:inline-block;

margin:0 0 25px;

padding:14px 26px;

background:#0f766e;

color:#fff;

border:none;

border-radius:12px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

box-shadow:0 8px 20px rgba(15,118,110,.25);

}

.copy-all-puns:hover{

background:#115e59;

transform:translateY(-2px);

}

@media(max-width:768px){

.copy-all-puns{

width:100%;

}

}