/* Normal HTML sizing + responsive layout */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 16px;
  background-image: url('school_logo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 120px;
  color: #111;
}

h1, h2 {
  text-align: center;
  color: yellow !important;
  text-shadow: 2px 2px 5px rgba(0,0,0,1);
  margin: 8px 0;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.25rem; }

.review-container, .name-container, .exam-container, .results-container, .all-results-container {
  width: min(100%, 900px);
  margin: 0 auto 16px auto;
  padding: 16px;
  border-radius: 10px;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.review-container, .name-container, .exam-container { background-color: rgba(0,0,0,0.5); color: white; }
.results-container { background-color: rgba(255,255,255,0.9); color: black !important; }
#score, #message, #timestamp { color: black !important; }

img, iframe, canvas { max-width: 100%; height: auto; display: block; }
video { max-width: 100%; height: auto; display: block; margin: 12px auto; }

.hidden-video { display: none; }

#results, #message { font-size: 1rem; }
label, input[type="text"], select, input[type="number"] { font-size: 1rem; }
button, input[type="button"] { font-size: 1rem; padding: 10px 14px; }
.question-container { font-size: 1rem; }
#timer { font-size: 1.125rem; color: white; }
.timestamp { font-size: 0.95rem; color: gray; }

.button-container { text-align: center; margin-top: 24px; }
.center-text { text-align: center; color: white; }
.navigation-buttons { display: flex; justify-content: center; align-items: center; gap: 12px; }

select, input[type="number"] { max-width: 300px; }

.review-content {
  margin-top: 12px;
  background-color: rgba(255,255,255,0.85);
  color: black;
  padding: 12px;
  border-radius: 10px;
  white-space: pre-wrap;
}

#examBanner { word-break: break-word; }