* {
        box-sizing: border-box;
      }

      /* Style the body */
      body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
      }

      /* Header/logo Title */
      .header {
        padding: 60px;
        text-align: center;
        color: #333;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0)
          ),
          url("/assets/img/backgd-map.png");
        background-size: cover;
        /* align the content vertically */
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: center;
      }
      .header h1 {
        font-family: "Squada One", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 5em;
        text-align: left;
        margin: 0;
      }
      .header .subheading {
        margin-top: 0;
        font-style: italic;
      }

      /* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
      .navbar {
        overflow: hidden;
        background-color: #666;
        position: sticky;
        /* position: -webkit-sticky; */
        top: 0;
      }

      /* Style the navigation bar links */
      .navbar a {
        font-family: "squada one", sans-serif;
        font-size: 1.5em;
        font-weight: 200;
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 20px;
        text-decoration: none;
      }

      /* Right-aligned link */
      .navbar a.right {
        float: right;
      }

      /* Change color on hover */
      .navbar a:hover {
        background-color: #ddd;
        color: black;
      }

      /* Active/current link */
      /* .navbar a.active {
        background-color: #666;
        color: white;
      } */

      /* Column container */
      .row {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
      }

      /* Create two unequal columns that sits next to each other */
      /* Sidebar/left column */
      .side {
        -ms-flex: 30%; /* IE10 */
        flex: 30%;
        background-color: #f1f1f1;
        padding: 20px;
      }
      .side h2 {
        font-family: "Squada One", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2em;
        margin-top: 0;
        font-weight: 200;
        margin-bottom: 10px;
      }

      .side h3 {
        margin-top: 0;
        font-weight: 200;
        font-size: 1em;
        margin-bottom: 10px;
      }

      .side p {
        font-style: italic;
        font-size: 0.75em;
      }
      .side .motm {
        width: 100%;
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      }

      .side .motm img {
        width: 100%;
        border-radius: 5px;
      }

      /* Main column */
      .main {
        -ms-flex: 70%; /* IE10 */
        flex: 70%;
        background-color: white;
        padding: 20px;
        line-height: 1.5em;
      }
      .main h2 {
        font-family: "Squada One", sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 3em;
        margin-top: 20px;
        font-weight: 200;
        /* font-size: 1.5em; */
        margin-bottom: 10px;
        line-height: normal;
      }
      .main .topic {
        font-weight: 600;
      }
      .main .byline {
        font-style: italic;
        font-size: 0.75em;
      }
      /* join */
      .join {
        padding: 20px;
        text-align: center;
        background: #ddd;
      }
      .join h2 {
        font-family: "Squada One", sans-serif;
        font-weight: 400;
        font-size: 3em;
        font-style: normal;
        margin-top: 0;
        font-weight: 200;
        /* font-size: 1.5em; */
        margin-bottom: 10px;
      }
      .join .logos {
        display: flex;
        /* column */
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
      }
      .join img {
        /* padding: 20px; */
        max-width: 150px;
      }
      .about {
        overflow: hidden;
        background-color: #333;
        padding: 60px;
        margin: 0;
        top: 0;
        color: white;
        text-align: center;
      }
      .about h2 {
        font-family: "Squada One", sans-serif;
        font-weight: 400;
        font-size: 3em;
        font-style: normal;
        margin-top: 0;
        font-weight: 200;
        /* font-size: 1.5em; */
        margin-bottom: 10px;
      }

      h2#past-meetings {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
        text-decoration: underline;
      }

      .well {
        background: #f1f1f1;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        margin: 20px 0;
        padding: 1rem 2rem;
      }

      /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 700px) {
        .row {
          flex-direction: column;
        }
        .join .logos {
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      }

      /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
      @media screen and (max-width: 400px) {
        .navbar a {
          float: none;
          width: 100%;
        }
      }