.bio-container {
  position: relative; /* Set the container as the positioning context */
  display: inline-block; /* Or block, depending on your layout */
}

.bio-container img {
  display: block; /* Remove any default inline spacing */
  width: 100%; /* Make the image responsive within its container */
  height: auto;
}

.bio-container h3 {
  position: absolute; /* Take the heading out of the normal flow */
  top: 15%; /* Position it at the top of the container */
  left: 0; /* Position it at the left of the container */
  width: 100%; /* Make it span the width of the container */
  text-align: center; /* Center the text horizontally (optional) */
  color: white; /* Adjust text color for visibility */
  /* Add any other desired styling for the heading */
  background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a background for better readability */
  padding: 10px 0; /* Optional: Add some padding */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}
@media screen and  (max-width: 1100px) {
    .bio-container h4 {
      position: absolute; /* Take the heading out of the normal flow */
      top: 30%; /* Position it at the top of the container */
      left: 0; /* Position it at the left of the container */
      width: 100%; /* Make it span the width of the container */
      text-align: center; /* Center the text horizontally (optional) */
      color: white; /* Adjust text color for visibility */
      /* Add any other desired styling for the heading */
      background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a background for better readability */
      padding: 10px 0; /* Optional: Add some padding */
      box-sizing: border-box; /* Include padding in the element's total width and height */
    }
}
@media screen and (min-width: 1400px) {

.bio-container h4 {
  position: absolute; /* Take the heading out of the normal flow */
  top: 23%; /* Position it at the top of the container */
  left: 0; /* Position it at the left of the container */
  width: 100%; /* Make it span the width of the container */
  text-align: center; /* Center the text horizontally (optional) */
  color: white; /* Adjust text color for visibility */
  /* Add any other desired styling for the heading */
  background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a background for better readability */
  padding: 10px 0; /* Optional: Add some padding */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}
}
.skills {
text-align: center;
}

html {
  scroll-padding-top: 50px;
}

.contact-background {
background-color: black;
/*background-image: url('../img/contact.png');*/

}

.secondary-background {
  background-color: black /* Optional: Add a background for better readability */

}
.projects {
text-align: center;
color: white;
margin: 30px 30px;
padding-bottom: 30px;
}

.projects p {
padding: 2px;
}
.project-samples{
margin: 30px 30px;
}

h3 a {
  color: white; /* Or any color you prefer */
  text-decoration: none;
}

h3 a:hover {
  text-decoration: none; /* Remove underline on hover if it exists */
}


.dancing-script-font {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
  text-align: left;
}