/* BODY */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--sans-serif-narrow);
  line-height: 1.4;
  margin: 1.5rem 2rem;
}

.full-width {
  max-width: 100%;
}

.page-wrapper-width-max-content {
  margin: 0 auto;
  width: max-content;
}

.page-wrapper-width-fixed {
  margin: 0 auto;
  max-width: 50rem;
}

/* HEADINGS */
h1, h2, h3, h4, h5 { 
  color: var(--title-color);
  font-family: var(--sans-serif-wide); 
}

 /* FLEX BOX CONTAINER */
header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .5rem;
} 

header > h1 {
  margin: 0;
}

header > h2 {
  margin: 0;
  color: var(--light-green);
}

/* LISTS */
ul { list-style-type: disc; }
li { margin: 5px 0; }
.dir-heading { 
  color: var(--title-color); 
  font-weight: bold; 
  list-style-type: none; 
  margin-top: 1rem; 
}

/* HORIZONTAL RULES */
hr { height: 2px; border-width:0; color: #eee; background: #eee; }

footer {
  color: var(--title-color);
}

/* BUTTONS */
.button {
  border: 2px solid var(--dark-red);
  border-radius: 50%;
  font-size: 2rem;
  padding-left: .4rem;
  padding-right: .4rem;
  padding-top: .1rem;
  padding-bottom: .1rem;
  text-align: center;
  text-decoration: none;
}

/* IMAGES */
.pixel-perfect {
  width: 3200;
  height: 1800px;
  image-resolution: 1dppx snap;
  image-rendering: pixelated;
}

/* TABLES */
.table-standard {
  border: 2px solid var(--pale-brown); 
  width: auto;
}

.th-standard {
  border: 1px solid var(--pale-brown); 
  border-collapse: collapse;
  background-color: var(--red-brown);
  color: var(--background-color);
  font-size: var(--font-size-lg);
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
}

.td-standard {
  border: 1px solid var(--pale-brown); 
  border-collapse: collapse;
  color: var(--text-color);
  font-size: var(--font-size-lg);
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
}

/* MAKE A TABLE ROW WITH A LINK CLICKABLE */
.clickable-row {
  position: relative;
}

.clickable-row:hover {
  background-color: var(--yellow);
  color: var(--dark-green);
  cursor: pointer;
}

.clickable-row:active {
  background-color: var(--yellow);
  color: var(--dark-red);
  cursor: pointer;
  a {
    color: var(--dark-red);
  }
}

.clickable-row .main-link::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/* LINKS */
a:link {
  color: var(--title-color);
}
a:visited {
  color: var(--green);
}
a:hover {
  color: var(--dark-green);
}
a:active {
  color: var(--dark-red);
}

/* CODE */
code {
  background-color: var(--pale-brown);
  border-radius: .2rem;
  box-decoration-break: clone;
  font-family: var(--monospace);
  padding: .15rem .3rem .05rem .3rem;
}