/* Hero image*/
.hero_image {
    width:55em;
    height:35em;
    
    display:block;
    margin:2.5% auto 0.5% auto;
    border-radius:16px;
   
}

 /* story title*/
.hero_story_title {
   color: black;
   text-align: center;
   font-family: sans-serif;
   font-size: 200%;

  
}

.story_categories , .story_level , .story_length {
    text-align: center;
    margin: 1% 0 2%;
}

.story_categories a, .story_level a, .story_length a {
    color: #555;
    font-size: 90%;
    text-decoration: none;
    margin: 0 8px;
}

.hero_describe{
    text-align: center;
    font-size: 110%;
    color: rgb(64, 64, 64);
}



 /* audio*/

.audioelement{

    width: 75%;
    display: block;
    margin: 0 auto;
    margin-bottom: 5%;
    margin-top: 5%;

}

 /* story p*/

 .story_section_title{
color: black;
padding-left: 5%;
padding-right: 5%;
margin-top: 3%;

font-family: sans-serif;
font-size: 250%;

}

.story_categories{
    font-size: 150%;
}
.story_level{
    font-size: 150%;
}
.story_length{
    font-size: 150%;
}

.exercise_format_title{

color: black;
margin-left: 8%;
margin-right: 8%;

font-family: sans-serif;
font-size: 200%;

}

.story p{
    
    padding-left: 5%;
    padding-right: 5%;
    font-size: 200%;
    color: black;

}

 /* question and answer*/

 section.story_exercises {
    background-color: papayawhip;
    
}

h2.exercise_title.story_section_title {
    background-color: tan;
}



.question_item{
    padding-left: 4%;
    padding-right: 4%;
    font-size: 100%;
    color: black;

}

pre.question_text {
    font-family: serif;
    font-size: 200%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}




.question_text {
    font-size: 150%;
    color: #222;
    margin: 0;
    margin-top: 2%;
    margin-bottom: 1%;
    
}

.show_answer_button {
    color: #15803d;
    cursor: pointer;
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 4%;
    padding-right: 4%;
    margin-top: 1%;
    margin-bottom: 10%;
    font-size: 175%;
    
}

.answer {
    color: #333;
    color: #15803d;
    font-size: 150%;
     margin-left: 5%;
    display: none;
    margin-top: 2%;
    margin-bottom: 2%;
    
}
.answer_item{
   
}

.toggle_answer:checked ~ .answer {
    display: block;
}


@media (min-width: 767px) and (max-width: 1024px) {



.story_section_title{

font-size: 350%;

}


.exercise_format_title{

font-size: 300%;

}

.story p{
    

    font-size: 250%;
  

}

 /* question and answer*/

.question_item{
   
    font-size: 200%;


}

pre.question_text {
  
    font-size: 300%;

}




.question_text {
    font-size: 250%;
  
    
}

.show_answer_button {

    font-size: 190%;
    
}

.answer {

    font-size: 250%;
  
    
}










    
}