html, body, h1, h3, h3, h4, h5, h6, p {
 font-family: "Poppins";
 }
 
 
 @media screen and (max-width: 800px) {
 h2 {font-size: 22px}
 h3, h4 {font-size: 18px}
 }
 
 @media screen and (max-width: 440px) {
 h2 {font-size: 16px}
 h3, h4 {font-size: 14px;}
  }
 
 body {background-color: black;}

.topBox {
  position: relative;
  height: 30vh;
  max-width: 400px;
  margin: 1%;
  border-color: pink;
  border-style: double;
  }

 .bottomBox {
 position: relative;
  height: 30vh;
  max-width: 400px;
  margin: 1%;
  border-color: green;
  border-style: double;
  } 
  
#topImage, #bottomImage {
   position: relative;
   display: block;
   width: auto;	
   max-height: 100%;
   margin: auto;
 }
 

#questionNo {
  color: lime;
}
 
 
 #topText, #bottomText {
   font-style: italic;
   margin: 15px;
   color: yellow;
}
   
/* The answer dates */ 
#topDate, #bottomDate { 
   position: absolute;
   top: 0px;
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   text-align: center; 
   padding: 10px; 
   left-margin: 0;
   width: 100%;
   }
 
   
/* Tick or Cross image */
#topTickCross, #bottomTickCross {
   position: absolute;
   top: 60px;
   right: 0%;
   display: block;
   width: auto;	
   max-height: 50%;
   margin: auto; /* this will center the image */
   z-index: 1;		
   background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;    
   }

 
 /* The Game Over Banner */
#gameOver { 
   position: fixed	; 
   top: 200px; 
   text-align:center;
   width: 100%; 
   color: yellow;
   font: bold 48px/90px;
   font-size: xx-large;
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
   z-index: 2;
}