body {
    cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="0.25" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), auto;
    user-select: none;
    margin: 0;
    padding: 50px;
    overflow-y: scroll;
    font-family: 'Minecraftia', sans-serif;
    background-color: #000000;
}

#bg,
#bg_mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -300px;
  left: 0;
  perspective: 1500px;
  background: url(../img/299932.jpg);
  filter: blur(5px) brightness(0.3);
  z-index: -100;
}

.container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    max-width: 1200px; 
    margin: auto;
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1em;
    background: rgba(150, 150, 175, 0.1);
    width: 350px; 
    height: 340px; 
    box-shadow: 0 4px 8px rgba(103, 93, 250, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    margin: 20px; 
    transition-duration: 400ms;
    transition-property: transform, box-shadow;
    transition-timing-function: ease-out;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.card:hover {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23FFFFFF" stroke-width="0.25" stroke-linejoin="round" d="m12 3 2.23 6.88h7.23l-5.85 4.24L17.85 21 12 16.75 6.15 21l2.24-6.88-5.85-4.24h7.23L12 3z"></path></svg>'), auto;
    transform: scale(1.05);
}

.pfp {
    width: 110px;
    border-radius: 60px;
    box-shadow: 0 4px 8px rgba(158, 151, 255, 0.5);
    margin-bottom: 10px;
    position: relative;
    top: 50px;
    height: 110px;
}

.name-text {
    user-select: text;
    color: white;
    font-size: 1.5em;
    margin-top: 60px;
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

.social-icons .icon img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s;
}

.social-icons .icon:hover img {
    transform: scale(1.3);
}

.Header {
    border-radius: 10px;
    padding: 2px;
    z-index: 2;
    position: absolute;
    top: 3%;
    right: 50%;
    transform: translate(50%, -50%);
    text-transform: uppercase;
    font-family: 'Minecraftia', sans-serif;
        font-size: 2em;
    font-weight: 700;
    color: #f3f3f3;
    transition: color 0.5s ease, text-shadow 0.5s ease;
  }
  
  .Header:hover {
    cursor: pointer;
    color: #ffffff;
    text-shadow: 
        1px 1px 1px #b3b3b3,
        1px 2px 2px rgba(209, 209, 209, 0.6),
        1px 3px 3px rgba(209, 209, 209, 0.6),
        1px 10px 6px rgba(255, 255, 255, 0.8),
        1px 12px 10px rgba(255, 255, 255, 0.5),
        1px 15px 35px rgba(255, 255, 255, 0.5),
        1px 15px 60px rgba(255, 255, 255, 0.8); 
  }

  .music-button {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(158, 151, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 6px;
    border: 1px solid rgba(92, 92, 92, 0.315);
    position: fixed;
    top: 20px;
    left: 20px;
    cursor: pointer;
    z-index: 1000;
    overflow: hidden;
    width: 55px;
    height: 50px;
}

.music-button img {
    background: rgba(146, 146, 146, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    width: 55px;
    height: 50px;
    transition: opacity 0.1s ease;
    position: absolute;
}

.music-button img.hidden {
    opacity: 0.1;
}