@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Dosis:bold);

body {
  background-color: #FF9376;
}

#results {
  background-color: #8DAAA6;
}

/* here are the text styles used in this website */

.large-text {
  font-family: 'Dosis', Georgia, Times, serif;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  font-feature-settings: 'zero' on;
  color: #FEF2EA;
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.mid-text {
  font-family: 'Dosis', Georgia, Times, serif;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 36px;
  text-align: center;
  font-feature-settings: 'zero' on;
  margin-block-start: 0px;
  margin-block-end: 0px;

  color: #FEF2EA;
}

.small-text {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  font-feature-settings: 'zero' on;
  margin-block-start: 0px;
  margin-block-end: 0px;
  text-align: center;

  color: #FEF2EA;
}

/* here are the positionings */

/* front page */
#main-title {
  position: absolute;
  width: 147px;
  height: 72px;
  left: 56px;
  top: 92px;
}

#home-description {
  position: absolute;
width: 263px;
height: 244px;
left: 56px;
top: 212px;
}

#quiz-start {
  position: absolute;
width: 239px;
height: 29px;
left: 68px;
top: 597px;

}

#skip {
  position: absolute;
width: 107px;
height: 51px;
left: 134px;
top: 699px;
}

/* quiz pages 1-3 */
#slider {
  position: absolute;
  width: 300px;
  height: 44px;
  left: 37px;
  top: 439px;
}
.status {
  position: absolute;
  width: 140px;
  height: 15px;
  left: 117px;
  top: 63px;
}


#question {
  position: absolute;
width: 312px;
height: 223px;
left: 33px;
top: 124px;
}

.previous-arrow {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 20px;
  top: 592px;
}

.forward-arrow{
  position: absolute;
  width: 60px;
  height: 60px;
  left: 295px;
  top: 592px;
}

.quit {
  position: absolute;
width: 107px;
height: 51px;
left: 134px;
top: 703px;
}

.answer {
  position: absolute;
  width: 332px;
  height: 30px;
  left: 21px;
  top: 445px;
  font-size: 24px;

}

#see-results {
  position: absolute;
  width: 194px;
  height: 35px;
  left: 91px;
  top: 607px;

}

/*results page*/
#results-final{
  position: absolute;
width: 302px;
height: 291px;
left: 33px;
top: 101px;
}

#next {
  position: absolute;
  width: 107px;
  height: 51px;
  left: 134px;
  top: 703px;
}

/* next steps page */

#help-title {
  position: absolute;
  width: 272px;
  height: 99px;
  left: 51px;
  top: 88px;
  text-align: center;
}

#women {
  position: absolute;
  width: 128px;
  height: 128px;
  left: 205px;
  top: 322px;
}

#group {
  position: absolute;
  width: 128px;
  height: 128px;
  left: 36px;
  top: 463px;
}

#help {
  position: absolute;
  width: 128px;
  height: 128px;
  left: 207px;
  top: 677px;
transform: rotate(-90deg);
}

#legal {
  position: absolute;
  width: 128px;
  height: 128px;
  left: 26px;
  top: 813px;
}

#discuss-title {
  position: absolute;
  width: 135px;
  height: 35px;
  left: 21px;
  top: 298px;
}

#practical-help-title {
  position: absolute;
  width: 230px;
  height: 36px;
  left: 21px;
  top: 635px;
}

.content {
  background: #FEF2EA;
  border-radius: 20px;
}

#turvaverkko-box {
  position: absolute;
  width: 140px;
  height: 85px;
  left: 199px;
  top: 344px;
}

#peer-support-box {
  position: absolute;
  width: 140px;
  height: 85px;
  left: 26px;
  top: 485px;
}

#practical-help-box {
  position: absolute;
  width: 140px;
  height: 85px;
  left: 200px;
  top: 699px;
}

#legal-advice-box {
  position: absolute;
  width: 140px;
  height: 85px;
  left: 20px;
  top: 836px;
}

#turvaverkko-text {
  position: absolute;
  width: 137px;
  height: 50px;
  left: 32px;
  top: 361px;
}

#peer-support-text {
  position: absolute;
  width: 123px;
  height: 54px;
  left: 208px;
  top: 500px;
}

#practical-help-text {
  position: absolute;
  width: 135px;
  height: 53px;
  left: 26px;
  top: 715px;
}

#legal-advice-text {
  position: absolute;
  width: 131px;
  height: 62px;
  left: 200px;
  top: 847px;
}
/* slider style is defined here */

.slidecontainer {
  position: absolute;
width: 300px;
height: 44px;
left: 37px;
top: 509px;
}


/* The slider itself */

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #FEF2EA;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #8DAAA6;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #8DAAA6;
  cursor: pointer;
}