.tape1 {
    --tape1-x: 0px;
    --tape1-y: 0px;
    --tape1-width: 80px;
    --tape1-height: 25px;
    --tape1-angle: 0deg;
    &:before {
        content: '';
        position: absolute;
        width: var(--tape1-width);
        height: var(--tape1-height);
        top: calc(var(--tape1-y) - var(--tape1-height) * 0.5);
        left: calc(var(--tape1-x) - var(--tape1-width) * 0.5);
        transform: rotate(var(--tape1-angle));
        background: rgba(180, 180, 190, 0.4);
        outline-style: outset;
        outline-width: 1px;
        outline-color: rgba(120, 120, 130, 0.5);
    }
}

.tape2 {
    --tape2-x: 0px;
    --tape2-y: 0px;
    --tape2-width: 80px;
    --tape2-height: 25px;
    --tape2-angle: 0deg;
    &:after {
        content: '';
        position: absolute;
        width: var(--tape2-width);
        height: var(--tape2-height);
        top: calc(var(--tape2-y) - var(--tape2-height) * 0.5);
        left: calc(var(--tape2-x) - var(--tape2-width) * 0.5);
        transform: rotate(var(--tape2-angle));
        background: rgba(180, 180, 190, 0.4);
        outline-style: outset;
        outline-width: 1px;
        outline-color: rgba(120, 120, 130, 0.5);
    }
}

.pin {
    --pin-x: 0px;
    --pin-y: 0px;
    --pin-rad: 8px;
    --pin-hue: 30deg;
    &:before {
        content: '';
        position: absolute;
        width: calc(var(--pin-rad) * 2);
        height: calc(var(--pin-rad) * 2);
        top: calc(var(--pin-y) - var(--pin-rad));
        left: calc(var(--pin-x) - var(--pin-rad));
        background: hsl(var(--pin-hue), 100%, 100%);
        border-radius: 100%;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
        background: radial-gradient(hsl(var(--pin-hue), 100%, 40%), hsl(var(--pin-hue), 100%, 10%));
        background-size: 140% 140%;
        background-position: 100% 100%;
    }
    /* shine */
    &:after {
        content: '';
        position: absolute;
        width: calc(var(--pin-rad) * 0.4);
        height: calc(var(--pin-rad) * 0.4);
        top: calc(var(--pin-y) - var(--pin-rad) * 0.5);
        left: calc(var(--pin-x) - var(--pin-rad) * 0.5);
        background: #ffffff;
        border-radius: 100%;
    }
}

.text-scribble {
    white-space: nowrap;
    --text-x: 0px;
    --text-y: 0px;
    --text-content: '';
    --text-angle: 0deg;
    &:before {
        content: var(--text-content);
        position: absolute;
        top: var(--text-y);
        left: var(--text-x);
        font-family: "Love Ya Like A Sister";
        font-size: 30px;
        transform: translate(-50%, 0px) rotate(var(--text-angle));
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
    }
}