:root {
 --nord:#1b212a;
 --snow:#ccd2dc;
 --one:#b8c0e0;
 --two:#a5adcb;
 --three:#929ab6;
 --four:#7f87a1;
 --five:#6c748c;
 --six:#596177;
 --seven:#464e62;
 --eight:#333b4d;
 --nine:#202838;
 --ten:#0d1523;
 --code:#1e2030;
 --grey:#757575;
 --title:"dusthole";
}
header,section {
 display:block;
}
body {
 font-size:16px;
 margin:0 auto;
 line-height:1.4;
 background:var(--nord);
 color:var(--two);
 font-family:"Noto Sans", Futura, Verdana, "Liberation Sans", sans-serif;
}
a {
 color:var(--two);
 text-decoration:none;
}
a:hover {
 color:var(--snow);
 text-decoration:underline;
}
h1, h2, h3, h4, h5, h6 {
 color:var(--snow);
}
a code {
 box-shadow:0 -1px 0 var(--one) inset;
}
pre, code {
 display:block;
 margin:auto 0;
 padding:5px;
 overflow-x:auto;
 word-break:break-all;
 background:var(--code);
}
blockquote {
 margin:15px;
 padding:0 10px;
 border-inline-start:3px solid var(--three);
}
hr {
 background:var(--three);
}
::selection {
 color:var(--nord);
 background:var(--one);
}
h1 {
 font-size:2em;
 margin:.67em 0;
}
#page {
 position:relative;
}
#header {
 padding-top:30px;
 transform:translate3d(0,0,0);
}
#main {
 padding-top:30px;
}
#footer {
 padding-top:30px;
}
.title-wrapper {
 text-align:center;
}
.content {
 margin-left:auto;
 margin-right:auto;
 padding:1px 20px;
 position:relative;
}
.description {
 font-size: 18px;
 color:var(--three);
 margin:20px 0 0;
 display:block;
}
.footdesc {
 color:var(--six);
 display:block;
 font-size:14px;
}
.footdesc a {
 color:var(--six);
}
.footdesc a:hover {
 color:var(--four);
}
.footlink {
 text-align:center;
}
.middle {
 overflow:auto;
 margin:auto;
 display:inline;
 text-align:center;
 vertical-align:middle;
}
.valign {
 vertical-align:middle;
}
.squarethirty {
 height:30px;
 width:30px;
}

.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(--snow);
  z-index: -1;
 }
 &::after {
  font-weight: 600;
  letter-spacing: -0.03em;
  clip-path: var(--clip1);
 }
 &::before {
  font-weight: 400;
  clip-path: var(--clip2);
 }
}