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

/* contact me page main container */
.contactme_container_main {
  display: grid;
  place-items: center;
  width: 100%;
  position: relative;
  scroll-margin-top: calc(var(--variable_spacing_01) * 2.6 );
}

.contactme_shadow_container_main {
  display: grid;
  width: 100%;
  height: calc(var(--vh, 1vh) * 175); /* 100% of the actual viewport height */

  position: absolute;
  pointer-events: none;
  top: -100%;
  left: 0;
  overflow: hidden;
  z-index: 0;
  /* border: 1px solid red; */
}

.contactme_shadow_container_content {
  display: grid;
  width: 100%;
  height: 50%;
  position: absolute;
  transform: scale(250%);
  top: 30%;
  left: -20%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--variable_shadow_color_03) 0%, transparent 50%);
}

/* contact me page content container */
.contactme_container_content {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns for left and right content */
  width: calc(100% - 2 * var(--variable_spacing_01));
  /* height: 100vh; */

  border-radius: var(--variable_borderradius_03);

  margin-top: var(--variable_spacing_01);
  margin-bottom: var(--variable_spacing_01);

  align-items: start; /* align items to the top of the grid */
  z-index: 9;
}

/* contact me page left container (form) */
.contactme_left_container {
  display: grid;
  grid-template-rows: auto 1fr; /* rows for form elements and button at the bottom */
  height: calc(100%);

  border-radius: var(--variable_borderradius_03);
  margin-right: calc(var(--variable_spacing_01) / 2); /* spacing on right */

  /* 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);

  z-index: 11;
  overflow: hidden;
}

/* contact me page form container */
.contact_form {
  display: grid;
  grid-template-columns: auto; /* single column layout for labels and input */
  gap: var(--variable_spacing_01); /* space between form elements */
  width: calc(100% - var(--variable_spacing_01));
  padding: var(--variable_spacing_01);
}

/* contact me page button container */
.contact_form_bottom {
  display: grid;
  grid-template-columns: 1fr;
  width: calc(100% - 2 * var(--variable_spacing_01));
  padding: var(--variable_spacing_01);
  align-self: end;
}

/* contact me page label styling */
.contact_form label {
  display: block; /* ensures label is on top of input field */
  margin-bottom: calc(var(--variable_spacing_01) / 2); /* space between label and input */
  color: var(--variable_color_offwhite);
}

/* contact me page input field styling */
.contact_form input,
.contact_form textarea {
  display: block;
  background-color: var(--variable_color_gray_02);
  border: none;
  border-radius: var(--variable_borderradius_02);
  padding: calc(var(--variable_spacing_01) / 2);
  outline: none;
  width: calc(100% - var(--variable_spacing_01) - 4px);
}

/* contact me page button styling */
.send_button {
  display: inline-grid;
  grid-template-columns: auto auto; /* two columns: text and icon */

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

  /* button type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  box-shadow:
          -10px 10px 40px var(--variable_button_01_color_04),
          inset 0 0 10px var(--variable_button_01_color_05),
          inset 0 0 0 1px var(--variable_button_01_color_05);

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

  border: none;

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

  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;
  align-self: end;
}

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

/* contact me page right container (text and social links) */
.contactme_right_container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;

  border-radius: var(--variable_borderradius_03);
  margin-left: calc(var(--variable_spacing_01) / 2); /* spacing on left */

  /* 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);

  z-index: 10;
  overflow: hidden;
}

/* contact me page message section */
.contactme_right_top_container {
  display: grid;
  align-self: start;
}

/* contact me page button at the bottom of right container */
.contactme_right_bottom_container {
  align-self: end;
}

/* contact me page social media links section */
.contactme_social_links {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: calc(var(--variable_spacing_01)); /* space between links */
  padding-top: var(--variable_spacing_01);
  padding-bottom: var(--variable_spacing_01);
  width: fit-content;
  cursor: pointer;
}

/* contact me page individual social media link styling */
.contactme_social_links a {
  display: grid;
  grid-template-columns: auto 1fr; /* icon and text */
  align-items: center;
  color: var(--variable_color_offwhite);
  text-decoration: none;
  gap: calc(var(--variable_spacing_01) / 2);
  margin: 0;
  padding-left: var(--variable_spacing_01);
}

/* contact me page social media icon styling */
.social_icon {
  width: calc(var(--variable_spacing_items_01) * 3 - 2px);
  aspect-ratio: 1 / 1;
  filter: brightness(0) invert(1);
}

/* contact me page view more button styling */
.contactme_viewmore_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 03 background colors */
  background-color: var(--variable_button_03_color_01);
  border: var(--variable_borderline) solid var(--variable_color_offwhite); /* border */

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

  padding: calc(var(--variable_spacing_items_01) * 1) calc(var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02);
  margin: 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: auto; /* ensure the button only takes as much space as needed */
}

/* contact me page view more button arrow icon */
.contactme_viewmore_button .arrow_icon {
  height: calc(var(--variable_spacing_items_01) * 2);
  width: calc(var(--variable_spacing_items_01) * 2);
  filter: brightness(0) invert(1);
}

/* contact me page media queries */
@media only screen and (max-width: 1100px) {
  .contactme_container_content {
    grid-template-columns: 1fr; /* single column layout for mobile */
    grid-template-rows: auto auto;
    justify-items: center;
    margin-top: var(--variable_spacing_01);
    margin-bottom: var(--variable_spacing_01);
  }

  .contactme_left_container {
    order: 2; /* place form container below */
    display: grid;
    grid-template-rows: auto 1fr;
    height: calc(100% - 1 * var(--variable_spacing_01));
    width: 100%;
    margin-left: var(--variable_spacing_01);
    margin-right: var(--variable_spacing_01);
    margin-top: var(--variable_spacing_01);
  }

  .contactme_right_container {
    order: 1; /* place right container above */
    margin: 0;
    width: 100%;
  }

  .contactme_social_links {
    display: grid;
    grid-template-columns: repeat(2, auto); /* two columns */
    row-gap: calc(var(--variable_spacing_01)); /* reduce row gap to bring them closer */
    column-gap: calc(var(--variable_spacing_01)); /* space between items horizontally */
    justify-content: start; /* center the social media links */
    padding-top: var(--variable_spacing_01);
    padding-bottom: var(--variable_spacing_01);
    width: fit-content; /* shrink the container width */
  }
}

@media (max-width: 1000px) {
  .contactme_shadow_container_main {
    top: -60%;
  }

  .contactme_shadow_container_content {
    width: 150%;
    top: 30%; /* same */
    left: -30%; /* -25% */
  }
}