/* ===== GLOBAL CONSTANTS ===== */
:root {
  --color-med-purple: #9370db; /* original website background */
  /* Comparing two offsetting colors for the article body */
  /* I think I like lt-purple better */
  --color-pale-lavender: #e2cfea; /* from coolors.co */
  --color-lt-purple: #C5B6E1; /* from Adobe Color */
  /* Colors from colormind.io */
  --color-snow-drift: #FCFBFA; /* light shades */
  --color-amethyst-smoke: #AEA4BD; /* light accent */
  --color-lavender-purple: #997DAB; /* dark accent */
  --color-victoria: #4A4890; /* dark shades */

  --color-gray: #bbb;
  --color-maroon: #750700; /* original website nav link color */
  --color-maroon-logo: #750000; /* color sampled from the logo */

  /* Fonts from the original website */
  --fonts-san-serif: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
  --fonts-serif: Times New Roman, Georgia, Times;
}

/* ===== GENERAL LAYOUT ===== */

body {
  font-family: var(--fonts-san-serif);
  /* To compensate for the navbar */
  margin-top: 50px;
}

.row + .row {
  margin-top: 20px;
}

section {
  padding: 80px 0;
}

section.main-content {
  padding: 40px 0;
}

.section-header {
  text-align: center;
  font-family: var(--fonts-serif);
  font-weight: bold;
  font-size: 28px;
}

section h2 {
  margin: 20px 0 40px;

  font-weight: bold;
}

section h3 {
  margin: 30px 0 10px;
}

a {
  color: var(--color-victoria);
}

a:hover,
a:focus {
  text-decoration: none;
  color: var(--color-snow-drift);
}

hr {
  border: 2px solid var(--color-snow-drift);
  border-radius: 10px;
  margin-left: 15%;
  margin-right: 15%;
}

/* Hack to get a row to have all columns vertically aligned */
.row.vertical-align {
  display: flex;
  align-items: center;
}

/* ===== NAVBAR ===== */

.navbar-brand img.img-responsive {
  height: 100%;
  display: inline-block;
}

/* ===== HERO ===== */

#hero {
  background-image: url('../img/banner.jpg');
  background-color: black;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 35%;

  /* The background image above is 1362px x 605px (~44% aspect ratio) */
  /* This may also be causing problems with iPad Pro in portrait mode, need a max-height */
  height: 44vw;

  /* Make the min-height the viewport - the navbar */
  min-height: calc(100vh - 50px);

  /* TODO: Should I make a max-height for -really- large screens? */
  /* Unfortunately min-height overrides max-height, might use min() on the height instead? */
  /* max-height: 605px; */

  padding: 0;
}

.hero-text {
  color: var(--color-snow-drift);
  text-shadow: 1px 1px var(--color-maroon);
  text-align: center;
}

.hero-text h1 {
  font-family: var(--fonts-serif);
  font-size: 48px;
}

.hero-text .lead {
  font-size: 28px;
}

.hero-text blockquote {
  font-family: var(--fonts-serif);
  font-style: italic;
  border: none;
}

.hero-text blockquote small {
  color: var(--color-amethyst-smoke);
}

#hero-outer-row {
  /* Centering the outer column on the screen */
  /* Force the height of the row to be viewport height - 2x the navbar */
  height: calc(100vh - 50px - 50px);
  display: flex;
  align-items: center;
}

/* At xs screen sizes */
@media (max-width: 768px) {
  /* Move the outer column to the bottom of the screen */
  #hero-outer-row {
    align-items: flex-end;
  }

  /* Center the inner row columns vertically */
  #hero-inner-row {
    display: flex;
    align-items: center;
  }
 
  /* Reduce the size of the hero text */
  .hero-text h1 {
    font-size: 36px;
  }

  .hero-text .lead {
    font-size: 16px;
  }
}

/* ===== RENASCENCE ===== */

#renascence {
  background-color: var(--color-amethyst-smoke);
}

/* ===== ABOUT ===== */

#about {
  background-image: url('../img/aboutbanner.jpeg');
  background-position: -500px 0;
  background-repeat: no-repeat;
  background-color: #191516; /* sampled from the midpoint right side of image */

  color: var(--color-snow-drift);
}

#about a {
  color: var(--color-snow-drift);
}

#about a:hover,
#about a:focus {
  color: var(--color-amethyst-smoke);
  text-decoration: none;
}

.contact {
  text-align: center;
}

.contact i {
  background-color: var(--color-snow-drift);
  color: #191516;
  font-size: 24px;
  padding: 10px;
  border-radius: 50px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  margin: 0 5px 20px 0;
  padding: 0;
}

#contact-info a:hover i,
#contact-info a:focus i {
  background-color: var(--color-amethyst-smoke);
}

.contact p {
  /* padding-top: 10px; */
  display: inline-block;
}

@media (max-width: 767px) {
  #about-txt {
    background-color: rgba(252, 251, 250, .7); /* var(--color-snow-drift); */
    color: var(--color-victoria);
    border-radius: 6px;
    padding: 6px;
  }

  #about-txt a {
    color: var(--color-victoria);
  }
}

/* ===== SIGNUP ===== */

#signup {
  background-color: var(--color-amethyst-smoke);
}

#signup .btn.btn-success {
  background-color: var(--color-victoria);
  color: var(--color-snow-drift);
}

/* ===== FOOTER ===== */

footer {
  background-color: #222;
  border-color: #080808;
  color: var(--color-snow-drift);
  padding: 20px 0 10px;
  font-size: 12px;
}

footer img {
  height: 20px;
}

footer a {
  color: var(--color-snow-drift);
}

footer a.signup-link {
  color: var(--color-lavender-purple);
}

footer a:hover,
footer a:focus {
  color: var(--color-amethyst-smoke);
}

/* ===== MODAL ===== */

#myModal .modal-content {
  background-color: var(--color-amethyst-smoke);
}

#myModal .modal-body {
  text-align: center;
}

#myModal .modal-body h1 {
  font-family: var(--fonts-serif);
  font-weight: bold;
}

#myModal img {
  border-radius: 6px;
  /* max-height: 25vh; */
  margin: 0 auto;
}

@media (max-height: 991px) {
  #myModal .modal-body h1 {
    font-size: 24px;
  }
  #myModal .modal-body p.lead {
    font-size: 14px;
  }
}