Template:Spec.css

#content {
	  font-family: 'Besley', serif !important;
}

#firstHeading {
	font-weight: 400;
	text-align: center;
	font-stretch: 75%;
	font-style: italic;
	font-size: clamp(2rem, 12vw, 12rem);
	font-family: 'Besley', serif !important;
	color: var(--colour-grey-800);
	margin-bottom: .25em;
	border: none;
	
    &:has(+ #bodyContent .lede) {
		margin-bottom: 0.15em;
	}
	
	&::after {
		display: block;
		font-size: 0.8rem;
		text-transform: uppercase;
		font-stretch: 100%;
		font-style: normal;
		font-weight: 500;
		margin-top: .5rem;
		letter-spacing: 9%;
		color: var(--colour-grey-600);
	}
}

#bodyContent {
	font-size: .95rem;
	line-height: 1.6 !important;
}

#mw-content-text {
  font-family: 'Besley', serif !important;
  max-width: 56rem;
  margin: auto;
  color: var(--colour-grey-800);
}

span.required, .required code {
color: var(--colour-bubblegum-700);
}

span.optional, .optional code {
color: var(--colour-ectoplasm-700);
}

span.multiple, .multiple code {
color: var(--colour-yellow-700);
}

ul {
  list-style-type: "❊ ";
  list-style-image: none;
}

.must { color: var(--colour-bubblegum-700); font-weight: bold; }
.mustnt { color: var(--colour-aubergine-700); font-weight: bold; }
.should { color: var(--colour-orange-700); font-weight: bold; }
.shouldnt { color: var(--colour-weezer-700); font-weight: bold; }
.may { color: var(--colour-ectoplasm-700); font-weight: bold; }

#toc {
  display: block;
  max-width: 24rem;
  margin: auto;
  background: transparent;
  border: none;
  color: var(--colour-grey-500);
}

.toctitle {
  margin-bottom: .5rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  justify-content: center;
  align-items: baseline;
}

.toctogglespan {
  grid-column: 3;
  color: var(--colour-grey-300);
  label { color: var(--colour-grey-500); }
  label:hover { color: var(--colour-grey-700); }
}

#content h2#mw-toc-heading {
  color: var(--colour-grey-600);
  font-family: inherit;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 7%;
  font-size: .85rem;
  grid-column: 2;
}

#content :is(h1, h2, h3, h4, h5, h6, span.mw-editsection) {
	font-family: inherit;
}

#content h2 {
	border-bottom: 0;
	font-size: 1.75em;
	font-weight: 500;
}

#content :is(pre, code) {
	font-family: "Drafting", monospace !important;
}

#content a {
  font-variant: small-caps;
  letter-spacing: 5%;
  color: var(--colour-denim-800);
}

.lede {
  font-size: 1.1rem;
  color: var(--colour-grey-700);
  text-align: center !important;
  max-width: 36rem;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0;
  margin-bottom: .5rem;
}

del {
color: var(--colour-grey-500)
}