body  {
    
   


 margin:5vw;
    margin-top: 5vh;
    margin-bottom: 5vh;



    padding:1em;
    color:#000;
    background:#fbfcfd;

    }







 #wrap {
    max-width: 1000px;
    margin: 0 auto;
}

#main {
    max-width: 900px; /* Or 100%, depending on your design */
    padding: 1em;
    background: #ffffff;
}

   

hr        {         width:85%               }




*, *::before, *::after {
  box-sizing: border-box;
}







    .blue-link-button {
        background-color: #55c2da; /* Sets the background color to #55c2da */
        color: black; /* Sets the text color to black */
        border: none; /* Removes the default border */
        text-decoration: underline; /* Removes the underline to make it look more                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  like a button */
        padding: 8px 18px; /* Adds some padding to make the button bigger */
        font-size: 18px; /* Increases the font size */
        cursor: pointer; /* Changes the cursor to a pointer on hover */
        border-radius: 4px; /* Optional: adds rounded corners to the button */
    }

    /* Optional: Add styles for when the button is hovered */
    .blue-link-button:hover {
        background-color: #47b9d1; /* Optionally darkens the color on hover for a                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     visual effect */
    }



h1    { 
	font-family: Arial, Helvetica, Verdana, sans-serif;     
	font-size: 2em ;
	text-align: center;      }



h2    {      
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 1.8em ;      
	text-align: center;       }



h3    {    
	font-family: Arial, Helvetica, Verdana, sans-serif;  
	font-size: 1.3em ;        
					}




p     {      font-size: 1.2em ;         
	     font-family: Arial, Helvetica, Verdana, sans-serif;
	    

		  }

 



/* normal unvisited link */
a:link      { 
	text-decoration:none;  
	color: #0000FF    
	
 }



/* mouse over link */
a:hover {
  color: #0000FF;
  text-decoration: underline;
}



/* selected link the moment that it is clicked */
a:active {
  color: #EE0000;
}


        
a:visited {
   color: blue; /* Set this to the same color as your unvisited links */
  }
   





#reading

p  {        font-size : 1.2em;       
	    line-height:1.4; 

			   }


.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 80%; /* Adjust this value as needed */
}





#ulcenter
ul {

   
  font-family: Arial, Helvetica, Verdana, sans-serif;

  list-style-type: none;

  font-size: 1.3em ;
  line-height:1.7;
 
  padding: 1em;
  margin: 4vw;


margin: 2vw auto 2vw auto;
 text-align: center;

}




#backtop
{     text-align: center;     
	 font-size: 1.17em ;
	font-family: Arial, Helvetica, Verdana, sans-serif;
    }


#mainpage
{     text-align: center;     
	 font-size: 1em ;
	font-family: Arial, Helvetica, Verdana, sans-serif;
    }





.submit
 {     text-align: center;    
	font-size: 1.17em ;


     }




.flagquiz
ul {

  
  font-family: Arial, Helvetica, Verdana, sans-serif;
      
  list-style-type: none;

  font-size: 1.3em ;

  line-height:1.7;

  background-color: #ffffff;
  width: 500px;

 border-radius: 10px;

  padding: 40px;
  margin: 20px;

   


}




@media screen and (max-width: 1920px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }



.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 14%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.3em;       
	    line-height:1.7; 

			   }





#quiztext       

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz1

p  {        font-size : 1.3em;         
	    line-height:1.7;        }

	

#Quiz2

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz3

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz4

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz5

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz6

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz7

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz8

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz9

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz10

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz11

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz12

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



}
 









@media screen and (max-width: 1366px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }



.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 20%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.3em;       
	    line-height:1.7; 

			   }





#quiztext       

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz1

p  {        font-size : 1.3em;         
	    line-height:1.7;        }

	

#Quiz2

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz3

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz4

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz5

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz6

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz7

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz8

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz9

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz10

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz11

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz12

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



}
 






@media screen and (max-width: 1024px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }





.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 20%; /* Adjust this value as needed */
}




#reading

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#quiztext       

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz1

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz2

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz3

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz4

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz5

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz6

p  {        font-size : 1.3em;         
	    line-height:1.7;        }


#Quiz7

p  {        font-size : 1.3em;         
	    line-height:1.7;        }



#Quiz8

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz9

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz10

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz11

p  {        font-size : 1.3em;         
	    line-height:1.7;        }




#Quiz12

p  {        font-size : 1.3em;         
	    line-height:1.7;        }


}
 





@media screen and (max-width: 768px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }
  

 

.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 30%; /* Adjust this value as needed */
}




#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }




  
  #quiztext 

       p  {        font-size : 1.1em;       
	           line-height:1.4;             }




#Quiz1 

  	p  {	font-size : 1.1em;       
	    	line-height:1.4; 

    }



#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }



#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }



#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }



#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 
; 

					   }


#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }



#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

				   }



#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }

#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


}






@media screen and (max-width: 720px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }
  

 

.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 30%; /* Adjust this value as needed */
}




#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }




  
  #quiztext 

       p  {        font-size : 1.1em;       
	           line-height:1.4;             }




#Quiz1 

  	p  {	font-size : 1.1em;       
	    	line-height:1.4; 

    }



#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }



#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }



#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }



#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 
; 

					   }


#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }



#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

				   }



#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }

#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


}







@media screen and (max-width: 700px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }



.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 20%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }





#quiztext       

p  {        font-size : 1.1em;         
	    line-height:1.4;              }




#Quiz1

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }

#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

}







@media screen and (max-width: 640px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }



.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 80%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }





#quiztext       

p  {        font-size : 1.1em;         
	    line-height:1.4;              }




#Quiz1

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }

#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }

#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 
 

					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 


					   }


#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

}
 



@media screen and (max-width: 480px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }




.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 80%; /* Adjust this value as needed */
}




#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }




#quiztext       

p  {        font-size : 1.1em;      
            line-height:1.4;          }





#Quiz1

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 		   }


#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

}
 






@media screen and (max-width: 448px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }




.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 60%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }




#quiztext       

p  {        font-size : 1.1em;      
            line-height:1.4;          }





#Quiz1

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 		   }


#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

}








@media screen and (max-width: 412px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }




.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 60%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }




#quiztext       

p  {        font-size : 1.1em;      
            line-height:1.4;          }





#Quiz1

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz2

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz3

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz4

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz5

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz6

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz7

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

#Quiz8

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz9

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz10

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }


#Quiz11

p  {        font-size : 1.1em;       
	    line-height:1.4; 		   }


#Quiz12

p  {        font-size : 1.1em;       
	    line-height:1.4; 

					   }

}





@media screen and (max-width: 375px) {
    #wrap, #main {
        width: 100%;
        padding: 1em;
    }
    .column {
        width: 100%;
        float: none;
    }




.picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    width: 75%; /* Adjust this value as needed */
}



#reading

p  {        font-size : 1.1em;       
	    line-height:1.4; 

			   }



#quiztext       

p  {        font-size : 1em;      
            line-height:1.4;          }





#Quiz1

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }

#Quiz2

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }


#Quiz3

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }


#Quiz4

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }

#Quiz5

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }

#Quiz6

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }

#Quiz7

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }

#Quiz8

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }


#Quiz9

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }


#Quiz10

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }


#Quiz11

p  {        font-size : 1em;       
	    line-height:1.4; 		   }


#Quiz12

p  {        font-size : 1em;       
	    line-height:1.4; 

					   }

}