:root {
  --base-hue: 215;
  --base-saturation: 25%;
  --base-lightness: 17%;
  --figure: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness)); #212a37
  --figure-light: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness)); #212a37
  --ground: #ffffff;
  --m1: 0.25rem;
  --m2: 0.5rem;
  --m3: 0.75rem;
  --m4: 1rem;
  --base-font-size: 20px;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ground);
  box-sizing: border-box;
  color: var(--figure);
  font-family: Karla, sans-serif !important;
  font-size: var(--base-font-size);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  margin: var(--m4);
}

header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	
img { max-width: 200px; margin-bottom: -0.75rem;  }
}

nav>ul {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 1rem;
	li {
		list-style-type: none;
	}
}

iframe { border: none; }

h2 { font-size: 1.8em; font-weight: normal; }

footer {
	margin-top: 6rem;
  font-size: 0.75em;
  color: var(--figure-light);

  img {
	  margin-left: 0.5em;
	  margin-bottom: -0.33em;
	  width: 1.5em;
	  opacity: 0.45;
  }
}

#sponsors {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 2rem 0;
	img { width: 20vw; }
	justify-items: center;
	row-gap: 3rem;
    align-items: center;
}

article#versions {
	width: 75ch;
	margin: 0 auto 12rem;
	text-align: center;
	a { display: block; font-size: 2rem; margin: 1rem; }
}

article#methodology, article#faq, article#help {
	width: 66ch;
	margin: 0 auto;

	h3 { margin: 4rem 0 1rem 0; font-size: 1.5em;}
	h4 { font-weight: normal; }

	table { 
		border: 1px solid var(--figure);
		width: 100%;
		border-collapse: collapse;
	}
	tr:nth-child(even) {
    background-color: hsl(var(--base-hue), var(--base-saturation), 95%);
  }
	th { white-space: nowrap; }
       th, td { 
	       padding: 0.5rem;
	       vertical-align: top;
	       text-align: left;
      p { margin: 0; } 
      img { width: 100% !important;  /* CKEditor slams in the px */
	      max-width: 100%;
      }

 }
 figure { width: 100%; margin: 0;}
       figcaption { margin: 1rem 0 6rem; font-weight: bold; }
}