html{
  /*
  The default html interpertation adds margin and padding to the basic elements
  So it can be logically helpful to remove them from the beginning!
  */
  font-family:-apple-system, 'Helvetica Neue';
  height: 100%;
  margin: 0;
  padding: 0;
}

body{
  font-size: 15px;
  color: black;
  height: 100vh;
  text-align: justify;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.flex-header{
  background-image: url('background_img.png');
  background-attachment: fixed;
  background-size: contain;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.author{
  padding-top: 30px;
  font-family: -apple-system, 'Helvetica Neue';
  font-size: 20px;
  font-weight: 500;
  color: #ebecf0;
}

.instruction{
  font-weight: bold;
  font-size: 20px;
  font-family: 'Lucida Sans Unicode', sans-serif;
  color: #8a8a8a;
  text-align: center;
}

.arrow {
width: 100px;
height: 100px;
transform: rotate(90deg);
padding-top: 10px;
padding-bottom: 50px;
}

.intro-flex{ 
  font-size: 17px;
  font-weight: 400;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
}

#input-gender{
  margin-bottom: 20px;
  font-size: 15px;
  top:30px;
  color:grey;

}

input[type='radio'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:before {
  content:'';
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;    
}
input[type='radio']:checked:before {
  background:#001f3d;
}
#first-part {
  display: flex;
  flex-direction: row;
  font-size: 18px;
  
}
#attention-text{
  text-align: center;
}

#scrolly {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color:white;
  padding: 1rem;
}

#scrolly > * {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
article {
  position: relative;
  padding: 0 2.5rem;
  max-width: 40rem;
}
#first-part .article{
  padding: 0 1rem;
  max-width: 200rem;
  margin-left: 10px;
}

figure{
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  margin: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 0;
}

figure p {
  text-align: center;
  padding: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 8rem;
  font-weight: 900;
  color: #fff;
}

.step {
  margin: 0 auto 2rem auto;
  background-color: white;
  color: #ebecf0;
}
h3{
  margin-top: 0px;
  text-align: center;
}
.step h3{
  margin-top: 0px;
  font-size: 20px;
  color: #ebecf0;
}
.step:last-child {
  margin-bottom: 0;
}

.step.is-active h3{
  color: black;
}

.step.is-active {
  background-color: white;
  color: black;

}
.step text{
  margin-top: 0px;
  font-size: 15px;
  line-height: 25px;
}

#times-arrested{
  margin-left: 0;
  margin-right: 0;
  
  }
#page-break{
  padding: 20px;
  margin-left: 100px;
  margin-right: 100px;
  font-size: 19px;
}

div.tooltip {	
  position: absolute;			
  text-align: center;			
  width: 110px;					
  height: 30px;					
  padding: 2px;				
  font: 10px sans-serif;
  border: 0px;		
  border-radius: 8px;			
  pointer-events: none;			
}

#outro{
  margin-top: 0px;
  margin-left: 150px;
  margin-right: 150px;
  margin-bottom: 30px;
  line-height: 25px;
  font-size: 16px;
}

div.squares_tooltip {
  position: absolute;			
  text-align: center;	
  width: 160px;					
  height: 70px;		
  font: 10px sans-serif;
  border: 0px;		
  border-radius: 8px;			
  pointer-events: none;
  display: block;
}

.legendTitle{
  font-family: -apple-system, 'Helvetica Neue';
  font-size: 12px;
  font-weight: bold;

}

h4{
  margin-top: 30px;
  margin-left: 40px;
  font-size: 20px;
  text-align: left;
}

ul{
  text-align: left;
}

li{
  padding: 10px;
  line-height: 25px;
}

a{
  color: black;
}

final-thanks{
  line-height: 25px;
  text-align: left;
}

footer{
  text-align: center;
  padding: 3px;
  background-color: #ebecf0;
margin-bottom: 50px;
  display: block;
}