body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center 60%, white, sandybrown);
}

.signboard {
    font-size: 10px;
    width: 40em;
    height: 30em;
    position: relative;
    animation: swinging 1.5s ease-in-out infinite alternate;
    transform-origin: 19.5em 0.9em;
}

.sign {
    width: 100%;
    height: 2.85em;
    background: burlywood;
    border-radius: 0.2em;
    position: absolute;
    bottom: 0;
    font-size: 7em;
    color: saddlebrown;
    font-family: serif;
    font-weight: bold;
    text-align: center;
    line-height: 3.3em;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.3),
        0 -2px 0 rgba(0, 0, 0, 0.7);
}

.strings {
    width: 15em;
    height: 15em;
    border: 0.5em brown;
    border-style: solid none none solid;
    transform: rotate(45deg);
    position: absolute;
    top: 3.8em;
    left: 12.2em;
}

.pin {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    position: absolute;
}

.pin.top {
    background: gray;
    left: 18.7em;
}

.pin.left,
.pin.right {
    background: brown;
    top: 11em;
    box-shadow: 0 0.2em rgba(255, 255, 255, 0.5);
}

.pin.left {left: 8em;}
.pin.right {right: 8em;}

@keyframes swinging {
    from {transform: rotate(10deg);}
    to {transform: rotate(-10deg);}
}