#79-Tambourine.htm

<div></div>
<style>
    body {
        background: #6592CF;
    }

    ::before,
    ::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        z-index: 1;
    }

    div {
        width: 170px;
        height: 170px;
        box-shadow: inset 0 0 0 10px #243D83;
        border-radius: 50%;
        position: absolute;
        bottom: 55px;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
    }

    div::after {
        width: 100px;
        height: 100px;
        background: #6592CF;
        border: 10px solid #243D83;
        top: 125px;
        left: 50%;
        transform: translateX(-50%);
    }

    body::after {
        width: 100px;
        height: 100px;
        background: #6592CF;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
    }

    html::before,
    html::after,
    body:before {
        width: 50px;
        height: 50px;
        background: radial-gradient(#243D83, #243D83 5px, #6592CF 5px, #6592CF 15px, #243D83 15px)
    }

    html::before,
    html::after {
        top: 95px;
        -webkit-box-reflect: below 20px;
    }

    html::before {
        left: 105px;
    }

    html::after {
        right: 105px;
    }

    body::before {
        top: 55px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>