:root {
	--lightBg:   white;
	--lightText: hsl(  0,   0%,  10%);
	--lightLink: hsl( 20, 100%,  30%);

	--darkBg:    hsl(  0,   0%,  20%);
	--darkText:  white;
	--darkLink:  hsl( 20,  100%, 60%);
	
  --success: lightgreen;
  --failure: tomato;
}

/************************************
 color theme 
*************************************/
.failure {
  color: var(--failure);
}

.sucess {
  color: var(--success);
}

body {
  color: var(--lightText);
  background: var(--lightBg);
}

a {
  color: var(--lightLink);
}

body > footer, aside.cta {
  color: var(--darkText);
  background: var(--darkBg);
}

body > footer a, aside.cta a {
  color: var(--darkLink);
}

/********************
 layout
*********************/
/* site is fundamentally designed to be full width and centered. */
body, figure {
  margin: 0;
  text-align: center;
}

main, footer {
  padding: 1em;
}

img {
  max-width: 100%;
  max-height: 95vh;
} 

/* it is only paragraph and non-header elements that are left aligned, block-centered and limited to 35em. */
p, li { 
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding-left: 1em;
  padding-right: 1em;
}

/* as well as backgrounds to those paragraphs */
aside.cta {
  max-width: 35em;
  margin: 2em auto;
  padding: 1em;
}


/********************************
 styling
*********************************/
*, ::before, ::after {
  box-sizing: border-box;
}

body {
  font: 100%/1.5 "Times New Roman", "Liberation Serif", serif;
  font-size: 1.25em;
}

a {
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
}

hr {
  width: 50%;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.25em;
}

h3 {
	font-size: 1em;
}

figcaption {
	font-style: italic;
}

/* specific components */
article.card {
  /*border: 1px solid gray;
  border-radius: 1em;
  padding: 1em;*/
  margin-bottom: 2em;
}

aside.cta {
	border-radius: 1em;
}

/* unusual hacks */
.hpt {
  position: absolute;
  left: -5000px;
}