:root {
  --pink: #f0abf1;
  --black: #2b2819;
  --red: #f95936;
  --blue: #62c2fe;
  --white: #fcfcf9;
}

.header {
  padding-top: 30px;
  padding-bottom: 30px;
    grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  text-decoration: none;
  display: flex;
  z-index: 10;
  height:50px;
}

.footer {
  padding: 30px;
  text-decoration: none;
  display: flex;
  z-index: 10;
      grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.intro,
.quiz,
.results,
.capture {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
  z-index:999 !important;
  width:767px;
}

  .intro { padding-bottom:20%; }


html, body {  background:#342C1A;  }

body {
  color: #fcfcf9;
  text-align: center;
  font-family: forma-djr-text, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;

}

.font--xlarge { font-size:3em; line-height:1em; }
.font--large { font-size:2em; line-height:1em; }
.font--med { font-size:20px; line-height:1em; }
.font--small { font-size:14px; line-height:1em;  }

/* Configure once */
:root{
  /* swap this to your asset */
  --bg-img: url("/images/bg-3.webp");
  --bg-fallback: #000;               /* shows where the image doesn't cover */
}



.title {
  font-family: azo-sans-uber, sans-serif;
}
.subtitle { }

.quiz__q {

}

.quiz__a {
  background-color: var(--pink);
  color: var(--black);
  border-radius: 10px;
  padding: 20px 10px;
  font-family: forma-djr-text, sans-serif;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
}

.quiz__a:hover {
  background-color: var(--red);
}

.quiz__a.quiz__a--selected {
  background-color: var(--red);
}

.quiz__a.quiz__a--correct {
  background-color: #a8fd80 !important;
}

.button {
  color: #fcfcf9;
  text-transform: uppercase;
  background-color: var(--blue);
  border-radius: 10px;
  padding: 20px 10px;
  font-family: azo-sans-uber, sans-serif;
  font-size: 2em;
  text-decoration: none;
}

.button:hover {
  background-color: var(--pink);
}

.quiz__buttons {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  display: flex;
  z-index: 999;
}

.footer__link, .header__link {
  color: var(--white);
  font-size: 1em;
  text-decoration: none;
}

.footer__link:hover {
  color: var(--black);
}

.header__link:hover {
  color: var(--pink);
}

.content {
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  position: relative;
  align-content: center;
  justify-content: space-between;
  min-height: 100dvh;
  background-image: var(--bg-img);
  background-repeat: repeat-x;       /* your requirement */
  background-position: bottom center;
  background-size:cover;
  align-items: center;
      background-attachment: fixed;
}

.bg-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* pin image to bottom */
  z-index:1;
      margin: 0 auto;
    max-width: 1000px;
}

.bg-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fade + slide down when leaving */
.bg-enter-from,
.bg-leave-to {
  opacity: 0;
  transform: translateY(500px);
}
.bg-enter-to,
.bg-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.bg-enter-active,
.bg-leave-active {
  transition: opacity 2s ease, transform 1s ease;
}





.results__buttons {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  display: flex;
}

.results__buttons .button { background-color: var(--red); }
.results__buttons .button:hover { background-color: var(--pink); }

.results__image {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  border-radius: 20px;
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.quiz__image--wrapper {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-position: 50% 0;
  background-size: cover;
  border-radius: 20px;
  flex-flow: column;
  padding: 73% 40px 40px;
  display: flex;
  overflow: hidden;
  margin-top: 20px;
}

.form__button {
  background-color: var(--blue);
  color: var(--white);
  border-radius: 10px;
  padding: 20px 10px;
}

.form__button:hover {
  background-color: var(--pink);
}

.form__input {
  background-color: var(--black);
  color: var(--blue);
  border: 0 solid #000;
  border-radius: 10px;
  height: auto;
  margin-bottom: 0;
  padding: 20px;
  font-size: 1em;
  font-weight: 700;
  line-height: 1em;
}

.form {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  display: flex;
}

@media screen and (max-width: 1028px) {

   .intro { padding-bottom:30%; } 
  .bg-image { max-width:800px; }
  
}

@media screen and (max-width: 767px) {
  .footer {

    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .intro,
  .quiz,
  .results,
  .capture {
    padding-top: 20px;
    padding-bottom:20px;
    width:100%;
  }
  
  
  
  .quiz { min-height:750px; }
  
  
  .intro { padding-bottom:100px; }
  

  .content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .quiz__image--wrapper {
    padding-top:80%;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  

  body { font-size:18px; }
  .title { font-size:2em; }
  .button { font-size:1.2em; }
  .quiz__q { font-size:1.2em; }
  
  
  

.font--med { font-size:16px; line-height:1em; }

  
}


@media screen and (max-width: 479px) {

  
}