<div class="outer">
    <div class="inner"><button onclick="alert('Link to this help section has been copied.')" title="Copy link">&#x1F517;</button></div>
    <section>
        <h1>How to pin or unpin a chat <small><br>iOS</small></h1>
        <h2>Pin a chat</h2>
        <ol>
            <li>Swipe right on the chat you&apos;d like to pin.</li>
            <li>Tap <strong>Pin</strong>.</li>
        </ol>
        <h2>Unpin a chat</h2>
        <ol>
            <li>Swipe right on the pinned chat you&apos;d like to unpin.</li>
            <li>Tap <strong>Unpin</strong>.</li>
        </ol>
    </section>
</div>

.outer{
    width: 350px;
    aspect-ratio: 1;
    --w: 40px;
    --h: 40px;
    --outline: 8px;
    --radius: 12px;
    --offset: calc(-1 * var(--outline)); 
    --size: calc(var(--radius) + var(--outline));
    contain: layout;
    background: 
        calc(100% - var(--offset)) calc(100% - var(--h)) radial-gradient(circle at left top, transparent var(--radius), white var(--radius)),
        calc(100% - var(--w)) calc( 100% - var(--offset)) radial-gradient(circle at left top, transparent var(--radius), white var(--radius)),
        linear-gradient(to top right, rgb(242, 255, 225) 20%, rgb(196, 255, 43));
    background-repeat: no-repeat;
    background-size: var(--size) var(--size), var(--size) var(--size), cover;
    border-radius: var(--radius);
    align-content: end;
    .inner {
        outline: var(--outline) solid white;
        border-radius: var(--radius);
        width: var(--w);
        height: var(--h);
        text-align: center;
        line-height: var(--h);
        margin-left: auto;
        button {
            all: unset;
            cursor: pointer;
            width: 100%;
            font-size: 1.2em;
            color: transparent;
            text-shadow: 0 0 0 black;
            &:hover {
                background-color: rgb(196, 255, 43);
            }
        }
    }

    section {
        width: 80%;
        position: absolute;
        top: 10px;
        left: 36px;
        h1 { font-size: 1.3em; font-weight: 600; }
        h2 { font-size: 1.2em; font-weight: 600; }
        a { color: rgb(29, 139, 236); }
    }
    

}
body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-content: center;
    place-items: center;
    font: 14px 'poppins';
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}