body{
  background-color: #efefef38;
    }
.header {
    background-image: url('imag1.jpg');
      background-repeat: no-repeat;
      background-size: cover; 
}

#dj {
        background: #48373bc4;
    padding: 5px 20px;
    border-radius: 20px;
}

/* Style pour le tableau */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

  /* Centrer le formulaire */
  h1, h2{
    text-align: center;
    color: #00d6ac;
    font-family: sans-serif;
  }
 
form.tri {
    text-align: right;
  } 
   form.tri a{
    text-align: right;
    text-decoration:none;
  }

  /* Ajouter une marge aux boutons */
  span.sort {
    margin: 10px;
    background-color: #00d6ac;
    font-size: x-large;
    color: #c4c4c4;
    padding: 2px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  
/* Style pour les cellules de données */
td {
  border: 1px solid #ddd;
  padding: 1rem;
}

/* Style pour les actions */
.action {
  text-align: center;
}

.action button {
  background-color: crimson;
  color: white;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: larger;
}
.morceau > .title {
    font-size : xx-large;
    font-family: fantasy;
    color: crimson;
}

.morceau > .artist {
    font-size : x-large;
}

/* Style pour les icônes */
.action .icon {
  font-size: 1.5rem;
  color: #FF69B4;
  cursor: pointer;
}

/* Style pour les smartphones */
@media screen and (max-width: 480px) {
  table, table tr, table td, table th {
    font-size: 24px;
  }
}

/* Style pour les écrans larges */
@media screen and (min-width: 768px) {
  td.morceau {
    width: 75%;
    font-size: 24px;
  }
   td.num_morceau {
    width: 5%;
    font-size: 24px;
  } 
  
td.action{
      width :20%;
  }
}