@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

.text-left {
    text-align: left;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff;
}

header {
    background-color: #000;
    color: #ffa500;
    text-align: center;
    padding: 10px 0;
}

nav {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

main {
    padding: 20px;
}

section h2 {
    text-align: center;
    margin-bottom: 20px;
}

table {
    width: auto;
    margin: 20px auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    font-size: 0.9em;
    min-width: 400px;
}

th, td {
    padding: 12px 15px;
}

th {
    text-align: left; /* Allinea il testo delle intestazioni a sinistra */
    background-color: #ffa500; /* Sfondo arancione per le intestazioni */
    color: #ffffff; /* Testo bianco per le intestazioni */
    text-transform: uppercase;
}

td {
    text-align: center; /* Mantiene i numeri centrati */
    background-color: #ffffff;
}

tr:nth-of-type(even) {
    background-color: #ffecd1;
}

tr:last-of-type {
    border-bottom: 2px solid #ffa500;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}
/* Stili per la sezione team e piloti */
#team-piloti {
  display: grid;
  grid-template-columns: repeat(1fr); /* Crea una colonna */
  gap: 20px;
  padding: 20px;
}

.team-card {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.team-foto {
  flex: 1; /* Assegna flessibilità alla foto del team */
  display: flex;
  align-items: stretch; /* Estende il contenuto per occupare l'altezza disponibile */
}

.team-foto img {
  width: 95%; /* Larghezza completa all'interno del contenitore */
  height: auto;
  object-fit: cover; /* Assicura che l'immagine si adatti senza distorcere */
  class: 'clickable-image';
}

.team-info {
  flex: 1; /* Assegna flessibilità alle informazioni del team */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pilota {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.pilota h3, .pilota h4 {
  width: 90%; /* Larghezza fissa per i nomi dei piloti */
  margin-right: 2px;
}

.pilota img {
  width: 40%; /* Larghezza per le foto delle auto */
  height:auto; /* Altezza fissa per le foto delle auto */
  object-fit: cover; /* Assicura che le immagini siano tagliate per adattarsi */
  border-radius: 5px;
  margin-right: 5px;
  class: 'clickable-image';
}

/* Assicurati che l'ultima foto dell'auto non abbia un margine in basso */
.pilota:last-child img {
  margin-bottom: 0;
}
.race-button {
    display: inline-block;
    background-color: #000; /* Sfondo nero */
    color: #ffa500; /* Testo arancio */
    padding: 10px 20px;
    margin: 10px;
    text-decoration: none; /* Rimuove il sottolineato dai link */
    border: none;
    border-radius: 5px;
}

.race-button:hover {
    background-color: #333; /* Sfondo più scuro al passaggio del mouse */
}
.home-button {
    display: inline-block;
    background-color: #ffa500; /* Sfondo arancione */
    color: #000; /* Testo nero */
    padding: 5px 10px;
    margin: 10px;
    text-decoration: none; /* Rimuove il sottolineato dai link */
    border: none;
    border-radius: 5px;
}

.home-button:hover {
    background-color: #ff8700; /* Sfondo più scuro al passaggio del mouse */
}
.accordion-content {
    display: block; /* Assicura che il contenuto sia visualizzato */
    overflow-y: auto; /* Permette lo scorrimento verticale se il contenuto è troppo lungo */
    max-height: none; /* Rimuove qualsiasi limite all'altezza massima */
}

/* Aumenta il z-index del contenitore della tabella */
#qualifica {
    z-index: 1000; /* Assicura che la tabella sia sopra gli altri contenuti */
    position: relative; /* Necessario affinché z-index abbia effetto */
}
/* Aggiungi una classe per le immagini cliccabili */
.clickable-image {
  cursor: pointer; /* Cambia il cursore quando si passa sopra l'immagine */
  transition: transform 0.3s ease; /* Aggiunge un'animazione fluida quando l'immagine viene ingrandita */
}

.clickable-image:hover {
  transform: scale(1.1); /* Ingrandisce l'immagine quando si passa sopra con il mouse */
}

/* Utilizza questa classe per le immagini che vuoi rendere cliccabili */
.team-foto img, .pilota img {
  /* ... altre proprietà ... */
  class: 'clickable-image'; /* Aggiungi questa riga */
}
/* Stile per il bottone Regolamento */
.btn-regolamento {
  padding: 10px 20px;
  margin-right: 10px; /* Aggiusta lo spazio a destra se necessario */
  background-color: #4CAF50; /* Colore di sfondo del bottone */
  color: white; /* Colore del testo */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.btn-regolamento:hover {
  background-color: #45a049; /* Colore di sfondo al passaggio del mouse */
}


/* Assicurati che il contenitore principale della pagina permetta lo scorrimento */
html, body {
    height: auto;
    overflow-y: auto;
}

p {
  font-family: Helvetica, Arial, sans-serif;
}