/* Reset and General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center; /* Centers the card horizontally */
  align-items: flex-start; /* Aligns the card to the top */
  padding-top: 11vh; /* Adds some space from the very top edge */
  margin: 0;
  min-height: 100vh;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 500px;
    z-index: 100;
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(0, 255, 255, 0.4); /* Cyan glow */
    
    /* CRITICAL: Keep stars inside */
    position: relative; 
    overflow: hidden; 

    /* THE NEBULA BACKGROUND (Navy -> Violet -> Cyan) */
    background: linear-gradient(180deg, #020024, #5a189a, #00d4ff);
    background-size: 400% 400%;

    /* The "RGBing" blending animation */
    animation: nebula-shift 10s ease infinite;
}

/* Animation to blend the background colors */
@keyframes nebula-shift {
    0% { background-position: 50% 0%; }
    50% { background-position: 50% 100%; }
    100% { background-position: 50% 0%; }
}


 .line-divider {
    position: relative;
    top: -98px; /* Adjust for vertical positioning */
    left: 0px; /* Adjust as needed, relative to the card */
    width: 402px; /* Adjust as needed, relative to the card */
    height: 2px;
    background-color: #85daf6;
    z-index: 1;
    transform: translateY(-50%); /* Precise vertical centering */
    margin-top: 5%;
}
.PfP {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-bottom: 1em; /* Add space below the image */
    z-index: 100;
}

.MyName {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: bolder;
    color: whitesmoke;
    margin-bottom: 0.5em;
    text-align: center;
    z-index: 100;
}

.Title {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 0.8;
    font-weight: bolder;
    color: whitesmoke;
    margin-bottom: 0.5em;
    text-align: center;
    z-index: 100;
}

.Name {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 0.8rem;
    font-weight: bolder;
    color: whitesmoke;
    text-align: center;
    margin-bottom: 1em;
    z-index: 100;
}





.card-content {
    position: relative; /* Create a stacking context for the content */
    z-index: 500; /* Ensure content is above the background */
    /* Other styles for the content area */
}


.container1 .box1 {
    background: #a888ff;
    position: relative;
    width: 20%;
    height: 330px;
    border-radius: 20px;
    top: 10px;
    right: 160px;
    z-index: 200;
    
}
.container1 .box1::before
{
content: '';
position: absolute;
inset:0;
border-radius: 20px;
background: #E765E0;
filter: blur(30px);
z-index: 100;
top: 50px;
}

.container1 .box1 b
{
    position: absolute;
    display: block;
    
  inset: 4px;
  border-radius: 16px;
  background: #EA79E4;
  z-index: 100;


}



.Youtube,
.Twitch,
.Discord,
.BlueSkyl {
    position: relative;
    width: 50px;
    height: 50px;
    top: auto;
    left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: 300% 300%;
    cursor: pointer;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
    transition: 0.5s;
    animation: gradient_301 5s ease infinite;
    border: double 4px transparent;
    background-image: linear-gradient(#212121, #212121),
        linear-gradient(137.48deg,
            #eb0d0d 10%,
            #fe53bb 45%,
            #8f51ea 67%,
            #0044ff 87%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.Youtube {
    top: 75px;
    left: 225px;
}

.Twitch {
    top: 25px;
    right: -30px;
}

.Discord {
    top: -25px;
    left: 95px;
}

.BlueSkyl {
    top: -75px;
    left: 160px;
}

.Youtube:hover #container-stars,
.Twitch:hover #container-stars,
.Discord:hover #container-stars,
.BlueSkyl:hover #container-stars 
{
 z-index: 100;
background-color: #212121



}

.Youtube:hover ,
.Twitch:hover ,
.Discord:hover ,
.BlueSkyl:hover 
{
 transform: scale(1.1);

}

.Youtube:active ,
.Twitch:active ,
.Discord:active ,
.BlueSkyl:active
{
border: double 4px #fe53bb;
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: none;
}

.Youtube:active .circle,
.Twitch:active .circle,
.Discord:active .circle,
.BlueSkyl:active .circle
{
  background: #fe53bb;
}



.X,
.Steam,
.Spotify,
.BlueSky {
    position: relative;
    width: 200px;
    height: 40px;
    top: auto;
    left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: 300% 300%;
    cursor: pointer;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
    transition: 0.5s;
    animation: gradient_301 5s ease infinite;
    border: double 4px transparent;
    background-image: linear-gradient(#212121, #212121),
        linear-gradient(137.48deg,
            #eb0d0d 10%,
            #fe53bb 45%,
            #8f51ea 67%,
            #0044ff 87%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.container1 .box1 .X a,
.container1 .box1 .Steam a,
.container1 .box1 .Spotify a,
.container1 .box1 .BlueSky a {
  text-decoration: none;
}
.X {
    top: -30px;
    left: 50px;
}

.BlueSky {
    top: -85px;
    left: 50px;
}

.Steam {
    top: 130px;
    left: 50px;
}

.Spotify {
    top: 20px;
    left: 50px;
}

.X img,
.Steam img,
.Spotify img,
.BlueSky img {
    float: left;
    position: relative;
}

.X img {
    bottom: 10px;
    right: 8px;
}

.Steam img {
    bottom: 13px;
    left: 5px;
}

.Spotify img {
    bottom: 10px;
    left: 4px;
}

.BlueSky img {
    bottom: 18px;
    right: 25px;
}



#container-stars {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
}

strong {
    z-index: 2;
    font-family: "Avalors Personal Use";
    font-size: 12px;
    letter-spacing: 5px;
    color: #ffffff;
    text-shadow: 0 0 4px white;
}

#glow {
    position: absolute;
    display: flex;
    width: 12rem;
}

.circle {
    width: 100%;
    height: 30px;
    filter: blur(2rem);
    animation: pulse_3011 4s infinite;
    z-index: -1;
}

.circle:nth-of-type(1) {
    background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
    background: rgba(142, 81, 234, 0.704);
}

.X:hover #container-stars,
.Steam:hover #container-stars,
.Spotify:hover #container-stars,
.BlueSky:hover #container-stars {
    z-index: 100;
    background-color: #212121;
}

.X:hover,
.Steam:hover,
.Spotify:hover,
.BlueSky:hover {
    transform: scale(1.1);
    z-index: 100;
}

.X:active,
.Steam:active,
.Spotify:active,
.BlueSky:active {
    border: double 4px #fe53bb;
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: none;
}

.X:active .circle,
.Steam:active .circle,
.Spotify:active .circle,
.BlueSky:active .circle {
    background: #fe53bb;
}

#stars {
    position: relative;
    background: transparent;
    width: 200rem;
    height: 200rem;
}

#stars::after {
    content: "";
    position: absolute;
    top: -10rem;
    left: -100rem;
    width: 100%;
    height: 100%;
    animation: animStarRotate 90s linear infinite;
}

#stars::after {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
}

#stars::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 170%;
    height: 500%;
    animation: animStar 60s linear infinite;
}

#stars::before {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
    opacity: 0.5;
}

@keyframes animStar {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-135rem);
    }
}

@keyframes animStarRotate {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}

@keyframes gradient_301 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse_3011 {
    0% {
        transform: scale(0.75);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.75);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
}

/* ... your existing CSS ... */

.X p, .Steam p, .Spotify p, .BlueSky p { /* Applies to all button text */
    color: white; /* Base text color */
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white; /* Glowing effect */
    letter-spacing: 2px;
}

.X p, .X img,
.Steam p, .Steam img,
.Spotify p, .Spotify img,
.BlueSky p, .BlueSky img,
.Youtube img,
.Twitch img,
.Discord img,
.BlueSkyl img {
    position: relative;
    z-index: 101; 
}

/* --- MOBILE FIXES --- */
@media only screen and (max-width: 600px) {
    
    /* 1. Make the main card take up more space on phone screens */
    .main-container {
        width: 90%; 
        max-width: none;
        padding-bottom: 20px; /* Add room at bottom */
        position: relative;
        bottom: 70px;
    }

    /* 1. Fix the container width and alignment */
    .container1 .box1 {
        width: 100%;  /* Let the container fill the card */
        position: relative;    
        right: 0px;      /* Remove the desktop shift */
        left: -150px; 
        bottom: 60px;
        margin-top: 20px;
    }

   

    /* 3. Adjust the Divider Line */
    .line-divider {
        width: 90%; /* Use percentage instead of fixed 402px */
        top: -20px; /* Adjust vertical position */
        margin: 20px auto;
    }

    /* 4. Fix specific button overlapping if needed */
    /* Since your buttons use absolute offsets (top/left), 
       the 'scale(0.85)' above should help keep them on screen. */
}