/* Background color for the entire application. */
html {
  background-color: #f8f8f8;
}

/* Navigation bar styles. */
.navbar-container {
  margin-bottom: 10px;
}
.navbar {
  color: #2b3a57;
  font-size: xx-large;
  width: 100%;
  border-bottom: 2px solid #2b3a57;
}
.navbar-path {
  color: #2b3a57;
  font-size: small;
  float: right;
}

/* Index menu card styles. */
.index-welcome-message {
  max-width: 1400px;
  margin: 0 auto;
}

.index-welcome-message-image {
  width: 500px;  /* todo: bump back up to 100% when we get a properly sized image, then drop display block & margin auto */
  display: block;
  margin: auto;
  height: 350px;

  border-width: 1px;
  border-style: solid;
  border-color: #2b3a57;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.index-welcome-message-text-title {
  color: #2b3a57;
  text-align: center;
  font-size: xx-large;
}
.index-welcome-message-text {
  color: #2b3a57;
  text-align: center;
  font-size: medium;
}

.index-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;

  max-width: 1400px;
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  .index-menu {
    margin: 0 auto;
    flex-direction: column;
    width: 325px;
    align-items: center;
  }
}

/* Card which displays elements in a column. */
.index-menu-card {
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin: 10px 10px 10px 10px;
  width: 400px;
  border-color: #2b3a57;
  border-style: solid;
  border-width: 1px;
}
/* The card is clickable so we have the shadow reflect that. */
.index-menu-card:hover {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* On a smaller screen make sure the card gets smaller too. */
@media only screen and (max-width: 500px) {
  .index-menu-card {
    width: 300px;
  }
}
/* Image for the card, restrict the height. */
.index-menu-card-image {
  width: 100%;
  height: 300px;
  flex-grow: 1;
}
/* When the screen gets small, let the image take its own height
   since we are restricting to one card per window anyways.
   Instead, we restrict the width so it fits on the screen. */
@media only screen and (max-width: 500px) {
  .index-menu-card-image {
    min-width: 300px;
    max-width: 300px;
    height: unset;
  }
}

/* These classes cover the styling of the text elements on the
   menu cards. */
.index-menu-text-box {
  color: #2b3a57;
  padding-right: 6px;
  padding-left: 6px;
  flex-grow: 0;
}
.index-menu-title {
  text-align: left;
  font-size: xx-large;
}
.index-menu-subtitle {
  text-align: right;
  font-size: medium;
}


/* World menu card styles. */
.world-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}
/* Under 500px we force only a single item per row. */
@media only screen and (max-width: 500px) {
  .world-menu {
    margin: 0 auto;
    flex-direction: column;
    width: 325px;
    align-items: center;
  }
}

/* Card which displays elements in a column. */
.world-menu-card {
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin: 10px 10px 10px 10px;
  width: 400px;
  border-color: #2b3a57;
  border-style: solid;
  border-width: 1px;
}
/* The card is clickable so we have the shadow reflect that. */
.world-menu-card:hover {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* On a smaller screen make sure the card gets smaller too. */
@media only screen and (max-width: 500px) {
  .world-menu-card {
    width: 300px;
  }
}
/* Image for the card, restrict the height. */
.world-menu-card-image {
  width: 100%;
  height: 300px;
  flex-grow: 1;
}
/* When the screen gets small, let the image take its own height
   since we are restricting to one card per window anyways.
   Instead, we restrict the width so it fits on the screen. */
@media only screen and (max-width: 500px) {
  .world-menu-card-image {
    min-width: 300px;
    max-width: 300px;
    height: unset;
  }
}

/* These classes cover the styling of the text elements on the
   menu cards. */
.world-menu-text-box {
  color: #2b3a57;
  padding-right: 6px;
  padding-left: 6px;
  flex-grow: 0;
}
.world-menu-title {
  text-align: left;
  font-size: xx-large;
}
.world-menu-subtitle {
  text-align: right;
  font-size: medium;
}

/* Region menu card styles. */
.region-menu {
  max-width: 1400px;
  margin: 0 auto;
}
/* Region menu cards are similar to world menu but row oriented. */
.region-menu-card {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  border-color: #2b3a57;
  border-style: solid;
  border-width: 1px;
}
.region-menu-card:hover {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* When the screen gets small enough, transform to a column card. */
@media only screen and (max-width: 700px) {
  .region-menu-card {
    margin: 0 auto;
    flex-direction: column;
    width: 325px;
    align-items: center;
  }
}
.region-menu-card-image {
  min-width: 400px;
  max-width: 400px;
  flex-basis: auto;
  flex-grow: 0;
  margin: 5px;
}
@media only screen and (max-width: 700px) {
  .region-menu-card-image {
    min-width: 300px;
    max-width: 300px;
  }
}
.region-menu-text-box {
  margin: 5px;
  flex-basis: auto;
  flex-grow: 1;
}
@media only screen and (max-width: 700px) {
  .region-menu-text-box {
    max-width: 300px;
  }
}
.region-menu-title {
  color: #2b3a57;
  font-size: xx-large;
}
.region-menu-text {
  padding-top: 5px;
  color: #2b3a57;
}

/* Page Content Styles */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
}
.page-content-header {
  color: #2b3a57;
  font-size: x-large;
  margin-top: 20px;
  margin-bottom: 5px;
}
.page-content-text {
  color: #2b3a57;
}

/* Page Title */
.page-title {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 100%;
  background-color: #2b3a57;
}
.page-title-text-container {
  padding: 10px 10px 10px 10px;
}
.page-title-text {
  color: white;
  font-size: xx-large;
}
.page-content-images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.page-content-image {
  max-width: 100%;
  max-height: 800px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 10px 10px 10px 10px;
}

/* Cards should not decorate links. */
.card-link {
  text-decoration: none;
}

/* Periodically we need a spacer. */
.spacer {
  height: 10px;
}