.item.coin {
        --coin-size: calc(var(--item-size) * 0.7);
        width: var(--coin-size);
        height: var(--coin-size);
        margin: 0;

        --coinSpin: coinSpin 2s linear infinite;
        --sideborder: 5px solid #666c;
    }
    @keyframes coinSpin {
        0% {
            transform: rotate(90deg) rotateY(0deg) rotateX(30deg);
        }
        50% {
            transform: rotate(90deg)  rotateY(180deg) rotateX(15deg);
        }
        100% {
            transform: rotate(90deg)  rotateY(360deg) rotateX(30deg);
        }
    }
    @keyframes coinBling {
        0% {
            background-color:#456;
            border-top: 1px solid #fffc;

        }
        34% {
            background-color:#456;
            border-top: 1px solid #456;
        }
        42% {
            background-color:white;
        }
        55% {
            background-color:#456;
        }
        75% {
            background-color:#456;
        }
        90% {
            background-color:#bca;
        }
        100% {
            background-color:#456;
            border-top: 1px solid #fffc;
        }
    }
    .coin::before {
        content: '';
        width: 17vmin;
        height: 2vmin;
        background-color: black;
        position: absolute;
        left: 1vmin;
        top: 16vmin;
        border-radius: 100%;
        box-shadow: 0px 10px 5px #0005;
    }
    .coin {
        background-color: #456;

        border-radius: 55% 45%;
        border-top: 1px solid #fffc;
        border-left: var(--sideborder);
        border-right: var(--sideborder);
        border-bottom: 2px solid #333d;

        clip: rect(0px, var(--item-size), var(--item-size), 0px);
        animation: var(--coinSpin), coinBling 2s .25s ease-in infinite;
        animation-play-state: paused;
    }
    .coin:hover {
        animation-play-state: running;
    }

    #hideSplash ~ #main .coin {
        visibility: hidden;
    }
    #hideSplash:checked ~ #main .coin {
        visibility: visible;
    }