@import url('https://fonts.googleapis.com/css?family=Kreon|Roboto|Qwigley|Rubik|Cookie|Charm');

:root {
--primary-color: #4CAF50;
--secondary-color: #FFC107;
--background-color: #f0f4f8;
--cell-border-color: #666;
--text-color: #333;
--correct-color: #d4edda;
--incorrect-color: #f8d7da;
}

.re1 {background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-top: 20px; display: none;}
.di1 {margin:0 auto; width:95%; background:#F6F6F6; font-size:19px; padding:5px; border-radius:8px; padding-left:10px; padding-right:10px; text-align:left; font-family:Rubik;}
.im2 {float:left; width:50%; margin-right:10px;}

.quiz-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; padding: 20px; }
.fossil-fuel-illustration { flex: 1; min-width: 280px; text-align: right;  }
.fossil-fuel-illustration img { max-width: 100%; height: auto; display: block; border-radius:20px; }
.quiz-title-section { flex: 2; min-width: 300px; text-align: left; }
.quiz-title-section h1,
.quiz-title-section h2 { margin: 0; }
@media (max-width: 768px) {
.img3 {width:100%; margin:0 auto;height:450px; }
.fossil-fuel-illustration,
.quiz-title-section {
flex-basis: 100%; text-align: center; }  }
	
.logobox {height:75px; padding-left:8px; padding-top:5px; background:#EBE9E4; border-radius:4px;}
.logotext {display: flex; flex-direction: column; justify-content: center; height: 100%;}
.logotext1 {color:#595240; font-size:50px; line-height: 0.8; font-family:'Charm'; font-weight:bold; }
@media (max-width: 508px) {
.logotext1 { font-size: 40px; }
}
.logotext2 {margin-left:39px; line-height: normal; text-transform: uppercase; font-weight:bold; font-size: 10px; color: #000; font-family:Roboto;}
@media (max-width: 508px) {
.logotext2 { font-size: 8px; margin-left:30px; }
}

.fixed-corner-logo {
position: fixed; bottom: 15%; right: 2px;    
background-color: #2c3e50; 
padding: 8px 10px; 
font-size: 12px;   font-family:Rubik;
font-weight: bold; 
border-radius: 5px 0px 0px 5px; 
z-index: 1000;     
box-shadow: 0 2px 5px rgba(0,0,0,0.2); 	}
@media (max-width: 508px) {		
.fixed-corner-logo {
font-size: 9px;     position: fixed; height:96px;
padding: 8px 10px;
bottom: 15%;
right: 2px;	    }	}

.fixed-corner-logo1 {
position: fixed; bottom: 30%; right: 2px;    
background-color: #2c3e50; 
padding: 8px 10px; 
font-size: 12px;   font-family:Rubik;
font-weight: bold; 
border-radius: 5px 0px 0px 5px; 
z-index: 1000;     
box-shadow: 0 2px 5px rgba(0,0,0,0.2); 	}
@media (max-width: 508px) {		
.fixed-corner-logo1 {
font-size: 14px;     position: fixed; height:25px;
padding: 2px 8px 25px;
bottom: 30%;
right: 2px;	    }	}

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;	
}

.quiz-container {
max-width: 800px;
margin: 20px auto;
margin-top: 2px;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
@media (max-width: 508px) {	
.quiz-container { padding: 20px; }
}

.quiz-container2 {
background-color: #ffffff;
padding: 20px; margin: 0px auto;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 850px;
width: 100%;
}

.container2 {height:80px;padding:0px;padding-left:12px;}

@media (max-width: 768px) {
.container2 {padding-left:0px; }
}

.btn1 {float:left;display:flex;width:70px;margin:3px;font-size:15px;height:80px;}
.btn2 {float:left;display:flex;width:80px;margin:3px;font-size:15px;height:80px;}



h1 {
color: #075391;
text-align: center;
margin-bottom: 10px; font-size:35px;
}
.h2rr { 
color: #fff; 
text-align: center; font-family:sans-serif,Tahoma; letter-spacing:0.08px; font-weight:normal;
margin-bottom: 20px; font-size:21px; background:#3296A8; border-radius:4px; padding:9px; width:90%; text-align:center; margin:0 auto;
}
h4 {
font-size:21px; 
}
h3 {
color: #34495e;
margin-bottom: 15px;
font-size: 1.1em; letter-spacing:0.05px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.question-block {
margin-bottom: 25px;
padding: 15px;
background-color: #ecf0f1;
border-radius: 6px;
border-left: 5px solid #3498db;
}
.options label {
display: block;
margin-bottom: 0px; font-size:17px; font-family:Rubik;
cursor: pointer;
padding: 8px 0;
border-radius: 4px; 
transition: background-color 0.2s ease ;
transition: padding-left 0.3s ease ; 
}
.options label:hover {
padding-left:7px; background-color: #e0e6e9; font-weight:bold;
}
.options input[type="radio"] {
margin-right: 10px;
transform: scale(1.1);
vertical-align: middle;
}
#submitQuizBtn { 
display: block;
width: 100%;
padding: 9px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 1.1em;
cursor: pointer;
margin-top: 30px;
transition: background-color 0.3s ease;
}
#submitQuizBtn:hover {
background-color: #218838;
}
#results {
margin-top: 40px;
padding: 20px;
background-color: #f0f8ff;
border: 1px solid #cce5ff;
border-radius: 8px;
display: none; 
}
#results h2 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}
#score {
font-size: 1.8em;
font-weight: bold;
text-align: center;
color: #28a745;
margin-bottom: 20px;
}
.answer-review p {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.answer-review .correct-answer {
background-color: #d4edda;
border-left: 4px solid #28a745;
}
.answer-review .incorrect-answer {
background-color: #f8d7da;
border-left: 4px solid #dc3545;
}

.read-aloud-button {
background: none;
border: none;
cursor: pointer;
font-size: 1em; 
margin-left: 5px;
padding: 0;
vertical-align: middle; 
color: #333; 
transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
outline: none; 
display: inline-flex;
align-items: center;
gap: 3px;
}
.read-aloud-button img {
vertical-align: middle; 
}
.read-aloud-button:hover,
.read-aloud-button:focus {
transform: scale(1.05); 
color: #007bff; 
}
.read-aloud-button:active {
transform: scale(0.95);
}
.read-aloud-button {
width:100px;
border: 1px solid #ddd; font-weight:normal; text-align:center;
cursor: pointer;border-radius:5px; font-family:Roboto;
font-size: 16.5px; 
margin-left: 5px; margin-top: 2px; 
padding: 3px;
vertical-align: middle; 
color: #1D41C4; 
transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
outline: none; 
}
.read-aloud-button:hover,
.read-aloud-button:focus {
transform: scale(1.1); 
color: #FFEEEB; 
background:#F54927;
}
.read-aloud-button:active {
transform: scale(0.9); 
}
#feedback-message { font-weight: bold; margin-bottom: 0; min-height: 25px; display: flex; align-items: center; }
#next-button {background-color: #007bff;color: white;border: none;border-radius: 8px;padding: 12px 25px;font-size: 1.1em;
cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;display: none;box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);}
#next-button:hover {background-color: #0056b3;transform: translateY(-2px);}
#next-button:active {transform: translateY(0);}
  
 .other-puzzles-section {
margin-top: 40px;
text-align: center;
}

.otherh2 {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 1.8rem;
}

.other-puzzles-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

.puzzle-link {
padding: 7px 15px;
font-size: 1.1rem;
font-weight: 700;
color: #fff;
background-color: var(--primary-color);
text-decoration: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.puzzle-link:hover {
background-color: #43a047; color:#fff;
transform: translateY(-2px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}