@import url("./reset.css");
@import url("../font/ibm-plex-mono/font.css");
@import url("../font/redaction/font.css");

.red {
  background-color: var(--red);
}
.redb {
  border: solid var(--section-border-radius) var(--red);
}

.orange {
  background-color: var(--orange);
}
.orangeb {
  border: solid var(--section-border-radius) var(--orange);
}

.yellow {
  background-color: var(--yellow);
}
.yellowb {
  border: solid var(--section-border-radius) var(--yellow);
}

.green {
  background-color: var(--green);
}
.greenb {
  border: solid var(--section-border-radius) var(--green);
}

.blue {
  background-color: var(--blue);
}
.blueb {
  border: solid var(--section-border-radius) var(--blue);
}

.purple {
  background-color: var(--purple);
}
.purpleb {
  border: solid var(--section-border-radius) var(--purple);
}

.white {
  background-color: var(--white);
}
.whiteb {
  border: solid var(--section-border-radius) var(--white);
}

.gray {
  background-color: var(--gray);
}
.grayb {
  border: solid var(--section-border-radius) var(--gray);
}

.black {
  background-color: var(--black);
}
.blackb {
  border: solid var(--section-border-radius) 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;

  --section-border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
  body {
    --bgc: var(--black);
    --bgci: var(--white);
    --txtc: var(--white);
    --txtci: var(--black);
  }
}

@media (prefers-color-scheme: light) {
  body {
    --bgc: var(--white);
    --bgci: var(--black);
    --txtc: var(--black);
    --txtci: var(--white);
  }
}

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

/* ^^^ GLOBAL STUFF ^^^ */

/* vvv ACTUAL CONTENT vvv */

.content {
  width: 640px;
}

body {
  background-color: var(--bgc);
  color: var(--txtc);
  font-family: var(--font-regular);
  font-size: 16px;
}

.section {
  padding: 0.64rem;
  position: relative;
}

.links {
  border: solid 2px var(--bgci);
  padding: 0.64rem;
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}

.links a {
  width: 100%;
  padding: 0.24rem 0.48rem;
  border-left: solid 2px var(--txtc);
  transition:
    border-left 0.3s,
    padding 1s;
}
.links a:hover {
  padding: 0.24rem 1rem;
  border-left: solid 0.64rem var(--txtc);
}

h1 {
  background-color: var(--bgci);
  color: var(--txtci);
  text-align: center;
  font-family: var(--font-bold);
  margin: 0 0 8px 0;
}

h3 {
  position: absolute;
  transform: translate(0.48rem, -0.48rem);
  padding: 0 2px;
  background-color: var(--bgc);
  font-family: var(--font-bold);
}