body{
  background-color: #767bb5;
  font-family: 'Futura Condensed PT', sans-serif;
  font-family: 'Futura PT', sans-serif;
  font-weight: 400;

  
  display: flex;
  flex-direction: column;
  align-items : center;
  justify-content : right;
}

.container{
  margin-top: 10vh;
  margin-bottom: 15vh;
  display: flex;
  flex-direction: column;
  row-gap: 25px;
}

.title{
  border: 1px solid black;
  padding : 10px 0 10px 0;
  width: 100%;
  border-radius: 25px;
  text-align: center;
  background-color: #e3e3e3;
  box-shadow: 5px 5px 28px 2px rgba(0,0,0,0.34);
  
  display: flex;
  flex-direction: column;
}

h1{
  margin: 0;
}

.row-container{
    display: flex;
    column-gap: 20px;
    align-items: right;
}

.menu{
  border: 1px solid black;
  padding : 30px;
  height: 420px;
  border-radius: 25px;
  background-color: #e3e3e3;
  box-shadow: 5px 5px 28px 2px rgba(0,0,0,0.34);
  
  display: flex;
  flex-direction: column;
}

.menu-h2{
    margin:0;
}

.php-features{
  border: 1px solid black;
  padding : 30px;
  min-width: 550px;
  border-radius: 25px;
  background-color: #e3e3e3;
  box-shadow: 5px 5px 28px 2px rgba(0,0,0,0.34);
  
  display: flex;
  flex-direction: column;
}

h2{
  margin: 0;
}

p{
  margin: 0;
}






.root-form{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  row-gap: 5px;
}

.joueurs{
  padding : 10px;
  border: 1px solid black ;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(87,129,161,1) 40%, rgba(104,157,195,1) 40%);

  display: flex;
  align-items: center;
}

.matchs{
  padding : 10px;
  border: 1px solid black ;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(107,48,68,1) 40%, rgba(177,78,115,1) 40%);

  display: flex;
  align-items: center;   
}

.root-form-ok{
  font-family: 'Futura PT', sans-serif;
  font-weight: 600;
  margin-top:20px;
  padding : 10px;
  width: 50px;
  border: 1px solid black ;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(19,113,57,1) 40%, rgba(38,147,33,1) 40%);
  color: white;

  display: flex;
  justify-content: center;
}

.root-form div label{
  margin: 0;
  color: white;
}












.player-table{
  font-family: "Courier New", sans-serif;
  font-weight: bold;
  border-collapse: separate;
  border-spacing: 0 0.5em;
}

.player-table td{
  margin: 20px;
  border: 1px solid black;
  padding: 5px 0 5px 10px;
  background: linear-gradient(0deg, rgba(98,69,68,1) 40%, rgba(128,101,93,1) 40%);
  color: white;
}

.player-table td:first-child{
  border-radius: 5px 0 0 5px;
}

.player-table td:last-child{
  border-radius: 0 5px 5px 0;
}

.player-table th{
  font-weight: bold;
  text-align: left;
  margin: 20px;
  border: 1px solid black;
  padding: 5px 0 5px 10px;
  background: linear-gradient(0deg, rgba(90,48,107,1) 40%, rgba(121,78,177,1) 40%);
  color: white;
}

.player-table th:first-child{
  border-radius: 5px 0 0 5px;
}

.player-table th:last-child{
  border-radius: 0 5px 5px 0;
}










.count-table{
  font-family: "Courier New", sans-serif;
  font-weight: bold;
  width: 30%;
  border-collapse: separate;
  border-spacing: 0;
}

.count-table td{
  margin: 20px;
  border: 1px solid black;
  padding: 5px 0 5px 10px;
  background: linear-gradient(0deg, rgba(98,69,68,1) 40%, rgba(128,101,93,1) 40%);
  color: white;
}

.count-table td:first-child{
  border-radius: 0 0 0 5px;
}

.count-table td:last-child{
  border-radius: 0 0 5px 0;
}

.count-table th{
  font-weight: bold;
  text-align: left;
  margin: 20px;
  border: 1px solid black;
  padding: 5px 0 5px 10px;
  background: linear-gradient(0deg, rgba(90,48,107,1) 40%, rgba(121,78,177,1) 40%);
  color: white;
}

.count-table th:first-child{
  border-radius: 5px 0 0 0;
}

.count-table th:last-child{
  border-radius: 0 5px 0 0;
}











.insert-form{
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.insert-form div{
  display: flex;
  flex-direction: column;
}

.insert-form select{
  width: 100px;
}


#age{
  width: 50px;
}








.delete-form-table{
  font-family: "Courier New", sans-serif;
  font-weight: bold;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5em;
  overflow: auto;
}

.delete-form-table td{
  margin: 20px;
  border: 1px solid black;
  padding: 5px 0 5px 10px;
  background: linear-gradient(0deg, rgba(98,69,68,1) 40%, rgba(128,101,93,1) 40%);
  color: white;

}

.delete-form-table td:first-child{
  border-radius: 5px 0 0 5px;
}

.delete-form-table td:last-child{
  border-radius: 0 5px 5px 0;
  padding: 5px;
  text-align: center;
}

.delete-form-table th{
  font-weight: bold;
  text-align: left;
  margin: 20px;
  border: 1px solid black;
  padding: 5px 0 5px 10px;
  background: linear-gradient(0deg, rgba(90,48,107,1) 40%, rgba(121,78,177,1) 40%);
  color: white;
}

.delete-form-table th:first-child{
  border-radius: 5px 0 0 5px;
}

.delete-form-table th:last-child{
  border-radius: 0 5px 5px 0;
  text-align: center;
}









.boutons-annexes{
  font-family: 'Futura PT', sans-serif;
  font-weight: 600;
  margin-top:20px;
  padding : 10px;
  border: 1px solid black ;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(87,129,161,1) 40%, rgba(104,157,195,1) 40%);
  color: white;

  display: flex;
}

.boutons-annexes-supprimer{
  font-family: 'Futura PT', sans-serif;
  font-weight: 600;
  padding : 10px;
  border: 1px solid black ;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(113,19,19,1) 40%, rgba(147,33,33,1) 40%);
  color: white;

  display: flex;
}

.boutons-annexes-inserer{
  font-family: 'Futura PT', sans-serif;
  font-weight: 600;
  padding : 10px;
  width: fit-content;
  border: 1px solid black ;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(87,129,161,1) 40%, rgba(104,157,195,1) 40%);
  color: white;

  display: flex;
  justify-content: center;
}