* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: rgb(17, 37, 32);
  color: rgb(255, 255, 255);
  font-weight: bolder;
  font-family: Georgia, "Times New Roman", serif;
}

/* Main container */
.wrap {
  width: min(1100px, 95vw);
  margin: 0 auto;
  padding: 30px 0 60px;
}

/* Title */
.heading {
  text-align: center;
  font-size: 56px;
  margin-bottom: 30px;
}

/* Top row */
.top-row {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  margin-bottom: 70px;
}

/* Search bar */
.search {
  position: relative;
  height: 64px;
  color: #36E0AD;
  
}

.search input {
  width: 100%;
  height: 64px;
  font-size: 28px;
  padding: 12px 60px 12px 18px;
  border: none;
  outline: none;
}

.search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 26px;
  cursor: pointer;
}

.student-box {
  height: 64px;
  background: #36E0AD;
  color: #36E0AD;
  display: grid;
  place-items: center;
  font-size: 40px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.student-box:hover {
  filter: brightness(0.95);
}


/* SL / HL labels */
.level-title {
  text-align: center;
  font-size: 44px;
  margin: 40px 0 20px;
}

/* Button stack */
.button-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

/* The big ugly button which appears everywhere */
.wide-btn {
  width: min(600px, 90vw);
  height: 90px;
  background: #36E0AD;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  text-decoration: none;
  border: 10px solid #28A882;

  display: grid;
  place-items: center;

  font-size: 38px;
  font-weight: 500;
}

.wide-btn:hover {
  filter: brightness(0.95);
}
/* ===============================
   TEACHER VIEW PAGE STYLES
================================ */

.back-btn {
  display: inline-grid;
  place-items: center;
  width: 140px;
  height: 70px;
  background: #36E0AD;
  color: rgb(14, 14, 14);
  text-decoration: none;
  font-size: 44px;
  font-weight: 700;
}

.back-btn:hover {
  filter: brightness(0.95);
}

.login-form {
  margin-top: 40px;
  display: grid;
  gap: 18px;
}

.form-label {
  font-size: 48px;
  margin-top: 30px;
}

.form-input {
  width: min(900px, 90vw);
  height: 78px;
  font-size: 34px;
  padding: 14px 18px;
  border: none;
  outline: none;
}

/* ===============================
   TEACHER VIEW TOP BAR
================================ */

.teacher-top {
  display: flex;
  align-items: center;   /* same Y level */
  justify-content: space-between;
  margin-bottom: 40px;
}

/* ===============================
   SHARED PAGE TOP BAR
================================ */
.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Back button (already used in TeacherView) */
.back-btn {
  display: inline-grid;
  place-items: center;
  width: 240px;
  height: 74px;
  background: #36E0AD;
  border: 10px solid #28A882;
    border-radius: 20px;
  text-decoration: none;
  font-size: 40px;
  font-weight: 700;
}
.student-box {
  width: 260px;
  height: 74px;
  background: #36E0AD;
  border: 10px solid #28A882;
    border-radius: 20px;
  color: #000000;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
/* Page subtitle */
.page-subtitle {
  text-align: center;
  font-size: 56px;
  font-weight: 600;
  margin: 10px 0 50px;
  border: 2px dashed #28A882;
  padding: 14px 40px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   TOPIC BUTTON LAYOUT (AUTO-ALIGN)
================================ */
.topic-row {
  display: flex;
  justify-content: center; /* keeps the group centered */
  align-items: center;
  flex-wrap: wrap;         /* when you add more, they wrap */
  gap: 60px;
  margin-top: 40px;
}

/* Topic buttons (Cognitive, etc.) */
.topic-btn {
  font-weight: bold;
  text-align: center;
  width: 360px;
  height: 420px;
  background: #36E0AD;
  border: 10px solid #28A882;
    border-radius: 20px;
  color: #000000;
  text-decoration: none;
 display: grid;
  place-items: center;
 font-size: 52px;

  transition: transform 0.2s ease, filter 0.2s ease;
}
.ia-section {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-top: 40px;
}

/* Text block */
.ia-text {
  flex: 1;
  font-size: 26px;
  line-height: 1.6;
  font-weight: 400;
}

/* Image on the right */
.ia-image {
  width: 380px;
  max-width: 40%;
  height: auto;
}
@media (max-width: 900px) {
  .ia-section {
    flex-direction: column;
  }

  .ia-image {
    max-width: 100%;
    margin: 0 auto;
  }
}

#searchResults{
  margin-top:20px;
}

.result a{
  font-weight:bold;
  text-decoration:none;
}

.snippet{
  margin-top:4px;
  font-size:0.9rem;
  opacity:0.75;
}

.result{
  background: #6eb6a0;
  /* I had to use a lighter shade, because the results are hyperlinks, which are blue. This improves readability */

  padding:12px;
  margin:8px 0;
  border-radius:8px;
}

.result strong{
  color:#000000;
}

#contentText {
  width: 80%;
  height: 200px;
  font-size: 18px;
  padding: 10px;
}

#contentDisplay {
  margin-top: 30px;
  font-size: 20px;
}

#contentDisplay p {
  white-space: pre-wrap;
}

#contentDisplay img {
  max-width: 400px;
  display: block;
  margin: 10px 0;
}

#teacherEditor.hidden {
  display: none;
}

#contentText {
  width: 80%;
  height: 200px;
  font-size: 18px;
  padding: 10px;
}

#contentDisplay {
  margin-top: 30px;
  font-size: 20px;
}

#contentDisplay img {
  max-width: 400px;
  display: block;
  margin: 10px 0;
}