/*cleanedup.css*/
nav {
  background-color: #3333eb;
  padding: 10px 0;
  text-align: center;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline;
  margin: 0 40px;
}
nav ul li a {
  font-family: Georgia;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 2em;
}
nav ul li a:hover {
  text-decoration: underline;
}

header {
  border-top: .5em solid #0f0c0c;
  background-color: #bfbdfa;
  padding: 20px;
  text-align: center;
  border-bottom: .5em solid #0f0c0c;
}
header h1 {
  margin: 0;
  font-size: 2.5em;
  color: #333;
  word-break: break-word;
  padding: 1rem;
  line-height: 1.3;
}
header p {
  margin: 5px 0 0;
  color: #666;
}
header h2 {
  margin: 0;
  font-size: 3em;
  color: #333;
}

body {
  background-color: rgb(230, 230, 250);
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

footer {
  background-color: #4c4cff;
  padding: .1%;
  text-align: center;
  border-top: 20% solid #ccc;
  margin-top: 1.5%;
}
footer a {
  text-decoration: none;
  color: #fffcfc;
  font-size: 2em;
  margin: 0 10%;
  font-weight: bold;
}
footer a:hover {
  text-decoration: underline;
}

.image-text-block {
  display: grid;
  grid-template-columns: 1fr 5fr 5fr 1fr;
  img {
    width: 70%;
    height: 70%;
    border: 15px solid #a092ee;
    border-radius: 15%;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 5%;
    margin-top: 3%;
    margin-left: 2%;
  }
}

.text-block {
  text-align: center;
  width: 90%;
  height: auto;
  font-size: 2.3em;
  line-height: 2;
}

.vocabulary-table {
  display: grid;
  grid-template-columns: 1fr 10fr 1fr;
  justify-content: center;
  padding: 1rem;
  background-color: #88a5ef;
}

.vocabulary-table table {
  border-collapse: collapse;
  width: 100%;
  background-color: #e9ecedd3;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.vocabulary-table th {
  font-size: 2rem;
  border: 10px solid #0a0606;
  padding: 2rem;
  text-align: left;
}

@media screen and (max-width: 600px) {
  .vocabulary-table {
    grid-template-columns: 1fr;
  }
  .vocabulary-table table {
    grid-column: 1;
    width: 100%;
  }
  .vocabulary-table th,
  .vocabulary-table td {
    font-size: .9rem;
    padding: 0.5rem;
  }
}

@media screen and (max-width: 1400px) {
  .image-text-block {
    grid-template-columns: 1fr;
    margin: 0;
  }
  .image-text-block img {
    width: 60%;
    height: auto;
    border: 15px solid #a092ee;
    border-radius: 15%;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0%;
    margin-top: 3%;
    margin-left: 2%;
  }
  .text-block {
    padding: 0 0 15% 0;
    font-size: 1.8em;
  }
}

@media screen and (max-width: 500px) {
  nav ul li a {
    display: block;
    background-color: #319c6a;
  }
  footer a {
    display: block;
    background-color: #319c6a;
  }
  .text-block {
    font-size: 1.4em;
  }
  p {
    font-size: 1.2em;
  }
}

/* ===== About layout ===== */
.about-section {
  display: grid;
  grid-template-columns: 1fr minmax(0, 10fr) 1fr; /* matches your centered grid style */
  padding: 1rem;
  background-color: rgb(134, 134, 222);
}

.about-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns on larger screens */
  gap: 1.5rem;
}

.about-card {
  background: #b1b1f7d3; /
  border: 10px solid #0a0606; /* echoes your table border style */
  padding: 1.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.about-card h2 {
  margin-top: 0;
  font-size: 2rem;
  color: #333;
}

.about-card p {
  font-size: 2.5rem;
  line-height: 2;
  margin: .75rem 0;
}

/* ===== Responsive ===== */
@media screen and (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr; /* stack cards */
  }
  .about-card {
    padding: 1.25rem;
  }
  .about-card h2 {
    font-size: 1.7rem;
  }
  .about-card p {
    font-size: 1.05rem;
  }
}

@media screen and (max-width: 500px) {
  .about-section {
    padding: .5rem;
  }
  .about-card {
    border-width: 8px; /* slightly lighter frame on small screens */
  }
}