:root {
    box-sizing: border-box;
    font-family: Arial, Source Sans Pro, Helvetica, sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 1em;
}

*,
::before,
::after {
    box-sizing: inherit;
}

body {
    color: #222;
    margin: 0;
    padding: 0;
}

/* #content-wrap {
    padding-bottom: 0em;
} */

.main_content {
    position: relative;
    background: #fff;
    margin: 0em;
    padding: 0 0 3em;
    line-height: 1.5;
}

.main_content hr {
    color: #999999;
    height: 0.4em;
    opacity: 100%;
    margin: auto;
    width: 75%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.main_content h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: rgb(36, 41, 47);
}

.main_content h1 {
    font-size: 2rem;
    padding-bottom: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    border-bottom: 0.05rem solid;
    border-bottom-color: rgb(210, 205, 205);
}

.main_content h2 {
    font-size: 1.5rem;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    border-bottom: 0.05rem solid;
    border-bottom-color: rgb(210, 205, 205);
}

.main_content h3 {
    font-size: 1.25rem;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.main_content h4 {
    font-size: 1rem;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.main_content h5 {
    font-size: 0.875rem;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.main_content h6 {
    font-size: 0.85rem;
    color: rgb(87, 96, 106);
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.main_content p {
    color: rgb(36, 41, 47);
}

.main_content a {
    text-decoration: none;
}

.figure_featured {
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

.figure_featured img {
    padding-bottom: 1em;
    vertical-align: top;
    width: 100%;
}

footer {
    width: 100%;
    font-size: 1rem;
}

.footer-bottom {
    margin-bottom: 1em;
    background: #a8b3b8;
    padding: 1.5em;
    text-align: center;
}

.footer-bottom img {
    height: 3em;
    margin-right: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    display: inline-block;
}

.footer-bottom p {
    margin-bottom: 0;
    text-align: center;
}

#footnotes hr {
    color: #999999;
    height: 0.1em;
    opacity: 100%;
    margin: auto;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.form-control {
    display: inline-block;
    border-radius: 0.125em;
    font-size: 1.25rem;
    padding: 0.4em;
}

.error-msg {
    color: #b30000;
}

.page-core {
    padding: 1.5em;
}

.logged-in {
    font-size: 1rem;
    color: white;
    background-color: #676c6e;
    padding-left: 0.35em;
    max-height: 1.5em;
    min-height: 1.5em;
}

.certification_row {
    display: flex;
}

.person_row {
    display: flex;
    padding-bottom: 2.5em;
}

.person_col {
    padding: 5px;
}

.person_col img {
    max-height: 20vmin;
    min-height: 0;
}

code {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    color: rgb(36, 41, 47);
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 6px;
}

.screen-shot {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

blockquote {
    padding: 0 1em;
    color: gray;
    border-left: .25em solid;
    border-left-color: rgb(210, 205, 205);
    background-color: #f2f2f2;
}

.card-body {
    overflow: clip;
    height: 15em;
    margin-bottom: 1em;
}

/*This is a patch for an unresolvable bug that adds extra margin to <form> blocks on all pages except index.html*/
.fix-form-margin {
    margin-block-end: 0em
}

/*This collection of CSS classes governing image gallery display and behavior*/

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.gallery a {
  flex: 1 0 0px; /* adjust the percentage value to your liking */
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.gallery a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.gallery a:before {
  content: "";
  display: block;
  padding-top: 100%; /* this creates a square aspect ratio */
}

.gallery a img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: none;
  max-height: none;
}