/* corner of 2 */
/* .pcorner2 {
    clip-path: polygon(0px calc(100% - 4px),
            4px calc(100% - 4px),
            4px 100%,
            calc(100% - 4px) 100%,
            calc(100% - 4px) calc(100% - 4px),
            100% calc(100% - 4px),
            100% 4px,
            calc(100% - 4px) 4px,
            calc(100% - 4px) 0px,
            4px 0px,
            4px 4px,
            0px 4px);    
} */

/* corner of 8, black border 1 px */
.pcorner8-1, .pcorner8-1--wrapper {
    clip-path: polygon(0px calc(100% - 20px),
            4px calc(100% - 20px),
            4px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 4px),
            20px calc(100% - 4px),
            20px 100%,
            calc(100% - 20px) 100%,
            calc(100% - 20px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 20px),
            100% calc(100% - 20px),
            100% 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 0px,
            20px 0px,
            20px 4px,
            12px 4px,
            12px 8px,
            8px 8px,
            8px 12px,
            4px 12px,
            4px 20px,
            0px 20px);
    position: relative;
}
.pcorner8-1 {
    border: 4px solid transparent;
}
.pcorner8-1--wrapper {
    width: fit-content;
    height: fit-content;
}
.pcorner8-1--wrapper .pcorner8-1 {
    display: block;
    clip-path: polygon(4px 20px,
            8px 20px,
            8px 12px,
            12px 12px,
            12px 8px,
            20px 8px,
            20px 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) calc(100% - 20px),
            calc(100% - 8px) calc(100% - 20px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 12px) calc(100% - 12px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 20px) calc(100% - 8px),
            calc(100% - 20px) calc(100% - 4px),
            20px calc(100% - 4px),
            20px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 20px),
            4px calc(100% - 20px));
}
.pcorner8-1::after, .pcorner8-1--wrapper::after {
    content: "";
    position: absolute;
    clip-path: polygon(0px calc(100% - 20px),
            4px calc(100% - 20px),
            4px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 4px),
            20px calc(100% - 4px),
            20px 100%,
            calc(100% - 20px) 100%,
            calc(100% - 20px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 4px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 12px),
            calc(100% - 4px) calc(100% - 20px),
            100% calc(100% - 20px),
            100% 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 0px,
            20px 0px,
            20px 4px,
            12px 4px,
            12px 8px,
            8px 8px,
            8px 12px,
            4px 12px,
            4px 20px,
            0px 20px,
            0px 50%,
            4px 50%,
            4px 20px,
            8px 20px,
            8px 12px,
            12px 12px,
            12px 8px,
            20px 8px,
            20px 4px,
            calc(100% - 20px) 4px,
            calc(100% - 20px) 8px,
            calc(100% - 12px) 8px,
            calc(100% - 12px) 12px,
            calc(100% - 8px) 12px,
            calc(100% - 8px) 20px,
            calc(100% - 4px) 20px,
            calc(100% - 4px) calc(100% - 20px),
            calc(100% - 8px) calc(100% - 20px),
            calc(100% - 8px) calc(100% - 12px),
            calc(100% - 12px) calc(100% - 12px),
            calc(100% - 12px) calc(100% - 8px),
            calc(100% - 20px) calc(100% - 8px),
            calc(100% - 20px) calc(100% - 4px),
            20px calc(100% - 4px),
            20px calc(100% - 8px),
            12px calc(100% - 8px),
            12px calc(100% - 12px),
            8px calc(100% - 12px),
            8px calc(100% - 20px),
            4px calc(100% - 20px),
            4px 50%,
            0px 50%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #381D2A;
    display: block;
    pointer-events: none;
}
.pcorner8-1::after {
    margin: -4px;
}

/* corner of 4, black border 1 px */
.pcorner4-1, .pcorner4-1--wrapper {
  clip-path: polygon(0px calc(100% - 8px),
    4px calc(100% - 8px),
    4px calc(100% - 4px),
    8px calc(100% - 4px),
    8px 100%,
    calc(100% - 8px) 100%,
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 8px),
    100% calc(100% - 8px),
    100% 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 0px,
    8px 0px,
    8px 4px,
    4px 4px,
    4px 8px,
    0px 8px);
  position: relative;
}
.pcorner4-1 {
  border: 4px solid transparent;
}
.pcorner4-1--wrapper {
  width: fit-content;
  height: fit-content;
}
.pcorner4-1--wrapper .pcorner4-1 {
  display: block;
  clip-path: polygon(4px 8px,
    8px 8px,
    8px 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 4px),
    8px calc(100% - 4px),
    8px calc(100% - 8px),
    4px calc(100% - 8px));
}
.pcorner4-1::after,
.pcorner4-1--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(0px calc(100% - 8px),
    4px calc(100% - 8px),
    4px calc(100% - 4px),
    8px calc(100% - 4px),
    8px 100%,
    calc(100% - 8px) 100%,
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 8px),
    100% calc(100% - 8px),
    100% 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 0px,
    8px 0px,
    8px 4px,
    4px 4px,
    4px 8px,
    0px 8px,
    0px 50%,
    4px 50%,
    4px 8px,
    8px 8px,
    8px 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 4px),
    8px calc(100% - 4px),
    8px calc(100% - 8px),
    4px calc(100% - 8px),
    4px 50%,
    0px 50%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #381D2A;
  display: block;
  pointer-events: none;
}
.pcorner4-1::after {
  margin: -4px;
}

/* corner of 4 */
.pcorner4 {
  clip-path: polygon(
    0px calc(100% - 8px),
    4px calc(100% - 8px),
    4px calc(100% - 4px),
    8px calc(100% - 4px),
    8px 100%,
    calc(100% - 8px) 100%,
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 8px),
    100% calc(100% - 8px),
    100% 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 0px,
    8px 0px,
    8px 4px,
    4px 4px,
    4px 8px,
    0px 8px
  );
}