/* about me ext bio page reset all margins */
#aboutme_ext_bio_css h1,
#aboutme_ext_bio_css h2,
#aboutme_ext_bio_css h3,
#aboutme_ext_bio_css h4,
#aboutme_ext_bio_css h5,
#aboutme_ext_bio_css h6,
#aboutme_ext_bio_css p,
#aboutme_ext_bio_css a,
#aboutme_ext_bio_css ul {
  margin: 0;
  padding: 0;
}

/* about me ext bio page container main */
.aboutme_ext_bio_container_main {
  display: grid;
  place-items: center;
  width: 100%;

  scroll-margin-top: calc(var(--variable_spacing_01) * 2.6);
}

/* about me ext bio page container content */
.aboutme_ext_bio_container_content {
  display: grid;
  grid-template-columns: auto auto; /* two equal columns for left and right content */
  width: calc(100% - 2 * var(--variable_spacing_01));

  margin-bottom: var(--variable_spacing_01);
  position: relative;
  z-index: 4;
  align-items: stretch;
}

/* about me ext bio page left container */
.aboutme_ext_bio_left_container {
  display: grid;

  border-radius: var(--variable_borderradius_03);
  margin-right: calc(var(--variable_spacing_01) * 1);

  /* background gradient element 02 with border and inner shadow */
  background-color: var(--variable_color_gradient_01_gray_01);
  background-image:
          linear-gradient(205deg,
          var(--variable_color_gradient_01_gray_02) 25%,
          var(--variable_color_gradient_01_gray_03) 75%,
          var(--variable_color_gradient_01_gray_04) 100%);

  box-shadow:
          inset 0 0 10px var(--variable_color_gradient_01_gray_05),
          inset 0 0 0 1px var(--variable_color_gradient_01_gray_06);

  height: 100%;

  position: relative; /* needed to position the pseudo-element */
  z-index: 9;
}

/* about me ext bio page left top container */
.aboutme_ext_bio_left_top_container {
  display: grid;
  align-self: start; /* keep top content at the top */
  margin-top: var(--variable_spacing_01);
}

.aboutme_ext_bio_left_top_container p {
  margin-top: 0;
}

/* about me ext bio page left bottom container */
.aboutme_ext_bio_left_bottom_container {
  display: grid;
  align-self: end; /* keep top content at the top */
}

/* about me ext info page learn more button */
.aboutme_ext_bio_cv_button {
  display: inline-grid; /* use grid */
  grid-template-columns: auto auto; /* two columns: one for text, one for icon */

  gap: calc(var(--variable_spacing_items_01) * 2); /* space between text and icon */

  /* button type 02 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_02_color_03) 0%,
  var(--variable_button_02_color_02) 25%,
  var(--variable_button_02_color_01) 100%);

  box-shadow:
          -10px 10px 40px var(--variable_button_02_color_04),
          inset 0 0 10px var(--variable_button_02_color_05),
          inset 0 0 0 1px var(--variable_button_02_color_05);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  padding: calc(2px + var(--variable_spacing_items_01) * 1) calc(2px + var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02);

  margin: 0 var(--variable_spacing_01) var(--variable_spacing_01) var(--variable_spacing_01);

  text-align: center;

  color: var(--variable_color_offwhite); /* button text color */
  cursor: pointer;

  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
  white-space: nowrap; /* prevent text from wrapping */
  width: fit-content; /* ensure the button only takes as much space as needed */
}

/* about me ext info page arrow icon */
.aboutme_ext_bio_cv_button .arrow_icon {
  height: calc(var(--variable_spacing_items_01) * 2);
  width: calc(var(--variable_spacing_items_01) * 2);
  filter: brightness(0) invert(1);
}

/* about me ext bio page right container */
.aboutme_ext_bio_right_container {
  display: grid;
  position: relative;
  z-index: 3;
}

/* about me ext bio right middle container */
.aboutme_ext_bio_right_middle_container {
  align-self: start;
  display: grid;

  height: 100%;
}

/* about me ext bio profile picture styling */
.aboutme_ext_bio_square_image {
  display: grid;
  place-items: center;

  border-radius: var(--variable_borderradius_03);

  overflow: hidden;
  align-self: start;
  height: 100%;

  position: relative; /* needed to position the pseudo-element */
  box-shadow: -50px 75px 350px rgba(63, 63, 63, 0.5);
}

.aboutme_ext_bio_square_image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Apply the shadow effect */
  box-shadow:
          inset 0 0 10px var(--variable_color_gradient_03_gray_01),
          inset 0 0 0 1px var(--variable_color_gradient_03_gray_01);

  border-radius: inherit; /* Match border radius */
  pointer-events: none; /* Allow interactions to pass through */
}

.aboutme_ext_bio_square_image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* about me ext bio page container content item_margin */
.aboutme_ext_bio_container_content h1, h2, h3, h4, h5, h6, p, a, ul, li {
  margin: var(--variable_spacing_01);
}



/* about me ext bio page media queries */
@media only screen and (max-width: 700px) {
  /* about me ext bio page container content */
  .aboutme_ext_bio_container_content {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto; /* Two rows: one for the left, one for the right */
    justify-items: center; /* Center both containers horizontally */
  }

  /* about me ext bio page left container */
  .aboutme_ext_bio_left_container {
    margin-right: 0; /* remove right margin */
    margin-bottom: var(--variable_spacing_01);
    height: fit-content;
  }

  /* about me ext bio page right container */
  .aboutme_ext_bio_right_container {
    margin-left: 0; /* remove left margin */
  }
}