@font-face {
  font-family: 'Stix';
  src: url("fonts/STIXTwoText[wght].woff2") format("woff2 supports variations"),
  url("fonts/STIXTwoText[wght].woff2") format("woff2-variations");
  font-weight: 100 1000;
}

:root {
  --background: #FFFFFF;
  --foreground: #111111;
  --dark-gray: #111111;
  --light-gray: #404040;
  --dark-blue: #23527C;
  --light-blue: #337AB7;
}

body {
  font-family: "Stix";
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #111111;
  padding: 3rem 4rem 1rem;
  background-color: var(--background);
}

/* unvisited link */
a:link {
  color: var(--light-blue);
  text-decoration: none;
}

/* visited link */
a:visited {
  color: var(--light-blue);
  text-decoration: underline;
}

/* mouse over link */
a:hover {
  color: var(--dark-blue);
  text-decoration: underline;
}

/* selected link */
a:active {
  color: var(--light-blue);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1em;
  margin: 0;
  padding: 0;
}


h1 {
  font-size: 28px;
  margin-bottom: .618rem;
}

h2 {
  font-size: 22px;
  font-weight: bold;
  margin-top: 1.618rem;
  margin-bottom: .382rem;
}

h3 {
  font-size: 16px;
  font-weight: normal;
  line-height: 1em;
  margin-bottom: .382rem;
  padding: 0;
}

h1.project {
  text-align: center;
}

p.source-link {
  margin: 0;
  padding: 0;
  margin-bottom: 1rem;
}

.analyses {
  margin-left: 1rem
}

.index-list {
  list-style: none;
  margin: 0;
  margin-bottom: 1rem;
  /* margin: 0 .2rem 1rem 0; */
  padding: 0;
  /* Hack to get second-line indent */
  text-indent: -1.618rem;
  margin-left: 1.618rem;
}

.index-list li {
  margin-bottom: .2rem;
  margin-left: 1rem;
}

/* Large */
.project_page_main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  column-gap: 4rem;
}

/* Medium/small screens */
@media all and (max-width: 900px) {
  .project_page_main {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    flex-direction: column;
  }
}

.project_page_main_column {
}

/* Collapsible sections */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #f1f1f1;
  color: #333;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .618rem;
  padding-bottom: .618rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: "Stix";
  font-size: 16px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  padding: 0;
  padding-top: 1rem;
  padding-right: .618rem;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.collapsible:after {
  content: '+';
  font-size: 18px;
  font-weight: normal;
  /* color: white; */
  float: right;
  margin-left: 0px;
}

.active:after {
  content: "–";
  font-size: 18px;
}