:root {
  --bg-color: rgb(240, 240, 233);
  --txt-color: #00425A;
  --light-highlight-color: #d4f3e7;
  --bold-highlight-color: #FC7300;
  --banner-padding: 60px;
  --max-width: 960px;
}

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--txt-color);
  padding: 0 0 40px 0;
  margin: 0;
}

/* LAYOUTS */
.main {
  gap: 30px
}

.two-column {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.two-column > :first-child {
  flex-basis: 300px;
  flex-grow: 1;
}

.two-column > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.one-column {
  width: 80%;
  max-width: var(--max-width);
  margin: 0 auto;
}
/* end LAYOUT */

.callout {
  text-align: center;
}

.callout-link {
  color: var(--bold-highlight-color)
}

.callout > p {
  padding-inline-start: 40px;
  padding-inline-end: 40px;
  line-height: 200%;
}

.profile-pic {
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bold-highlight-color);
  margin-block-start: 0;
  margin-block-end: 30px;
  font-family: 'PT Serif', serif;
}

h3 {
  margin-block-start: 30px;
}

p {
  margin-block-end: 0;
  line-height: 175%;
}

/* NAVBAR */
#navbar {
  width: 80%;
  max-width: var(--max-width);
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

#navbar:first-child {
  flex-grow: 1;
}

#navbar > p {
  font-size: 16px;;
  margin: 0;
}

.nav-links > a {
  padding-inline-end: 20px;
}

.nav-links > :last-child {
  padding-inline-end: 0;
}

.nav-active {
  color: var(--bold-highlight-color)
}
/* end NAVBAR */

.toplink {
  text-align: end;
  font-size: smaller;
  padding-block-start: 10px;
}

a {
  text-decoration: none;
  color: var(--txt-color);
}

a:hover {
  text-decoration: underline;
}


/* UTILITY CLASSES */
.hidden {
  display: none;
}

.border-tb {
  border-block-start: 1px solid var(--txt-color);
  border-block-end: 1px solid var(--txt-color);
  padding-block-start: 30px;
  padding-block-end: 30px;
}

.border-b {
  border-block-end: 1px solid var(--txt-color);
  padding-block-start: 30px;
  padding-block-end: 30px;
}

/* only works in Safari */
.mt-block {
  margin-trim: block;
}
/* workaround for Firefox and Chrome */
.mt-block-workaround {
  margin-top: 0;
}
/* END UTILITY CLASSES */