@import url("https://cdn.22is5.com/css/reset.css");
@import url("https://cdn.22is5.com/fonts/ibm-plex-mono/font.css");
@import url("https://cdn.22is5.com/fonts/redaction/font.css");

.red {
  background-color: var(--red);
}
.orange {
  background-color: var(--orange);
}
.yellow {
  background-color: var(--yellow);
}
.green {
  background-color: var(--green);
}
.blue {
  background-color: var(--blue);
}
.purple {
  background-color: var(--purple);
}
.white {
  background-color: var(--white);
}
.gray {
  background-color: var(--gray);
}
.black {
  background-color: var(--black);
}

:root {
  --red: #d65858;
  --orange: #ffb764;
  --yellow: #ffe180;
  --green: #75ff87;
  --blue: #83c7ff;
  --purple: #db8fff;
  --black: #1f1f1f;
  --gray: #d1cfc049;
  --white: #d1cfc0;

  --font-regular: "IBM Plex Mono";
  --font-bold: "IBM Plex Mono Bold";
  --font-italic: "IBM Plex Mono Italic";

  --font-serif: "Redaction";

  --font-size: 18px;

  --clip: 3px;
}

.center {
  width: 100%;
  text-align: center;
}

/* GLOBAL STUFF  */

/* ACTUAL CONTENT */

body {
  font-family: var(--font-regular);
  background-color: var(--black);
  color: var(--white);
  font-size: var(--font-size);
}

a {
  text-decoration: underline;
}

.header,
.bold {
  font-family: var(--font-bold);
}

.copy {
  cursor: cell;
}

.name::after {
  content: ".22is5.com";
  color: var(--gray);
  font-family: "IBM Plex Mono";
}

.content {
  display: flex;
  flex-direction: column;
  padding: 12px;
  width: 512px;
}

.logo {
  font-family: "Redaction 35 Bold";
  font-size: 72px;
  color: var(--black);
  position: relative;
  height: 63px;
  overflow: hidden;
}
.logo__box {
  background-color: var(--white);
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    0px calc(100% - var(--clip)),
    var(--clip) calc(100% - var(--clip)),
    var(--clip) 100%,
    calc(100% - var(--clip)) 100%,
    calc(100% - var(--clip)) calc(100% - var(--clip)),
    100% calc(100% - var(--clip)),
    100% var(--clip),
    calc(100% - var(--clip)) var(--clip),
    calc(100% - var(--clip)) 0px,
    var(--clip) 0px,
    var(--clip) var(--clip),
    0px var(--clip)
  );
}
.logo__text {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1.4);
}

body {
  display: flex;
  justify-content: center;
}

.endlinks {
  min-width: fit-content;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.square {
  --square-size: 24px;
  width: var(--square-size);
  height: var(--square-size);
}
.colorbar {
  padding: 12px 0 24px 0;
  display: flex;
  justify-content: center;
  gap: 24px;
}