src/styles/global.css
@import "tailwindcss";

/* TEMPLATE NESS */

@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.press-start {
  font-family: 'Press Start 2P', monospace;
}

.pixel-corners,
.pixel-corners--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;
}

.pixel-corners {
  border: 4px solid transparent;
}

.pixel-corners--wrapper {
  width: fit-content;
  height: fit-content;
}

.pixel-corners--wrapper .pixel-corners {
  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));
}

.pixel-corners::after,
.pixel-corners--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: #ffffff;
  display: block;
  pointer-events: none;
}

.pixel-corners::after {
  margin: -4px;
}