style.css

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    background: ghostwhite;
    /*height: 100%;*/
    font-family: "Futura",sans-serif;
    border: 0 solid #2F0028;
    border-bottom-width: 100vh;
    height: 200%;
}

head {
    display: block
}

title {
    font-size: 162pt;
    background:
            linear-gradient(
                    50deg,
                    rgb(218, 196, 255)37%,
                    rgb(167, 214, 194)71%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    text-align: center;
    padding:28px 0 3px;
    -webkit-user-select: none;
    cursor: default;
    position: absolute;
    left: 0;
    right: 0;
}

body {
    position: relative;
    height: 800px;
    margin: 340px auto;
    width: 600px;
    border: 18px ridge #FFECFC;
    background: linear-gradient(
            56.4deg,
            rgb(228, 220, 242)52%,
            rgba(255, 255, 255, 0.93)52%);
}

canvas {
    width: 100%;
    display: block;
    height: 100%;
}

spool {
    position: absolute;
    border-radius: 50%;
    /*background-color: rebeccapurple;*/
    border: 18px solid transparent;
    
}

spool:hover {
    background: ghostwhite;
    cursor: -webkit-grab;
}

spool.draggable {
    background: ghostwhite;
    cursor: -webkit-grabbing!important;
}

spool.draggable input {
    border-color: transparent;
    /*background:transparent;*/
    background: purple;
}

input {
    border: 4px double #524E73;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background-color: #FFF5FD;
    font-family: "helvetica neue", sans-serif;
    text-align: center;
    font-size: 8pt;
}

input:focus {
    outline: none;
    box-shadow:
            inset 0 0 0 2px white,
            inset 0 0 0 3px #B166D0,
            inset 0 0 0 5px white,
            inset 0 0 0 6px #8E8E8E;
    background: white;
}