@import url(./reset.css);

/* Couleurs */
:root {
  --primary-color: #8b80f9;
  --background-color: #f4f4f4;
  --button-color: #8b80f9;
  --button-hover-color: #8b80f9;
  --text-color: #fff;
}

/* Header */
header {
  background-color: var(--primary-color);
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-shadow: 1rem 1rem 1rem 1rem rgba(62, 62, 62, 0.267);

}

header h1 a {
  color: var(--text-color);
  display: flex;
  align-items: center;
}

header h1 a img {
  height: 5.1rem;
  margin-right: 1.625rem;

}

header nav ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

header nav ul li {
  margin-right: 1.25rem;
}

header nav a {
  color: var(--text-color);
  text-decoration: none;
  margin-right: 2.5rem;
}

header nav a:hover {
  color: #000;
  font-size: 1.5rem;
  transition: 1s;
}

/* Home Container */
.home-container {
  background: url(../asset/image_bg.jpg) no-repeat center center / cover;
  position: relative;
  width: 100%;
  height: 100vh;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.274);

}

.home-desc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.668);
  padding: 1rem;
  max-width: 60rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 3rem;

}

.home-desc img {
  width: 50%;
  height: 50%;
}

.home-desc p {
  font-weight: bolder;
  font-size: 2rem;
}


/* Home Container Part 2 and register-container*/
.register-container,
.home-container-part2 {
  background-color: var(--background-color);
  padding: 1.25rem;
  text-align: center;
}

.home-container-part2 h2 {
  text-align: center;
  justify-content: left;
  margin: 2rem auto;
}

.register-container h2,
.home-container-part2 h2 {
  font-size: 3rem;
  margin-bottom: 2rem;

}

.register-container form {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  max-width: 50rem;
  margin: 0 auto;
}

.home-container-part2 form {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 50rem;
  margin: 0 auto;
}


.register-container input,
.home-container-part2 input {
  background-color: rgba(217, 217, 217, 0.851);
  width: 100%;
  padding: 1rem;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}

.home-container-part2 button {
  background-color: var(--button-color);
  color: var(--text-color);
  padding: 1rem 3rem 1rem 3rem;
  border: none;
  border-radius: 3rem;
  cursor: pointer;
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}

.home-container-part2 button:hover {
  background-color: var(--button-hover-color);
  color: #000;
  transition: 0.5s;

}

/* Home Container Part 3 */
.home-container-part3 {
  background-color: var(--background-color);
  max-width: 70rem;
  margin: 0 auto;
  padding: 4rem 0;
  text-align: center;
  border: 1px solid #000;

  margin-bottom: 5rem;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.274);

}

/* Connexion */
.register-container,
.Connexion {
  background-color: #fff;
  border-radius: 2rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  max-width: 50rem;
  width: 100%;
  margin: 5rem auto;
  border: 1px solid #000;
}

.register-container h2,
.Connexion h2 {
  margin: 2rem 0 3rem 0;
  text-align: center;
}

.register-container label,
.Connexion label {
  display: block;
}

.Connexion input {
  background-color: rgba(217, 217, 217, 0.851);
  width: 100%;
  padding: 1.5rem;
  margin-bottom: 2.1875rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}

.register-container input {
  background-color: rgba(217, 217, 217, 0.851);
  width: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}

.register-container button,
.Connexion button {
  background-color: var(--button-color);
  color: var(--text-color);
  padding: 1rem 5rem 1rem 5rem;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  margin: 1rem auto;
}

.Connexion button {
  background-color: var(--button-color);
  color: var(--text-color);
  padding: 1rem 5rem 1rem 5rem;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  margin: 2rem 0 1rem 14rem;
}


.register-container button:hover,
.Connexion button:hover {
  background-color: var(--button-hover-color);
  color: #000;
  transition: 0.5s;
}

/*page film */
.all_films_desc {
  display: flex;
  align-items: center;
  justify-content: left;
  margin: 5rem auto;
}

.all_films_desc p {
  text-align: justify;
  max-width: 30%;
  font-size: 2.5rem;
  font-weight: bolder;

}

.all_films_desc img {
  width: 25%;
  border: 1.5px solid;
  border-radius: 3rem;
  margin-right: 5rem;
  margin-left: 15rem;
}

.device_desc {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-left: 0;
}

.device_desc p {
  text-align: left;
  font-size: 2.5rem;
  font-weight: bolder;
  max-width: 30%;
  margin-right: 5rem;
}

.device_desc img {
  width: 30%;
  margin-right: 15rem;

}

/* Style de la grille */
.grid-container {
  background-color: rgba(64, 64, 64, 0.8);
  max-width: 90rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  padding: 2rem 0rem 2rem 5rem;
  border-radius: 2rem;
  margin: 5rem auto;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.274);

}

.grid-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 90%;
  overflow: hidden;
}

.grid-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  object-fit: unset;
  border-radius: 3rem;
  border: #000 1px solid;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.274);

}
/* dark mode */
.dark-mode {
  --primary-color: #1a1a1a; 
  --background-color: #252525;
  --button-color: #1a1a1a; 
  --button-hover-color: #404040; 
  --text-color: #fff;
}
.dark-mode #toggle-dark-mode{
  filter: invert(100%);
}
.dark-mode p,.dark-mode h2{
  color: #fff;
}
.dark-mode .home-desc{
  background-color: #000000d7;
}
.dark-mode .Connexion h2{
  color: #000;
}
.dark-mode .register-container h2{
  color: #000;
}


/* button darkmode */
#toggle-dark-mode {
  width: 40px; 
  height: auto; 
  cursor: pointer; 
  transition: filter 0.3s ease; 
  margin-right: 50rem;
}

#toggle-dark-mode:hover {
  filter: brightness(80%);
  width: 50px;
  transition: 1s;
}

/* footer*/
footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

}