.hcptable {
    table-layout: fixed;
    user-select: none;
    max-width: 100%;
}

.hcptable td {
    width: 2rem;
    height: 2rem;
    padding: 0px;
    border: 1px solid rgba(87, 87, 87, 0.062);
    border-radius: 7px;
    vertical-align: middle;
    text-align: center;
}

.solved{
    animation: 1000ms ease-in-out 1 normal pulse;
    animation-fill-mode: forwards;
}

td.topleft {
    border: none;
}

td.top {
    border-top: none;
    border-bottom: none;
}

td.toptop {
    border-bottom: none;
}


.palette {
    float: left;
    height: 3em;
    width: 3em;
    margin: 5px;
    border-radius: 0.3em;
}

@keyframes pulse {
  to {
    border-radius: 0px;
    border: 0px solid rgba(87, 87, 87, 0.0);
  }
}

#color4 {
    background: repeating-conic-gradient(#bfbfbf 0% 25%, transparent 0% 50%) 
              50% / 30px 30px;
}