/* ───────────── About Me container styles ───────────── */

#about-me-div-content {
  height: 100%;
  width: 100%;
  background-color: black;
  color: white;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* TL TR BR BL */
  border-radius: var(--corner-prop) calc(var(--corner-base) * 2)
    var(--corner-prop) calc(var(--corner-base) * 2);
  opacity: 0.75;
  overflow-y: auto;
  border: 1px solid var(--neon-pink);
  gap: 1rem;
}

/* Photo and description container */

#photo-and-description-div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1rem;
}

/* Photo styling */

#photo-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  margin: 0 1rem;
  height: 7rem;
}

#photo-div img {
  /* TL TR BR BL */
  border-radius: var(--corner-prop) calc(var(--corner-base) * 1.5)
    var(--corner-prop) calc(var(--corner-base) * 1.5);
  height: 100%;
  filter: drop-shadow(0 0 10px var(--neon-pink));
}

/* nav button  */

#about-me-div-content nav {
  display: flex;
  justify-content: flex-start;
}

/* Description styling */

div#description-div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* About me badge */

span.about-me-span {
  background-color: var(--terminal-green);
  color: white;
  /* TL TR BR BL */
  border-radius: calc(var(--corner-small) * 0.4) var(--corner-small)
    calc(var(--corner-small) * 0.4) var(--corner-small);
}

/* Skills badge */

span.skills-span {
  background-color: var(--neon-pink);
  color: white;
  /* TL TR BR BL */
  border-radius: calc(var(--corner-small) * 0.4) var(--corner-small)
    calc(var(--corner-small) * 0.4) var(--corner-small);
}

/* ───────────── language container ─────────────  */

/*  language icon img */

img#lang-ico {
  height: 1.5rem;
}

/*  language button container  */

#lang-btn-div {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: 1rem;
}

button#lang-btn.nav-button {
  padding: 0.4rem;
  border-radius: calc(var(--corner-small) * 0.4) var(--corner-small)
    calc(var(--corner-small) * 0.4) var(--corner-small);
  padding: 0.5rem 1rem;
}

/* *********************************
 * ───────── Media Queries ─────────
 * ********************************* */

/* ─────────────Adapt layout for horizontal or larger screens ───────────── */

@media (orientation: landscape) {
  #about-me-div-content {
    width: 40%;
    border-radius: var(--corner-prop) calc(var(--corner-base) * 5)
      var(--corner-prop) calc(var(--corner-base) * 5);
    gap: 6rem;
  }

  #photo-and-description-div {
    gap: 4rem;
  }

  #photo-div img {
    border-radius: var(--corner-prop) calc(var(--corner-base) * 2)
      var(--corner-prop) calc(var(--corner-base) * 2);
    height: 200%;
  }

  p {
    font-size: 2rem;
  }

  img#lang-ico {
    height: 2rem;
  }
}

/* ───────── Adaptive Layout for Smaller Screens ───────── */
@media screen and (max-width: 1920px) and (orientation: landscape) {
  section#about-me {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  #about-me-div-content {
    gap: 2rem;
  }

  #photo-container,
  #text-container {
    width: 90%;
    text-align: center;
  }

  #photo-div img {
    height: 8rem;
  }

  #photo-and-description-div {
    gap: 3rem;
  }
  p {
    font-size: 1.2rem;
  }
  img#lang-ico {
    height: 1.5rem;
  }
}
