:root {
         --bg-image: url('Assets/MilkyWay.png');
         }
         body {
         margin: 0;
         min-height: 100vh;
         background: var(--bg-image) no-repeat center center fixed;
         background-size: cover; 
         font-family: 'Segoe UI', sans-serif;
         color: white;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         }
         canvas {
         background: #111;
         border: 3px solid gold;
         margin-top: 20px;
         margin-bottom: 60px;
         }
         .card {
         background: linear-gradient(
         to bottom right,
         rgba(0, 255, 0, 0.8),    
         rgba(255, 0, 128, 0.8),
         rgba(0, 255, 255, 0.8)   
         );
         border: 3px solid #FF0080;
         border-radius: 20px;
         text-align: center;
         padding: 2rem;
         width: 300px;
         box-shadow: 0 0 15px #000;
         position: relative;
         }
         .card::before {
         position: absolute;
         top: -12px;
         left: -12px;
         background: #00ffc3;
         color: black;
         font-size: 0.7rem;
         font-weight: bold;
         padding: 2px 6px;
         border-radius: 3px;
         }
         .avatar {
         width: 120px;
         height: 120px;
         border-radius: 50%;
         background: white;
         margin: 0 auto 1rem;
         display: block;
         object-fit: cover;
         border: 3px solid #00FF00;
         }
         h1 {
         margin: 0;
         font-size: 1.8rem;
         background: linear-gradient(to right, #FFC0CB, #00FFFF);
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         }
         .name-subtitle {
         margin-top: 8px;
         font-size: 1rem;
         color: #FFC0CB;
         font-style: normal;
         }
         .divider {
         height: 2px;
         background: gold;
         margin: 1rem 0;
         width: 100%;
         }
         .subtitle {
         color: #d4aa00;
         font-weight: bold;
         margin: 0.5rem 0;
         cursor: pointer;
         }
         .socials {
         margin-top: 1rem;
         }
         .socials a {
         margin: 0 8px;
         display: inline-block;
         }
         .social-icon {
         width: 36px;
         height: 36px;
         object-fit: contain;
         border-radius: 6px;
         transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
         display: block;
         }
         .socials a:hover .social-icon {
         transform: scale(1.2);
         filter: brightness(1.3);
         }
         .twitter-icon {
         content: url('Assets/Twitter.png');
         }
         .twitter-link:hover .twitter-icon {
         content: url('Assets/X.png');
         }
         .avatar {
         width: 120px;
         height: 120px;
         border-radius: 50%;
         background: white;
         margin: 0 auto 1rem;
         display: block;
         object-fit: cover;
         transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
         }
         .avatar:hover {
         transform: scale(1.1);
         filter: brightness(1.2);
         }
         .spotify-container {
         position: fixed;
         top: 50%;
         right: -303px;
         width: 300px;
         height: 400px;
         background: rgba(0, 0, 0, 0.85);
         border-left: 3px solid #00FF00;
         border-radius: 20px 0 0 20px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         transition: right 0.4s ease;
         z-index: 999;
         transform: translateY(-50%);
         }
         .spotify-container iframe {
         border-radius: 12px;
         width: 90%;
         height: 100%;
         }
         .pull-bar {
         position: absolute;
         top: 50%;
         left: -30px;
         width: 30px;
         height: 80px;
         background: #ff0080;
         color: white;
         font-weight: bold;
         writing-mode: vertical-rl;
         text-align: center;
         line-height: 80px;
         border-radius: 8px 0 0 8px;
         cursor: pointer;
         user-select: none;
         transform: translateY(-50%);
         transition: background 0.3s;
         }
         .pull-bar:hover {
         background: #ff3399;
         }
         .spotify-container.open {
         right: 0;
         }
         .pull-bar {
         position: absolute;
         top: 50%;
         left: -69px;
         width: 66px;
         height: 80px;
         background: #1DB954;
         border-radius: 8px 0 0 8px;
         cursor: pointer;
         user-select: none;
         transform: translateY(-50%);
         display: flex;
         justify-content: center;
         align-items: center;
         transition: background 0.3s;
         }
         .pull-bar:hover {
         background: #1ed760;
         }
         .spotify-icon {
         width: 30px;
         height: 30px;
         object-fit: contain;
         filter: brightness(0) invert(1);
         transition: transform 0.3s ease;
         }
         .pull-bar:hover .spotify-icon {
         transform: scale(1.2);
         }
         #restartBtn {
         display: none;
         margin-top: -50px;
         padding: 10px 20px;
         font-size: 16px;
         background-color: #FF0080;
         color: #00FFFF;
         border: none;
         border-radius: 8px;
         cursor: pointer;
         }
         #restartBtn:hover {
         background-color: #FF0000;
         }
         .card {
         position: relative; 
         }
         .card-sticker {
         position: absolute;
         top: -20px;     
         right: -9px;    
         width: 120px;    
         height: 120px;
         object-fit: contain;
         z-index: 10;    
         transform: rotate(20deg); 
         }
         .card-sticker2 {
         position: absolute;
         top: 20px;     
         right: -30px;    
         width: 120px;    
         height: 120px;
         object-fit: contain;
         z-index: 10;    
         transform: rotate(5deg); 
         }
         #spaceBox {
         position: fixed;
         width: 140px;
         height: 140px;
         z-index: 9999;
         pointer-events: none; 
         }
         @keyframes spinSlow {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
         }
         #spaceBox img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         animation: spinSlow 30s linear infinite;
         }