/* Base styling */
body {
  margin: 0;
  padding: 2rem;
  color: white;
  height: fit-content;
  overflow-x: hidden;
  width: 100vw;
  background-image: url("media/flowersblur11.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* <--- this is the key */
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.fullbgbackground {
  background-image: url("media/blur10.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* <--- this is the key */
  background-position: center;
}

.image-gallerylink {
  position: fixed;
  bottom: 20px;
  margin: 15px;
  right: 20px;
  z-index: 1000; /* Makes sure it stays on top */
  background-color: #007bff;
  color: white;
  padding: 16px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-weight: bolder;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.image-gallerylink:hover {
  cursor: pointer;
  transform: scale(1.1);
  opacity: 1;
}



/* Container */
.container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

/* Card styles */
.card {
  background: radial-gradient(circle at top left, #0545ab7c, #021a4079);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 32rem;
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 110, 255, 0.4);
  transition: 0.3s ease all;
}

.card:hover {
  box-shadow: 0 0 35px rgba(0, 110, 255, 0.7);
  transform: translateY(-4px);
}

.card-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-align: center;
}

/* Card styles */
.card {
  /* ... existing styles ... */
  position: relative;
  z-index: 2; /* Default z-index for cards */
  transition: 0.3s ease all; /* Keep the transition for the visual effect */
}

.card:hover {
  box-shadow: 0 0 35px rgba(0, 110, 255, 0.7);
  transform: translateY(-4px);
  z-index: 1; /* Explicitly set a lower z-index on hover */
  /* OR, if the floaty names are z-index: 1000, setting card z-index: 999 might be enough */
  /* z-index: 999; /* Example if floaty names are 1000 and you want the card just below */
}

/* Floaty Names Container */
#floatyFriendsContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999; /* Ensure this is sufficiently high */
}

.floaty-name {
  position: absolute;
  /* ... other styles ... */
  pointer-events: auto;
  z-index: 1000; /* Ensure this is always higher than cards */
}

.card-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  text-align: left;
}

/* Icon blur profile */
.myiconblur {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
}

.myiconblur::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("https://avatars.githubusercontent.com/u/220081874?s=400&u=96315c95685ac6e6bccc8f976ebc67974c1fd1c1&v=4");
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  z-index: 0;
}

.friendsicons {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
}

.myiconblur::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("https://avatars.githubusercontent.com/u/220081874?s=400&u=96315c95685ac6e6bccc8f976ebc67974c1fd1c1&v=4");
  background-size: cover;
  background-position: center;
  z-index: 1;
  mix-blend-mode: lighten;
}

/* Language progress bars */
.lang-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.lang-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  /* Removed box-shadow to eliminate border/glow */
}


.lang-bar {
  flex: 1;
  height: 1.25rem;
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}

.lang-fill {
  height: 100%;
  transition: width 0.8s ease;
}

.lang-percent {
  width: 3rem;
  text-align: right;
  font-weight: 600;
  font-size: 1rem;
}

/* Bar Colors */
.html { background: #f97316; }        /* Orange */
.css { background: #1652f9; }        /* Orange */
.python { background: #fde047; }      /* Yellow */
.java { background: #ef4444; }        /* Red */
.js { background: #facc15; }          /* Light Yellow */

.floatyFriendsContainer {
    z-index: 999;
}

.floaty-name {
  position: absolute;
  font-size: 1.2rem;
  color: #ffffff90;
  font-weight: bold;
  animation: floaty 10s infinite ease-in-out;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ... (previous CSS code) ... */

/* Float animation */
@keyframes floaty {
  0% { transform: translateY(0) translateX(0); opacity: 0.8; }
  50% { transform: translateY(-20px) translateX(10px); opacity: 1; }
  100% { transform: translateY(0) translateX(0); opacity: 0.8; }
}

/* REMOVE THIS LINE: z */ /* This was the culprit */

.floaty-friend {
  position: absolute;
  font-size: 1rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  pointer-events: none;
  animation: floatyMove 10s ease-in-out infinite;
  z-index: 998;
}
@keyframes floatyMove {
  0% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
  50% { transform: translateY(-15px) translateX(10px); opacity: 0.5; }
  100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
}