body {
  background-image: url("./images/background.jpg");
  background-size: cover;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

#cart {
  background-color: #eff2f1;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

/****HEADER***/

header {
  background-color: white;
  display: flex;
  justify-content: space-between;
}

.active {
  font-weight: 600;
  padding-left: 30px;
  color: #459e85;
}

.menu {
  display: flex;
  padding-right: 70px;
  align-items: center;
}

.menu > a {
  color: #3a3a3a;
  font-weight: 600;
  padding-left: 30px;
}

.menu > a:hover {
  color: #459e85;
}

a {
  text-decoration: none;
  color: #00b7ff;
}

/****MAIN***/

main {
  text-align: center;
}

h1 {
  color: white;
  font-weight: 400;
  font-size: 36px;
  padding-top: 60px;
}

h2 {
  color: white;
  font-weight: 100;
}

#central {
  display: flex;
  justify-content: center;
  text-align: center;
}

.encart {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  width: 300px;
  max-height: 350px;
  margin: 30px 100px;
  text-align: center;
}

#SearchForm {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 350px;
}

#signUp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#signIn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
}

#signInForm {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

#signUp button {
  width: 50%;
  color: white;
  background-color: #459e85;
  padding: 10px;
  border: 0px;
  border-radius: 3px;
  margin-top: 100px;
  align-self: center; /* Centre le bouton */
}

#signIn button {
  width: 50%;
  color: white;
  background-color: #459e85;
  padding: 10px;
  border: 0px;
  border-radius: 3px;
  margin-top: 100px;
  align-self: center; /* Centre le bouton */
}

.signUp {
  background-color: #e0e0e0;
  border: 0px;
  padding: 15px;
  border-radius: 5px;
}

.signIn {
  background-color: #e0e0e0;
  border: 0px;
  padding: 15px;
  border-radius: 5px;
}

#logoTrain {
  width: 60%;
}

#tripEmpty {
  color: #3a3a3a;
  font-size: 18px;
}

hr {
  background-color: #459e85;
  color: #459e85;
  height: 1px;
  border-radius: 50px;
  width: 80%;
}

#tripsList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
  padding: 5px;
}

.tripsContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5eeee;
  margin-top: 10px;
  border-radius: 5px;
}

.tripsContainer button {
  color: white;
  background-color: #459e85;
  border: 0px;
  border-radius: 3px;
  align-self: center;
  padding: 1px 3px;
}