body {
    display: flex;
    margin: 0;
    padding: 0;
  }

  /* Style for the Top Background Banner */
  .top-banner {
    background-color: #339EFF;
    height: 80px;
    width: 100%; 
    position: fixed;
    top: 0;
    z-index: -1;
  }

  .top-header {
    color: #fff;
    margin-left: 200px;
    padding: 20px;
    position: fixed;
  }

  /* Style for the navigation bar */
  .sidenav {
    background-color: #333;
    height: 100vh;
    width: 200px;
    padding-top: 40px;
    position: fixed;
    z-index: 1; /* Set the z-index to 1 to position the navigation bar above the content */
  }

  /* Style for the navigation bar links */
  .sidenav a {
    display: block;
    padding: 10px;
    color: #fff;
    font-size: 25px;
    text-decoration: none;
  }

  /* Style for the navigation bar links on coursor hover */
  .sidenav a:hover {
    background-color: #555;
  }

  /* Style for main content */
  .main {
    margin-top: 70px;
    margin-left: 200px;
    padding: 20px;
    align-items: center;
    z-index: -2;
  }
 
  /* Style for Profile Container */
  .profile-container {
    display: flex; /* Create a flex container to align items side by side */
    align-items: center;
  }
  
  /* Style for Profile Picture */
  .profile-picture {
    width: 125px;
    height: 125px;
    border: 2px solid #000;
    border-radius: 50%;
    overflow: hidden; /* This ensures the image stays within the circular boundaries */
    position: relative; /* Add position: relative; to enable positioning */
    margin-right: 20px; /* Add some margin to separate the profile picture and bio */
  }

  /* Positioning for Profile Picture */
.profile-picture img {
  position: absolute; /* Position the image absolutely inside the .profile-picture div */
  top: 50%; /* Position the top edge of the image at the vertical center of the div */
  left: 50%; /* Position the left edge of the image at the horizontal center of the div */
  transform: translate(-50%, -50%); /* Move the image back by half of its width and height */
}
  
/* Style for Bio Container */
.bio-container {
  width: 800px; /* Set a fixed width for the bio container */
  height: 100px; /* Set a fixed height for the bio container */
  border: 2px solid #000;
  border-radius: 10px;
  text-align: justify;
  display: flex; /* Use flexbox to control text alignment */
  align-items: center; /* Align the text to the top */
  justify-content: center; /* Justify the text to the left */
  padding: 5px;
}

/* Style for Image Container */
.database-image-container {
  width: 250px;
  height: 707px;
  margin-top: 97px;
  margin-left: 10px;
  border: 2px solid #000;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  margin-left: 1210px;
  z-index: -2;
}

/* Style for the Image */
.database-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

/* Style for the image caption */
.image-caption {
  font-size: 12.5px;
  color: #000;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
}

/* Style for the Card Banner's */
.card-banner {
  background-color: #339EFF;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 230px;
}

/* Style for the Card Header in the Banner */
.card-header {
  font-size: 20px;
  margin: 0px;
}

/* Style for the Card Container/Border */
.card-container {
  border: 2px solid #333;
  width: 254px;
  box-sizing: border-box;
  display: flex; /* Use flexbox to create a flex container */
  flex-direction: column; /* Stack the children elements vertically */
  align-items: center; /* Center the children horizontally */
  text-align: center;
}

/* Style for the Skills List */
.skills-list {
  list-style-type: none;
  padding: 0px;
}

/* Style for each Skill Item */
.skills-item {
  margin-bottom: 5px;
}

.all-cards-container {
  display: flex; /* Use flexbox to create a flex container */
  justify-content: center; /* Center the cards horizontally */
}

/* Style for the First Card */
.card-container:first-child {
  margin-right: 98px; /* Add margin to the right of the first card */
}

/* Style for the Last Card */
.card-container:last-child {
  margin-left: 98px; /* Add margin to the left of the last card */ /* 98px to account for the 2px border */
}

/* Style for the Card Container/Border */
.projects-card-container {
  border: 2px solid #333;
  width: 254px;
  box-sizing: border-box;
  display: flex; /* Use flexbox to create a flex container */
  flex-direction: column; /* Stack the children elements vertically */
  align-items: center; /* Center the children horizontally */
  text-align: center;
}

/* Style for the Projects List */
.projects-list {
  list-style-type: none;
  padding: 0px;
}

/* Style for each Projects Item */
.projects-item {
  margin-bottom: 5px;
}

.all-projects-cards-container {
  display: flex; /* Use flexbox to create a flex container */
  justify-content: center; /* Center the cards horizontally */
}

/* Style for the First Card */
.projects-card-container:first-child {
  margin-right: 98px; /* Add margin to the right of the first card */
}

/* Style for the Last Card */
.projects-card-container:last-child {
  margin-left: 98px; /* Add margin to the left of the last card */ /* 98px to account for the 2px border */
}

/* Style for Project Button */
.project-button{
  width: 250px;
  height: 30px;
  color:#FFF;
  background-color: #339EFF;
}

/* Style for Project Button */
.project-button-1{
  width: 250px;
  height: 30px;
  color:#FFF;
  background-color: #339EFF;
  border: 2px solid #000;
  border-radius: 10px;
  margin-top: 810px;
  margin-left: 225px;
  z-index: 0;
  position: absolute;
}

/* Style for Project Button */
.project-button-2{
  width: 250px;
  height: 30px;
  color:#FFF;
  background-color: #339EFF;
  border: 2px solid #000;
  border-radius: 10px;
  margin-top: 810px;
  margin-left: 577px;
  z-index: 0;
  position: absolute;
}

/* Style for Project Button */
.project-button-3{
  width: 250px;
  height: 30px;
  color:#FFF;
  background-color: #339EFF;
  border: 2px solid #000;
  border-radius: 10px;
  margin-top: 810px;
  margin-left: 929px;
  z-index: 0;
  position: absolute;
}