header.alt-bg {
  background: #5c687d;
  background: transparent linear-gradient(#5c687d 70%, transparent 30%);
  /* background: transparent url("/static/images/intro-background-fit.svg") bottom left / 100% 100% no-repeat; */
  background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEyNTAiIHZpZXdCb3g9IjAgMCAxOTIwIDEyNTAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICBzdmd7YmFja2dyb3VuZDojZmZmfQ0KICAgICAgLmNscy0xe2ZpbGw6I2E4Y2FiYTtmaWxsLXJ1bGU6ZXZlbm9kZDtvcGFjaXR5Oi4wNX0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTS0yMzEgODloMjA4OHY2NTFsLTIwODggMzYwVjg5eiIvPg0KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0tNDcwIDIzOWgyMDg4djY1MWwtMjA4OCAzNjBWMjM5eiIvPg0KICA8cGF0aCBkPSJNLTE0NC0xOWgyMDg4djY1MUwtMTQ0IDk5MlYtMTl6IiBmaWxsPSIjMWEyYjQ5IiBvcGFjaXR5PSIuNzUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0tNDcwLTgzaDIwODh2NjUxTC00NzAgOTI4Vi04M3oiLz4NCiAgPHBhdGggZD0iTS0yMzItNDhoMjA4OHY2NTFMLTIzMiA5NjNWLTQ4eiIgZmlsbD0iI2YyZjJmMiIgb3BhY2l0eT0iLjA1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4NCjwvc3ZnPg0K");
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 900px;
  padding-bottom: 52.94em;
  margin-bottom: -900px;
  margin-bottom: -52.94em;
}

#maincontent {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    '. intro .'
    '. chapter .'
    'contributors contributors contributors'
    '. methodology .';
  /* 80em is same as the .container width */
  grid-template-columns: 1fr minmax(auto, 80em) 1fr;
}

.featured-chapter,
.methodology-container {
  display: flex;
  justify-content: center;
  margin-top: 58px;
}

.intro h1 {
  letter-spacing: 5px;
}

.intro h2 {
  font-weight: 300;
  font-size: 30px;
  font-size: 1.875rem;
}

.intro .coming-soon {
  font-weight: 700;
  font-size: 45px;
  font-size: 2.8125rem;
}

p {
  margin-bottom: 40px;
}

.intro-container {
  color: #fff;
  grid-area: intro;
  -ms-grid-row: 1;
  -ms-grid-columns: 2fr 1fr;
  display: -ms-grid;
  display: grid;
  grid-template-areas: 'intro image';
  grid-gap: 2rem;
  justify-content: space-between;
}

.intro {
  -ms-grid-column: 1;
  grid-area: intro;
  width: 100%;
  max-width: 550px;
  max-width: 34.375rem;
  /* match the .container side padding */
  padding-left: 20px;
}

.intro-year {
  -ms-grid-row: 1;
  grid-area: year;
  display: none;
  font-family: 'Poppins', sans-serif;
}

.intro-image-wrapper {
  -ms-grid-column: 2;
  grid-area: image;
  max-height: 485px;
  max-height: 30.3125rem;
  max-width: 485px;
  max-width: 30.3125rem;
}

.intro-image-wrapper svg {
  position: relative;
  top: 25.5px;
  fill: #f7f779;
  font-size: 16px;
}

.intro-image-wrapper img {
  position: relative;
}

/* IE11 hack */
@media all and (-ms-high-contrast: none) {
  .intro-image-wrapper svg {
    height: 180px;
  }
}

.intro-image-wrapper text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.intro .btn {
  border-color: #f7f779;
  background-color: #f7f779;
  color: #1a2b49;
}

.intro .btn:hover,
.intro .btn:focus {
  background-color: transparent;
  color: #f7f779;
}

/* Featured Chapter */
.featured-chapter {
  -ms-grid-row: 2;
  grid-area: chapter;
  padding: 120px 0;
  padding: 7.5rem 0;
}

.featured-chapter h1 {
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: bold;
}

.featured-chapter h2 {
  margin-top: 0;
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold;
}

.featured-chapter-content {
  width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.featured-chapter-content code {
  white-space: nowrap;
}

.featured-chapter-content > div,
.featured-chapter-content button {
  margin-bottom: 40px;
}

.featured-chapter-content-data {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}

.featured-chapter-content-data div {
  padding: 0 3px;
}

.featured-chapter-content-data-item div:first-of-type {
  font-size: 2rem;
  font-weight: bold;
  padding-bottom: 0.5rem;
}

/* Contributors */
.contributors-container {
  padding-left: 180px;
  padding-left: min(180px, 15vw);
  -ms-grid-row: 3;
  grid-area: contributors;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDIiIGhlaWdodD0iMzMwIiB2aWV3Qm94PSIwIDAgMzAyIDMzMCI+CiAgPHBhdGggb3BhY2l0eT0iLjMiIGZpbGw9IiNmN2Y3NzkiIGQ9Ik0tMTcxMiAyNTdIMjI1djczaC0xOTM3eiIvPgogIDxwYXRoIG9wYWNpdHk9Ii45IiBmaWxsPSIjYThjYWJhIiBkPSJNLTE2NDAgMTM2SDI5N3Y3M2gtMTkzN3oiLz4KICA8cGF0aCBvcGFjaXR5PSIuOSIgZmlsbD0iI2Y3Zjc3OSIgZD0iTS0xNjc3IDE2NkgyNjB2NzNoLTE5Mzd6Ii8+CiAgPHBhdGggb3BhY2l0eT0iLjkiIGZpbGw9IiM0YTMyNDQiIGQ9Ik0tMTc3MiAzSDE2NXY3M2gtMTkzN3oiLz4KPC9zdmc+");
  background-position: -150px center;
  background-repeat: no-repeat;
}

.contributors-container .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.people {
  position: relative;
  height: 400px;
}

.people .character {
  width: 140px;
  height: auto;
}

#character-markup {
  position: absolute;
  top: -210px;
  right: 100px;
}

#character-star {
  position: absolute;
  bottom: 0;
  left: 200px;
}

#character-hat {
  position: absolute;
  bottom: 0;
  right: 0;
}

.people-number {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  font-size: 600px;
  font-size: min(600px, 35vw);
  font-weight: bold;
  pointer-events: none;
  height: 100%;
  width: auto;
  line-height: 400px;
}

/* Methodology */
.methodology-container {
  -ms-grid-row: 4;
  grid-area: methodology;
  padding: 0 min(60px, 5vw);
}

.methodology {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.methodology-data {
  display: flex;
  margin: 20px 0 30px 0;
  margin: min(20px, 5vw) 0 min(30px, 8vw) 0;
  padding: 20px 30px;
  padding: min(20px, 5vw) min(30px, 8vw);
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #f6f7f9;
  flex-wrap: wrap;
}

.websites-tested {
  display: flex;
  align-items: center;
  margin-right: 40px;
  text-transform: uppercase;
}

.data-processed {
  display: flex;
  align-items: center;
  margin-left: 40px;
  text-transform: uppercase;
}

.websites-tested div,
.data-processed div {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  margin: 10px 10px;
  margin: 0.714em 0.625rem;
}

.websites-tested div:last-of-type,
.data-processed div:last-of-type {
  font-size: 3rem;
  line-height: 3rem;
}

.methodology-info {
  width: 700px;
  margin-bottom: 30px;
}

.methodology button {
  background: none;
  border: 1px solid #1b2c4a;
  color: #1b2c4a;
  margin-bottom: 30px;
}

.methodology-characters {
  margin-bottom: -3px;
  width: 650px;
  max-width: 100%;
  height: auto;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(70% - 1px), rgb(192, 192, 192) calc(50%), rgba(0, 0, 0, 0) calc(70% + 1px));
}

@media (max-width: 87.5em) and (min-width: 56.26em) {
  .people {
    height: auto;
  }

  .people-number {
    font-size: 300px;
    font-size: min(300px, 25vw);
    overflow: visible;
    line-height: 400px;
    top: 50px;
    position: relative;
  }

  .people .character {
    width: 8vw;
    height: auto;
  }

  #character-markup {
    position: absolute;
    top: auto;
    right: 10%;
    bottom: 65%;
  }

  #character-star {
    position: absolute;
    bottom: 0;
    left: 30%;
  }

  #character-hat {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

@media (max-width: 56.25em) and (min-width: 37.51em) {
  header.alt-bg {
    padding-bottom: 1800px;
    padding-bottom: 105.88em;
    margin-bottom: -1800px;
    margin-bottom: -105.88em;
  }

  header::after {
    bottom: 450px;
  }

  .intro-container {
    grid-template-areas:
      'year'
      'intro'
      'image';
    justify-items: center;
    justify-content: center;
    padding: 40px 60px;
    padding: min(40px, 3vw) min(60px, 4vw);
  }

  .intro {
    margin: 0;
    width: auto;
    text-align: center;
  }

  .featured-chapter,
  .featured-chapter-content-data {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contributors-container {
    padding: 40px 60px;
  }

  .rectangles {
    display: none;
  }

  .contributors {
    width: initial;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contributors div {
    margin-left: 20px;
    margin-right: 20px;
  }

  .people {
    height: auto;
  }

  .people-number {
    font-size: 300px;
    font-size: min(300px, 25vw);
    overflow: visible;
    line-height: 400px;
    top: 50px;
    position: relative;
  }

  #character-markup {
    width: 80px;
    height: auto;
    top: 25px;
    right: 50px;
  }

  #character-star {
    width: 80px;
    height: auto;
    bottom: 60px;
    left: 150px;
  }

  #character-hat {
    width: 80px;
    height: auto;
    bottom: 60px;
  }

  .methodology-data {
    flex-direction: column;
  }

  .methodology-info {
    width: initial;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
  }

  .methodology-characters {
    width: 350px;
  }

  .websites-tested,
  .data-processed {
    flex-direction: column;
    margin: 0;
  }

  .websites-tested div:last-of-type,
  .data-processed div:last-of-type {
    font-size: 5rem;
    line-height: 5rem;
  }
}

@media (max-width: 56.25em) {
  .intro-year {
    display: block;
    color: #f7f779;
    font-size: 190px;
    font-size: min(190px, 30vw);
    line-height: 1;
    font-weight: 700;
  }

  .intro-image-wrapper {
    margin: 3rem 0;
    max-width: 100vw;
  }

  .intro-image-wrapper svg {
    display: none;
  }

  .intro {
    /* reset the .container side padding */
    padding-left: 0;
  }

  .contributors-container {
    background-image: none;
    position: relative;
  }

  .contributors-container .container {
    flex-direction: column;
  }
}

@media (max-width: 37.5em) {
  header.alt-bg {
    background-size: cover;
    padding-bottom: 1650px;
    padding-bottom: 103.125em;
    margin-bottom: -1650px;
    margin-bottom: -103.125em;
  }

  header::after {
    bottom: 200px;
  }

  header .container,
  footer .container {
    padding-left: 20px;
    padding-left: min(20px, 5vw);
    padding-right: 20px;
    padding-right: min(20px, 5vw);
  }

  #maincontent {
    grid-template-columns: 1fr minmax(auto, 100%) 1fr;
  }

  .intro-container {
    grid-template-areas:
      'year'
      'intro'
      'image';
    justify-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 1100px;
  }

  .intro {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .intro p {
    margin-left: 20px;
    margin-left: min(20px, 5vw);
    margin-right: 20px;
    margin-right: min(20px, 5vw);
  }

  .intro button {
    margin-bottom: 20px;
  }

  .intro-image-container {
    display: flex;
    justify-content: center;
  }

  /* Featured Chapter */
  .featured-chapter,
  .featured-chapter-content-data {
    align-items: center;
  }

  .featured-chapter h1 {
    font-size: 2rem;
  }

  .featured-chapter div {
    margin-left: 20px;
    margin-left: min(20px, 5vw);
    margin-right: 20px;
    margin-right: min(20px, 5vw);
  }

  .featured-chapter-content {
    width: auto;
  }

  .featured-chapter-content-data {
    grid-template-columns: 1fr;
  }

  .featured-chapter-content-data-item {
    margin: 10px;
  }

  /* Contributors */
  .contributors-container {
    padding: 0 60px 340px;
    padding: 0 min(60px, 5vw) 21.25rem; /* constraint side padding for browsers that zoom it */
  }

  .rectangles {
    display: none;
  }

  .contributors {
    width: initial;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contributors div {
    margin-left: 20px;
    margin-left: min(20px, 5vw);
    margin-right: 20px;
    margin-right: min (20px, 5vw);
  }

  .people {
    position: absolute;
    bottom: 0;
    height: auto;
  }

  .people-number {
    font-size: 220px;
    font-size: min(220px, 59vw);
    line-height: 220px;
    overflow: visible;
    top: 40px;
    top: min(40px, 40vw);
    position: relative;
  }

  .people .character {
    width: 80px;
    width: min(80px, 30vw);
  }

  #character-markup {
    top: -55px;
    right: 60px;
  }

  #character-star {
    bottom: -20px;
    left: 130px;
    left: min(130px, 35vw);
  }

  #character-hat {
    right: 0;
    bottom: -15px;
  }

  /* Methodology */
  .methodology-data {
    flex-direction: column;
  }

  .methodology-info {
    width: initial;
    margin-left: 20px;
    margin-left: min(20px, 5vw);
    margin-right: 20px;
    margin-right: min(20px, 5vw);
    text-align: center;
  }

  .methodology-characters {
    margin-top: 20px;
    width: 350px;
  }

  .websites-tested,
  .data-processed {
    flex-direction: column;
    margin: 0;
  }
}