#map{
    height:600px;
    width:100%;
    position:relative;
    outline-style:solid;
    outline-width:2px;
    flex:1.5;
    margin:8px
}
#fan{
    position:relative;
    text-align:center;
    font-size:35px;
    font-weight:bold;
    font-family:comic sans ms;
    color:#e11d69;
}
#desc{
    position:relative;
    text-align:center;
    font-size:20px;
    font-family:segoe print;
    color:#0064ff;
}
#textbased{
    flex:0.8;
    position:relative;
    text-align:center;
    font-size:17px;
    font-family:comic sans ms;
    color:white;
    margin:8px
}

.info-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  margin-left: 6px;
}

.tooltip-image {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 10;
  bottom: 130%;
  left: 50%;
  transform: translateX(-60%);

  background: #fff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  transition: opacity 0.2s ease;
}

.tooltip-image img {
  display: block;
  width: 410px;      /* adjust to your image size */
  height: auto;
  border-radius: 4px;
}

/* little arrow pointing down */
.tooltip-image::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.info-tooltip:hover .tooltip-image {
  visibility: visible;
  opacity: 1;
}
.number-marker div {
    width:28px;
    height:28px;
    border-radius:50%;
    background:#1976d2;
    color:white;
    text-align:center;
    line-height:28px;
    font-weight:bold;
    border:2px solid white;
    box-shadow:0 0 4px rgba(0,0,0,0.4);
    font-size:14px;
}
.button {
    position: relative;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    font-family: comic sans ms;
    color: white;
    background-color: #55a4f3; 
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 5px;
    margin:7px;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.emoji {
    font-size: 50px;
    transition: transform 0.3s ease-in-out;
}

/* Container for the pitch/field where the ball moves */
        .pitch {
            position: relative;
            width: 100%;
            /* height: 15vh; */
            margin-top: 15px;
        }

        /* The Football styling and animation wrapper */
        .ball-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            /* Combined animation: 'move' handles left-to-right, 'bounce' handles up-and-down */
            animation: move 8s linear infinite alternate, bounce 1.2s ease-in-out infinite alternate;
        }

        .football {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: relative;
            /* Adds a rolling effect to the ball */
            animation: roll 2s linear infinite;
        }

        /* Creating classic football panels using SVG background */
        .football::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-image: url("ball2.jpg");
            background-size: cover;
            opacity: 0.9;
            border-radius: 50%;
        }

        /* ANIMATIONS */

        /* 1. Moving side to side across the screen */
        @keyframes move {
            0% {
                left: 5%;
            }
            100% {
                left: 85%;
            }
        }

        /* 2. Bouncing up and down */
        @keyframes bounce {
            0% {
                bottom: 0px;
                transform: scaleY(0.85) scaleX(1.1); /* Squash when hitting the ground */
            }
            10% {
                transform: scaleY(1) scaleX(1); /* Return to normal shape quickly */
            }
            100% {
                bottom: 250px; /* Max height of the bounce */
            }
        }

        /* 3. Rolling effect */
        @keyframes roll {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }