/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html, body {
      background-color: #0d1117;
      height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.sport-icon {
    position: absolute;
    top: 60px; /* 👈 move it down more */
    left: 15px;
    width: 40px;
    height: 40px;
    object-fit: contain;
    z-index: 10;
}


table img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}



.sport-badge img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 10px;
}



.profile {
    position: relative;
    background: linear-gradient(145deg, #111, #1c1c1c);
    border: 2px solid #4ecdc4;
    box-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
}

.sport-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #4ecdc4;
    color: #000;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.athlete-name {
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 10px #4ecdc4;
    animation: glow-in 0.8s ease-out;
}

@keyframes glow-in {
    0% { opacity: 0; transform: scale(0.95); text-shadow: none; }
    100% { opacity: 1; transform: scale(1); }
}








/* Canvas for node network */
canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d1117;
}

/* Text container on top of the canvas */
.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Slight transparency */
    color: #fff;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    z-index: 10; /* Layer above canvas */
}

/* Text styling */
.text-container h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.text-container p {
    font-size: 1.2em;
}

/* Styling for the links */
ul {
    list-style-type: none;
}

ul li {
    margin: 10px 0;
}

ul li a {
    color: #1e90ff;
    text-decoration: none;
    font-size: 1.2em;
}

ul li a:hover {
    text-decoration: underline;
    color: #ff4757; /* Change color on hover */
}

/* Node Glow Effect */
.shape {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* Hover Effect for Links */
ul li a {
    color: #1e90ff;
    text-decoration: none;
    font-size: 1.2em;
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

ul li a:hover {
    text-shadow: 0px 0px 10px rgba(255, 71, 87, 0.8); /* Glowing hover effect */
    color: #ff4757; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge the text on hover */
}


/* Parallax container to control 3D depth */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Moving layers at different speeds */
.layer-1 {
    transform: translateZ(-1px) scale(2); /* Furthest layer */
}
.layer-2 {
    transform: translateZ(-0.5px) scale(1.5); /* Middle layer */
}
.layer-3 {
    transform: translateZ(0px) scale(1); /* Closest layer */
}

Node.prototype.draw = function() {
    // Calculate the distance between the node and the mouse
    let distX = this.x - mouse.x;
    let distY = this.y - mouse.y;
    let distance = Math.sqrt(distX * distX + distY * distY);

    // Change node color based on distance from mouse
    let red = Math.min(255, Math.floor(255 - distance * 0.5));
    let blue = Math.min(255, Math.floor(distance * 0.5));
    ctx.fillStyle = `rgb(${red}, 0, ${blue})`;  // Gradient from red to blue

    // Draw the node
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
};