player.css

/* Body Font */
body {
    background-color: #212529;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
/* END body font */

    /* Navbar */

    .navbar {
        border-bottom: 3px solid #deff34;
        background-color: #DEFF34;
    }

    .navbar-brand { /* font will be bold */
        font-weight: bold;
        color: #000000;
        padding-left: 2%;
    }

    .navbar-brand:hover {
        color: #6F7015;
    }

    .navbar-nav .nav-link { /* the color of the font is white [#fff] */
        color: #000000;

    }

    .navbar-nav .nav-link:hover { /* on hover the color will be light yellow [#deff34] */
        color: #6F7015;
    }

    @media (min-width: 768px) {
        /* Navbar */
        .navbar-nav .nav-link {
            font-size: 16px; /* Aumenta la dimensione del font per i link nella navbar */
        }
    }
    /* END Navbar */


    /* Where he played */
.club-transfers {
    width: 80%;          /* Larghezza del div */
    margin: 0 auto;      /* Centra il div orizzontalmente e mantiene il margine verticale a 0 */
    display: block;      /* Assicura che il div sia trattato come un blocco */
}

#clubPlayedContainer {
    display: flex;
    flex-wrap: wrap;        /* Permette agli elementi di andare a capo quando non c'è più spazio */
    align-items: stretch;   /* Stira tutti gli elementi figli per abbinare l'altezza del più alto */
    justify-content: space-around; /* Centra gli elementi orizzontalmente all'interno del contenitore */
    gap: 18px;
}

.clubInfo {

    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    margin-right: 10px; /* Aggiunge spazio tra gli elementi */
    width: 30%; /* Larghezza iniziale come percentuale del contenitore padre */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden; /* Nasconde i contenuti che superano le dimensioni del div */
    text-decoration: none;
    color: black;
    border: 2px solid #deff34;
    background-color: #dddddd;
}

/* Media query per schermi medi (es. tablet) */
@media (max-width: 1024px) {
    .clubInfo {
        width: 45%; /* Aumenta la larghezza su schermi più piccoli per migliore leggibilità */
    }
}

/* Media query per schermi piccoli (es. telefoni cellulari) */
@media (max-width: 768px) {
    .clubInfo {
        width: 45%; /* Larghezza maggiore per occupare più spazio disponibile */

    }
}

.clubInfo:hover {
    background-color: #deff34;
}

.clubInfo a {
    color: #000; /* Imposta il colore del testo a nero, o qualsiasi altro colore che preferisci */
    text-decoration: none; /* Opzionale: rimuove il sottolineato dai link */
}

.club-name {
    font-weight: bold;   /* Rende il testo in grassetto */
    font-size: 20px;     /* Imposta la dimensione del font a 20px */
    text-align: center;
}

.club-date {
    font-size: 12px;     /* Imposta la dimensione del font a 12px */
    text-align: center;
    padding-top: 20px;
}
/* END Where he played */

    /* Player Data */

    .player-container {
        width: 100%; /* Usa l'intera larghezza disponibile */
        max-width: 35%; /* Imposta un massimo per la larghezza del container se necessario */
        margin: 0 auto; /* Auto-margins centrano il blocco orizzontalmente */
        border: 2px solid #000;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #dddddd;
        border-radius: 15px;
    }

    .player-container h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
    }


    .player-info {
        display: flex;
        flex-direction: column; /* Cambiato da 'flex' a 'column' per impilare gli elementi verticalmente */
        align-items: center; /* Centra gli elementi quando sono impilati */
    }

    .player-container img {
        display: block;
        max-width: 150px;
        width: 100%; /* Assicura la responsività */
        height: auto;
        margin-bottom: 10px; /* Distanza tra l'immagine e il nome */
    }

    .player-name {
        font-size: 24px;
        color: #000;
        text-align: center; /* Centra il nome sotto l'immagine */
    }

    /* Media query per schermi più piccoli */
    @media (max-width: 768px) {
        .player-name {
            font-size: 20px; /* Opzionalmente riduci la dimensione del font per adattarlo meglio */
        }
    }
    /* END Player Data */

    /* Divider */

    .custom-divider {
        width: 80%;
        height: 2px; /* Altezza della linea */
        background-color: #deff34; /* Colore della linea */
        margin: 25px auto; /* Centra la linea orizzontalmente e aggiunge spazio sopra e sotto */
    }

    /* END Divider */

    /* Football Career heading*/

    .football-career-heading {
        text-align: left; /* Centra il testo all'interno del div */
        margin: 20px auto; /* Aggiunge spazio sopra e sotto il titolo e centra orizzontalmente */
        width: 75%; /* Imposta la larghezza al 80% del suo contenitore */
        font-size: 24px; /* Imposta la dimensione del font */
        color: #dddddd; /* Imposta il colore del testo */
        font-weight: bold; /* Rende il testo in grassetto */
    }

    /* END Football Career heading*/

    /*test*/

    .w-80 {
        width: 80%;
    }
    /* Stili base per i bottoni */
    .btn {
        background-color: #dddddd; /* Colore di sfondo base */
        color: #212529; /* Colore del testo */
        border: none; /* Rimuove il bordo */
        margin: 15px 0; /* Margine verticale */
        transition: all 0.3s ease; /* Transizione fluida per le proprietà cambiate */
    }

    .btn:hover {
        background-color: #6F7015; /* Colore di sfondo al passaggio del mouse */
        color: #212529; /* Colore del testo al passaggio del mouse */
        transform: scale(1.05); /* Effetto di ingrandimento leggero */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombra leggera */
    }

    .btn.active, .btn:active {
        background-color: #deff34; /* Colore di sfondo quando il bottone è attivo */
        color: #212529; /* Colore del testo quando il bottone è attivo */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Ombra più marcata */
        transform: scale(1.1); /* Leggero ingrandimento */
    }



    .button-container {
        display: flex;
        justify-content: center; /* Distribuisce uniformemente lo spazio tra i bottoni */
        align-items: center; /* Allinea verticalmente al centro */
        width: 80%; /* Imposta la larghezza al 80% del contenitore esterno */
        margin: 0 auto; /* Centra il contenitore orizzontalmente */
        gap: 15%; /* Imposta il gap al 5% del contenitore */
        padding: 20px;
    }
    /*END Of Button Divs*/


    /* Stats V2 */
    .key-stats-container {
        display: flex; /* Display child elements in a row */
        flex-wrap: wrap; /* Allows the items to wrap onto the next line as needed */
        justify-content: space-around; /* Evenly space out the child elements */
        align-items: center; /* Align items vertically */
        width: 80%; /* Set width to 80% of its parent */
        max-width: 1200px; /* Maximum width for larger screens */
        margin: auto; /* Center the container horizontally */
        background-color: #000; /* Background color */
        color: #fff; /* Text color */
        padding: 20px 0; /* Padding above and below */
        box-sizing: border-box; /* Includes padding in the width */
        border: 2px solid #deff34;
    }

    .key-stat {
        text-align: center; /* Center the text inside each stat block */
        flex: 1 1 180px; /* Flex grow, shrink and basis */
        margin: 10px; /* Margin around each stat block for spacing */
    }

    .stat-value {
        font-size: 24px; /* Larger text size for values */
        font-weight: bold; /* Bold font for emphasis */
    }

    .stat-label {
        font-size: 16px; /* Smaller text size for labels */
    }

    /* END Stats V2 */

    /* Player Data */
/* Team Container */
.team-container2 {
    display: flex;
    justify-content: space-between; /* Spaces out the children */
    align-items: center; /* Aligns children vertically in the center */
    width: 80%;
    margin: 0 auto;
    border: 2px solid #000;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #dddddd;
    /* border-radius: 15px; */
}


.left-team-details-content {
    width: 30%;
    /* Additional styling as needed */
}
.team-name2 {
    text-align: center; /* Centers the text horizontally */
    font-size: clamp(16px, 3.5vw, 24px);
    color: #000000; /* Sets the text color to black */
    padding: 10px; /* Adds space around the text */
    margin-top: 10px; /* Adds space between the image and the text */
    font-weight: bold; /* Makes the font bold */
    border-radius: 5px; /* Slightly rounded corners for the background */
}


.right-team-details-content2 {
    display: flex; /* Ensures the children are in a row */
    flex-direction: column; /* Align children in a column */
    width: 70%; /* Adjusted width to match the left side */
    color: #000000;
    padding: 20px;
    justify-content: space-around; /* Distributes space around items */
    align-items: stretch; /* Ensures that children occupy the full width */
}

.row-data2 {
    display: flex; /* Uses flexbox for the row layout */
    flex-direction: row; /* Stacks the key-stats horizontally */
    width: 100%; /* Each row data takes the full width of the parent */
    justify-content: space-between; /* Distributes space evenly between items */
}

.key-stat2 {
    display: flex;
    flex-direction: column; /* Stack the value and label vertically */
    align-items: flex-start; /* Align items to the start of the container */
    text-align: left; /* Align text to the left */
    width: 50%; /* Each stat takes up half of the row-data width */
    margin: 10px 0; /* Vertical margin for spacing, no horizontal margin */
    box-sizing: border-box; /* Includes padding in the width calculation */
}

.stat-value2 {
    font-size: clamp(12px, 3.5vw, 24px); /* Responsive font size */
    font-weight: bold;
}

.stat-label2 {
    font-size: clamp(10px, 2.5vw, 16px); /* Responsive font size */
    margin-top: 4px; /* Space between the value and the label */
}

.left-team-details-content2 {
    width: 30%; /* Adjusted width to give more space to the right side */
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children vertically */
    align-items: center; /* Centers children horizontally */
}


.club-img img2 {
    max-width: 100%; /* Ensure the image does not exceed its container */
    height: auto;
}
/* Responsive adjustments for smaller screens */
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .team-container2 {
        flex-direction: column; /* Stack vertically on small screens */
    }

    .left-team-details-content2,
    .right-team-details-content2 {
        width: 100%; /* Take full width on small screens */
        align-items: center; /* Center content horizontally */
    }

    .right-team-details-content2 {
        flex-direction: column; /* Stack stats vertically */
    }

    .row-data2 {
        flex-direction: column; /* Stack stats vertically within each row-data */
        align-items: center; /* Center each row-data block */
    }

    .key-stat2 {
        width: 100%; /* Each key-stat takes full width */
        align-items: center; /* Center the contents of key-stat */
    }

    .stat-value2, .stat-label2 {
        text-align: center; /* Center the text of value and label */
    }
}


    /* Football player data*/
.button-container button {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
}
/* END Football player Data */

/* Team Logo Container */
.club-image {
    width: 80%;           /* Larghezza del div contenitore */
    margin: 0 auto;       /* Centra il div contenitore orizzontalmente */
    text-align: center;   /* Centra il contenuto testuale e inline all'interno del div */
}

.club-image img {
    display: block;       /* Rende l'immagine un blocco, permettendo margin: auto funzioni per centrare */
    margin: 0 auto;       /* Centra effettivamente l'immagine orizzontalmente all'interno del suo div */
    max-width: 100%;      /* Impedisce all'immagine di uscire dal suo contenitore */
    height: auto;         /* Mantiene l'aspetto originale dell'immagine */
}

/* END Team logo container*/

/*trend Div */
/* Trend Div Styling */
.padding-top-bottom{
    padding-bottom: 20px;
    padding-top: 20px;
}
.trend-div {
    width: 80%; /* Set the width to 80% of its parent container */
    margin: 0 auto; /* Centers the div horizontally */
    padding: 20px; /* Adds some padding around the content */
    background-color: black; /* Light grey background for better contrast */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds subtle shadow for depth */
    border: 2px solid #deff34;
}

/* Ensures the canvas fits within the trend-div properly */
#marketChart {
    width: 100% !important; /* Forces the canvas to fill the trend-div */
    height: auto !important; /* Maintains aspect ratio without explicit height */
    display: block; /* Removes default inline behavior to allow width manipulation */
}

/* Adds styling to the heading for consistency and emphasis */
.trend-div > div > h3 {
    text-align: center; /* Centers the title */
    color: #dddddd; /* Dark grey color for the text for better readability */
    margin-bottom: 20px; /* Adds space below the heading */
}



/* Footer */
.footer {
    background-color: #deff34;
    color: #000;
    padding: 20px;
    padding-left: 3%; /* Aggiusta questa percentuale secondo le tue necessità */
}

.footer .text-muted {
    font-size: 14px;
}
/* END Footer */