@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  font-family: "Roboto", sans-serif;
  --primary-color: rgba(250, 249, 246, 0.7);
  --secondary-color-dark-dim: rgba(56, 75, 75, 0.2);
}
.header-bar {
  background-color: #292929;
  opacity: 0.95;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.page {
  display: block;
  flex: 1;
  width: 80%;
  height: auto;
  margin: 0.25rem auto 0 auto;
}

footer {
  text-algin: center;
  padding: 1rem;
}
/* Wrapper for the page */
.page-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allows the content to grow if needed */
}

/* Main content area */
.page {
  flex-grow: 1; /* Pushes the footer to the bottom when content is short */
}

.page-intro-section {
  padding-top: 2rem;
  text-align: center;

  h1 {
    padding-top: 1rem;
    padding-bottom: 3rem;
  }
}
.entities-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .entity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h2 {
      font-weight: 500;
      font-size: 1rem;
    }
  }
}