html {
  font-size: .9rem;
  font-family: 'Castoro Titling', cursive;
}


/* Header */

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 50px;
  position: relative;
}

h1 {
  font-size: 1.75em;
  font-weight: 400;
  letter-spacing: 10px;
}

h1 a {
  color: black;
  text-decoration: none;
}

#nav-links a {
  font-size: 1rem;
  margin-right: 20px;
  text-decoration: none;
  color: black;
}

  /* Content */

.main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* 100% of the viewport height */
    padding-top: 1rem;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 2rem;
  }
  
  .content-container {
    display: flex;
    flex-direction: column;
    height: 95%; /* 80% of the parent element's height */
    overflow-y: scroll; /* Add a vertical scroll to the container */
    -ms-overflow-style: none; /* for Internet Explorer and Edge */
  }
  
  .content-container:focus {
    background-color: #f1f1f1;

}
  .content-container::-webkit-scrollbar {
    display: none;
    width: 0.2em;
    background-color: transparent; /* for Chrome, Safari, and Opera */
  }
  
  .content-item {
    flex: 1;
    padding: 1rem;
    padding-bottom: 5rem;
    text-align: center;
  }


  img {
    max-width: 80%;
    height: auto;/*image resolution for window size */
  } 

  /* Mobile Compatible? */

  @media only screen and (max-width: 767px) {
    .main-content {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  
    .content-item {
      padding: 1rem;
    }
  }