safe

src/App/mediarules.css

@@ -110,7 +110,13 @@
       max-width: 100%;
       height: auto; 
     }
-
+    /***Biosafty***/
+    #safehead {
+      background-size: contain; /* Adjust the image to fit within the container */
+      background-position: center bottom; /* Push the image down for better visibility */
+      height: 300px; /* Adjust the height for mobile screens */
+      padding-top: 50px; /* Add padding to push down content and make image more visible */
+    }
     /***Description***/
     #Cystic\ Fibrosis6 h2 {
         font-size: 1.5em !important; 
@@ -122,27 +128,27 @@
         width: 300px !important; /* Make smaller for mobile */
         height: 300px !important; /* Adjust height accordingly */
       }  
-      .quiz-wrapper {
+    .quiz-wrapper {
         flex-direction: column;
         padding: 10px;
         width: 100% !important; /* Set width to 100% for mobile screens */
       }
     
-      .quiz-front, .quiz-back {
+    .quiz-front, .quiz-back {
         padding: 10px !important;
       }
     
-      .quiz-heading {
+    .quiz-heading {
         font-size: 1.2em;
       }
     
-      .quiz-text {
+    .quiz-text {
         font-size: 1em;
         margin-bottom: 10px !important;
         word-wrap: break-word; /* Keep word breaking for mobile */
       }
     
-      .quiz-button-box {
+    .quiz-button-box {
         margin-top: 5px !important;
         justify-content: space-evenly;
       }