:root {
 --bgcolor: #0b0c0d;
 --fgcolor: #d4d4d4;
 --dscolor: #929ab6;
 --lncolor: #5995a5;
 --title: "nokke";
}
body {
 font-size: 16px;
 margin: 0 auto;
 line-height: 1.4;
 background: var(--bgcolor);
 color: var(--fgcolor);
 font-family: "Noto Sans", Futura, Verdana, "Liberation Sans", sans-serif;
}
a {
 color: var(--lncolor);
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
::selection {
 color: var(--bgcolor);
 background: var(--fgcolor);
}

.byline {
 color: var(--dscolor);
 display: block;
 font-size: 18px;
 text-align: center;
 padding: 1px 20px;
 margin: 20px 0 0;
}

.tshape {
 font-size: 40px;
 color: transparent;
 text-transform: lowercase;
 position: relative;
 text-align: center;
 padding: 1px 20px;
 margin: 40px 0 0;
}

.title {
 --low: 20%;
 --high: 80%;
 --gap: 0.9rem;
 --offset: calc(var(--gap) / 2);

 --clip1: polygon(calc(var(--high) + var(--offset)) 0, 100% 0, 100% 100%, calc(var(--low) + var(--offset)) 100%);
 --clip2: polygon(calc(var(--high) - var(--offset)) 0, calc(var(--low) - var(--offset)) 100%, 0 100%, 0 0);

 &::before,
 &::after {
  content: var(--title);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--fgcolor);
  z-index: -1;
 }
 &::after {
  font-weight: 600;
  letter-spacing: -0.03em;
  clip-path: var(--clip1);
 }
 &::before {
  font-weight: 400;
  clip-path: var(--clip2);
 }
}