/** Jumbotron */

.jumbotron {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.jumbotron > .container {
  margin-top: auto;
  padding-bottom: 2rem;
}

.jumbotron h2 {
  font-size: 1.2rem;
}

/** Page menu */
#jump-to-section {
  padding: 20px 0;
}

#jump-to-section .list-group-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/** Blue background sections */

.blue-bg .no-results {
  color: #fff;
}

/** Avoid painting sections until they come into view */

#needs {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 500px;
}

#basic-interests {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 2000px;
  padding-top: 5rem;
}

#needs {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 850px;
}

#aversions {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1000px;
  padding-top: 5rem;
}

#context {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1300px;
}

#personality {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 2500px;
}

#next {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 592px;
}

/** Colors */
.bright-green>.row svg {
  background: #6cc62e;
}

.pale-green>.row svg {
  background: #89ba8b;
}

.grey>.row svg {
  background: #bdbdbd;
}

.orange>.row svg {
  background: #ff9800;
}

.red>.row svg {
  background: #e52d33;
}

/** Personality */

#personality h3 {
  background: rgba(15, 50, 71, .75);
  border-radius: 15px 15px 0 0;
  font-size: 1.2rem;
  margin-bottom: 30px;
  padding: 15px;
  text-align: center;
}

#personality .row {
  padding: 0 15px;
  position: relative;
}

.personality-factor {
  border: 1px solid rgba(15, 50, 71, .75);
  border-radius: 15px;
  background: #fff;
  margin-bottom: 20px;
}

/** Option sections */

.option-section svg {
  border-radius: 30px;
  fill: #fff;
  height: 40px;
  padding: 3px;
  width: 40px;
}

/** Alert that compatibility reports are different */

#compatibility-reports-alert {
  margin: 0 auto 50px;
  max-width: 600px;
  text-align: left;
}

#compatibility-reports-alert h3 {
  font-size: 1.6rem;
}

#compatibility-reports-alert svg {
  margin-top: -2px;
}

#next h2 {
  padding-bottom: 0;
}

@media only screen and (min-width: 768px) {
  #page-menu {
    margin-top: 20px;
  }

  #user-icon-container {
    margin-top: -130px;
    margin-bottom: -180px;
  }

  #personality h3 {
    text-align: left;
  }
}

@media only screen and (min-width: 1200px) {
  #page-menu {
    margin-top: 50px;
  }

  #user-icon-container {
    margin-top: -100px;
  }
}

@media print {
  #broad-interests {
    padding-top: 40px;
  }

  .jumbotron, #jump-to-section {
    display: none;
  }

  #personality h3 {
    background: rgb(15, 50, 71);
    color: white;
    text-align: left;
  }

  #context {
    margin-top: 50px;
  }

  #context p, #basic-interests p {
    padding-bottom: 10px;
  }

  #context h2, #basic-interests h2 {
    padding-bottom: 10px;
  }

  #context .icon-label-container {
    font-size: .85rem;
  }

  #context .option-section-label {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #aversions, #basic-interests {
    padding-top: 0;
  }

  #next {
    display: none;
  }

  #basic-interests .option-section:nth-of-type(3), #basic-interests .option-section:nth-of-type(5) {
    page-break-before: always;
    margin-top: 80px;
  }

  #personality .personality-factor:nth-of-type(2), #personality .personality-factor:nth-of-type(4) {
    page-break-before: always;
    margin-top: 50px;
  }

  #personality .row p, #personality .row strong {
    font-size: .85rem;
  }
}