@font-face {
  font-family: TangoSans;
  src: url('../assets/fonts/tango-sans/TangoSans.ttf');
}

:root {
  --background-color: #0d0d0d;
  --background-lighter-color: #212121;
  --white-color: #F3F3F3;
  --purple-color: rgb(131, 30, 255);
}

.darkyl-container {
float: left;
text-align: left;
display: flex;
flex-direction: row;
align-items: center; /* Center items vertically within the row */
overflow: visible;
text-shadow: none;
filter: drop-shadow(0 0 15px rgba(var(--white-color-rgb), 0.4));
font-size: 100%;
flex-wrap: nowrap; /* Prevent wrapping */
transition: transform 0.5s cubic-bezier(.29,0,.16,1)
}

/* Scaling if the content overflows */
@media (max-width: 600px) { /* Adjust the max-width as needed */
.darkyl-container {
    transform: scale(0.8); /* Scale down to 90% */
}
}

/* Button Container */
.button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
cursor: pointer;
height: 50px;
width: 160px;
position: relative; /* Use relative positioning to maintain existing placement */
overflow: hidden;
}

/* Button Styling */
button {
height: 50px;
width: 160px;
clip-path: path("M 0 25 C 0 -5, -5 0, 80 0 S 160 -5, 160 25, 165 50 80 50, 0 55, 0 25");
border: none;
border-radius: 15px;
background-color: hsla(270, 100%, 55%, 0.01); /* Match the original background color */
box-shadow: 0px -3px 15px 0px rgba(173, 85, 255, 0.2) inset; /* Use your previous color values */
color: white;
font-family: "TangoSans";
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(0px);
transition: all 0.2s ease;
cursor: pointer;
}

/* Span for Background Glow */
.blurry-span {
width: 100px;
height: 60px;
background-color: rgba(131, 30, 255, 0.4); /* Match glow to original shadow color */
border-radius: 100%;
filter: blur(20px);
position: absolute;
bottom: -50%;
transition: all 0.2s ease;
}

/* Hover Effects */
.button:hover > span {
opacity: 60%;
}

.button:hover > button {
text-shadow: 0px 0px 20px rgba(243, 243, 243, 1); /* Match the original hover text shadow */
}

.playbutton-container {
margin: 20px auto; /* Keep the existing margin for centering */
transition: transform 0.3s ease; /* Smooth transition for the transform property */
}

.playbutton-container:hover {
transform: translateY(5px);
}


.right {
text-align: right;
width: 100%;
}

.stack {
display: grid;
grid-template-columns: 1fr;
overflow: visible;
text-shadow: none;
}

.stack:hover {
animation: opacity 1s step-end infinite;
}

.stack span {
overflow: visible;
margin-left: 10px;
font-weight: bold;
grid-row-start: 1;
grid-column-start: 1;
font-size: 200%;
--stack-height: calc(100% / var(--stacks) - 1px);
--inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
--clip-top: calc(var(--stack-height) * var(--index));
--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 1s ease infinite 2s alternate-reverse;
}

.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
0% {
  opacity: 0;
  transform: translateX(-50%);
  text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  overflow: visible;
};
60% {
  opacity: 0.5;
  transform: translateX(50%);
  overflow: visible;
}
80% {
  transform: none;
  opacity: 1;
  text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  overflow: visible;
}
100% {
  text-shadow: none;
  overflow: visible;
}
}

@keyframes glitch {
0% {
  text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  transform: translate(var(--glitch-translate));
  overflow: visible;
}
10% {
  text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  overflow: visible;
}
4%, 100% {  text-shadow: none; transform: none; overflow: visible;}
}

.heroImage {
  width: 100%;
  height: 300px;
  object-fit:cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden; /* Ensures the gradient doesn't overflow */
}

.heroImage:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 70px; /* Adjust the height of the fade as needed */
  background: linear-gradient(rgba(255, 255, 255, 0), var(--background-color)); /* Adjust the colors and opacity as needed */
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the child horizontally */
  align-items: center; /* Center the child vertically */
  height: 100%; /* Ensure the container takes up the full viewport height */
  --white-color-rgb: 243, 243, 243;
  text-shadow: 0px 0px 20px rgba(var(--white-color-rgb), 0.4)
}

.parent-container {
  /* Add any styles you need for the parent container */
  display: flex;
  justify-content: center; /* Center the child elements horizontally */
  overflow: visible;
}

.info-container {
  width: 100%; /* Adjust as needed */
  max-width: 600px; /* Add a max-width to prevent it from taking up too much space */
  display: flex;
  align-items: center;
  margin: 10px auto; /* Auto margin horizontally centers the container */
  overflow: visible;
}

.glitch-logo {
  scale: 70%;
  transition: scale 0.5s cubic-bezier(.29,0,.16,1), margin 0.5s cubic-bezier(.29,0,.16,1), filter 0.5s cubic-bezier(.29,0,.16,1);
  filter: drop-shadow(0 0 0px rgba(123, 0, 255, 0));
  display: block;
}

.glitch-logo:hover {
animation: movement 1s step-end infinite, opacity 1s step-end infinite;
  filter: drop-shadow(0 0 20px rgba(123, 0, 255, 0.528));
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes movement {
  0% {
      object-position: 0px -7px;
  }

  15% {
      object-position: 3px 10px;
  }

  60% {
      object-position: 5px -8px;
  }

  75% {
      object-position: -2px 13px;
  }

  100% {
      object-position: 9px 1px;
  }
}

@keyframes opacity {
  0% {
    opacity: 0.5;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.8;
  }

  45% {
    opacity: 0.9;
  }

  76% {
    opacity: 1;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 1;
  }
}


@media screen and (max-width: 600px) {
  .glitch-logo {
      size: 50%;
      scale: 50%;
      margin: -60px;
  }
}
.text-container {
  width: 100%;
  margin: 10px;
  float: left;
  align-items: flex-start;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: visible;
}






.volume-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  transition: 0.5s cubic-bezier(.29,0,.16,1);
}

.volume-container label {
  font-size: 16px;
  margin-right: 10px; /* Adjusted margin */
  color: white; /* Adjust if needed */
  font-family: TangoSans;
}

#volumeSlider {
  appearance: none;
  -webkit-appearance: none;
  width: 0px; /* Adjust width if needed */
  height: 7px;
  background: rgb(131, 30, 255);
  border-radius: 15px;
  outline: none;
  opacity: 0;
  transition: opacity 0.2s, width 0.5s cubic-bezier(.29,0,.16,1);
}

#volumeSlider:hover {
  opacity: 1;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(243, 243, 243, 1);
  transition: box-shadow 0.2s, transform 0.2s; /* Ensure smooth movement */
}

#volumeSlider::-webkit-slider-thumb:hover {
  box-shadow: 0px 0px 20px rgba(243, 243, 243, 1);
}

#volumeSlider::-moz-range-thumb {
  width: 15px; /* Consistent size with WebKit */
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(243, 243, 243, 1);
  transition: box-shadow 0.2s, transform 0.2s; /* Ensure smooth movement */
}

#volumeSlider::-moz-range-thumb:hover {
  box-shadow: 0px 0px 20px rgba(243, 243, 243, 1);
}

/* For Internet Explorer and Edge */
#volumeSlider::-ms-thumb {
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(243, 243, 243, 1);
  transition: box-shadow 0.2s, transform 0.2s; /* Ensure smooth movement */
}

#volumeSlider::-ms-thumb:hover {
  box-shadow: 0px 0px 20px rgba(243, 243, 243, 1);
}

.rotating-text {
  display: inline-block;
  height: 1.2em; /* Adjust this value based on your font size */
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.2em; /* Match this with height for consistent line spacing */
  text-shadow: none;
  color: var(--purple-color);
}

.text-rotate {
  display: inline-block;
  animation: rotate 10s infinite; /* Adjust timing as needed */
}

@keyframes rotate {
  0% { transform: translateY(0%); }
  14% { transform: translateY(-19px); }
  28% { transform: translateY(-38px); }
  42% { transform: translateY(-57px); }
  57% { transform: translateY(-76px); }
  71% { transform: translateY(-95px); }
  85% { transform: translateY(-114px); }
  100% { transform: translateY(-133px); }
}

.friends-container-container {
  margin: 20px;
  border-radius: 75px; /* Rounded corners for the glassmorphic effect */
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.502); /* Subtle shadow to enhance the card effect */
}

.friends-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  
  background: linear-gradient(135deg, hsla(270, 100%, 55%, 0.075), hsla(0, 0%, 0%, 0)); /* Gradient background */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  border-radius: 75px; /* Rounded corners for the glassmorphic effect */
  
  overflow: hidden; /* Ensures child elements don’t overflow */
  box-shadow: 0px -3px 30px 0px rgba(173, 85, 255, 0.2) inset;
  transition: all 0.2s ease;
}

.friends-container:hover {
  box-shadow: 0px -3px 30px 0px rgba(213, 180, 253, 0.281) inset;
  transform: translateY(5px);
}

.friend {
  text-align: center;
  margin: 20px;
  mix-blend-mode: overlay; /* Apply overlay blend mode to the container of each friend */
  z-index: 10;
}

.friend-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: transform 0.3s ease;
  mix-blend-mode: overlay; /* Apply overlay blend mode to images */
}

.friend-name {
  margin-top: 10px;
  margin-bottom: 0px;
  font-size: 18px;
  color: #dfdfdf; /* Adjust color to match your theme */
  mix-blend-mode: overlay; /* Apply overlay blend mode to text */
}

.friend a {
  text-decoration: none;
  color: inherit;
}

.friend-image:hover {
  transform: scale(1.05);
}

/* Span for Background Glow */
.blurry-span-2 {
  width: 100%;
  height: 50%;
  background-color: rgba(131, 30, 255, 0.4); /* Match glow to original shadow color */
  border-radius: 100%;
  filter: blur(100px);
  position: absolute;
  bottom: -25%;
  transition: all 0.2s ease;
  }



  /* Hover Effects */
.friends-container:hover > span {
  opacity: 60%;
  }