body {
  z-index: 5;
  /*   background-image: url(images/background.webp);
 */
  /*  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(50%);
  -webkit-backdrop-filter: blur(50%); */
}

/* -----------HEADER------------ */
header {
  padding: 0;
  margin: 0;
  height: 360px;
}

.cover-div {
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 30px 5%; */
}

.cover-pic {
  max-width: 100%;
  height: 250px;
}
.cover-blur {
  width: 100%;
  height: 259px;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  backdrop-filter: blur(70px);
}

.profile-div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 110px;

  padding: 20px 5%;
}

.profile-pic {
  z-index: 1;
  border-radius: 50%;
 
  height: 30vh;
  width: 30vh;
  border-top: #f8f8f3 10px solid;
  border-right: #f8f8ed 10px solid;
  border-left: #f8f8ed 10px solid;
  object-fit: cover; /* Ensures the image fills the container without distortion */
}

/* -------DESCRIPTION---------- */

.description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns content to the top */
  align-items: center; /* Centers content horizontally */
  
  text-align: center; /* Centers text within the container */
  padding: 60px 20px 0px 20px; /* Optional: Adds padding for spacing */
}

.name-container {
  display: flex;
  
}

.name {
  
  margin: 30px 0px 8px 15px;

  font-weight: bold;
  font-size: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.bio {
  margin: 8px 15px -5px 15px;

  font-size: 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.website,
.contact {
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 50px;
  text-align: center;
  margin: 15px 10px -70px 20px;
  font-size: 26px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-decoration: none;
  background-color: #eff7fd;
  border-radius: 10px;
  border: #ffffff solid 2px;
}

/*-------------SOCIAL--------------------*/

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6em;
}

.socials {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.5fr;
  gap: 2.5rem;
}

.social-link i {
  font-size: 400%;
  color: inherit;
}

.icon-size {
  width: 80px; /* Adjust the percentage or use px for fixed size */
  height: auto;
}

.verified-size {
  width: 10%; /* Adjust the percentage or use px for fixed size */
  height: 10%;
}

.contact {
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact svg {
  width: 50px; /* Set a smaller width for the SVG */
  height: 50px; /* Set a smaller height for the SVG */
}