@property --deg {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
body {
  margin: 0;
  font: 100%/1.4 system-ui;
}

main {
  padding: 0 5% 0 25%;
  font-variation-settings: "wght" 300, "wdth" 120;
}

h1 {
  font-size: 3rem;
  font-variation-settings: "wght" 100, "wdth" 300;
  margin: 0;
}

nav {
  font-variation-settings: "wght" 300, "wdth" 300;
  display: flex;
}
nav a {
  padding: 0.5rem;
  flex: 1;
  text-align: right;
  margin-inline-start: -50px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  --deg: -5deg;
  background: conic-gradient(from var(--deg) at 0 0, var(--triangle-color) 37.5%, transparent 37.5%);
  color: black;
  text-shadow: 0 1px 0 lch(100% 0 0deg / 0.35);
  text-decoration: none;
  text-transform: uppercase;
  transition: --deg 0.46s linear(0, 0.89 12.2%, 1.139 19%, 1.28 26.8%, 1.306 38.2%, 1.046 73.2%, 1);
}
nav a:hover {
  --deg: -17.5deg;
  translate: 0 -1px;
}
nav a:nth-child(1) {
  --triangle-color: oklch(from white l c h / 0.5);
  z-index: 5;
}
nav a:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100vb;
  width: 1px;
  background: black;
}
nav a:nth-child(2) {
  --triangle-color: oklch(71% 37% 39deg);
  z-index: 4;
}
nav a:nth-child(3) {
  --triangle-color: oklch(89% 18% 345deg);
  z-index: 3;
}
nav a:nth-child(4) {
  --triangle-color: oklch(41% 30% 148deg);
  z-index: 2;
}