:root {
  --purple: #9100d2;
  --lightpurple: #b000ff;
  --black: #111111; /* bg color */
  --black01: #030303;
  --black02: #1a1a1a;
  --gray: #555;
  --gray01: #222222;
  --gray02: #333333;
  --white: #ddd;
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  background-color: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  overflow-x: hidden;
  font-family: kirsch;
  font-size: 1.5rem;
}

/* fix for tiny tiny text on mobile*/
@media only screen and (max-device-width: 500px) {
  body, footer, header, p, ul {
    font-size: 3.5rem !important;
    margin: 10px 10px 10px 30px;
    line-height: 4.0rem !important;
  }
  .banner {
    font-size: 4rem !important;
  }
  #content {
    width: 100% !important;
    max-width: 100% !important;
  }
}

#content {
  width: 700px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: inherit;
}

header {
  text-align: center;
  font-size: 2rem;
  height: 100px; /* pre-allocate space? */
}

a:link, a:visited {
  color: var(--purple);
}

a:hover, a:active {
  color: var(--lightpurple);
  box-shadow: .1rem .1rem var(--gray01);
}

a {
  box-shadow: .1rem .1rem var(--black01);
  text-decoration-line: none;
}

footer {
  text-align: center;
  font-size: 1.3rem;
}

.banner {
  font-size: 2rem;
}

p, ul {
  margin-top: 4px;
  margin-bottom: 4px;
}

.paragraph {
  text-indent: 2rem;
  font-size: 1.7rem;
}

b {
  font-weight: normal !important;
  text-shadow: 2px 2px var(--lightpurple);
}

i {
  text-shadow: 1px 1px var(--lightpurple);
}

h2 {
  font-weight: normal;
}

ul {
  list-style-type: "◇ ";
  line-height: 1.9rem;
}

code {
  white-space: pre;
  overflow-x: auto;
  width: 100%;
  font-family: kirsch;
  background: #0c0c0c;
}

details > summary {
  cursor: pointer;
  box-shadow: .1rem .1rem var(--gray01);
}

details > p {
  padding: 1rem 1rem;
  background-color: var(--black02);
}

details summary::marker {
  content: "+ "
}
details[open] summary::marker {
  content: "- "
}

.page-break {
  text-align: center;
}

.pride {
  background-position: 0% 100%;
  background-image: linear-gradient(to left, #e40303 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%, #008026 50% 66.66%, #004dff 66.66% 83.33%, #750787 83.33% 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0);
}

.pride-trans {
 background-image: linear-gradient(to left, #32bcf6 20%, #f7b0c4 20% 40%, #fff 40% 60%, #f7b0c4 60% 80%, #32bcf6 80% 100%) !important;
}

.pride-bi {
  background-image: linear-gradient(to left, #0038A8 36%, #9B4F96 36% 63%, #D60270 63% 100%) !important;
}

@font-face {
  font-family: "kirsch";
  src:
    local("kirsch"),
    url("../res/kirsch.woff2") format("woff2"),
    url("../res/kirsch.ttf") format("truetype");
  font-display: swap;
}