* {
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Variable */
body {
  /* Globale */
  --text-color-white: white;
  --bg-image-linear-gradient: rgba(0, 0, 0, 0);

  /* navbar et footer */
  --bg-linear-gradient: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 90%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Form */
  --box-shadow-form: 10px 10px 35px rgb(35, 86, 146),
    -10px -10px 35px rgb(180, 60, 140);

  /* Navbar */
  --bg-dropdown-menu: #43417a;

  /* Mobile */
  --bg-navbar-mobile: white;
  --color-a-navbar-mobile: black;
  --color-a-hover-navbar-mobile: black;

  /* Dark mode */
  --icon-toggle-theme: url("/Src/img/dark-mode.svg");

  background-image: linear-gradient(
      var(--bg-image-linear-gradient),
      var(--bg-image-linear-gradient)
    ),
    url("/Src/img/imageBack.png");
  background-size: cover;
  color: var(--text-color-white);
}

/* Dark mode */
body.dark-theme {
  --text-color-white: white;
  --bg-image-linear-gradient: rgba(0, 0, 0, 0.7);
  --bg-linear-gradient: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(84, 79, 79, 0.4) 50%,
    rgba(255, 255, 255, 0) 90%,
    rgba(255, 255, 255, 0) 100%
  );
  --box-shadow-form: 1px 1px 1px whitesmoke, -1px -1px 1px whitesmoke;
  --bg-dropdown-menu: rgb(30, 18, 32);
  --bg-navbar-mobile: #282828;
  --color-a-navbar-mobile: white;
  --color-a-hover-navbar-mobile: white;

  --icon-toggle-theme: url("/Src/img/light-mode.svg");
}

a {
  color: var(--text-color-white);
  text-decoration: none;
}

a:hover {
  color: var(--text-color-white) !important;
  text-decoration: underline;
  cursor: pointer;
}

/* Icône dark mode */
.btn-dark-mode {
  border-radius: 50%;
  background: transparent;
  height: 1.5rem;
  width: 1.25rem;
  border: none;
  outline: none;
  margin-right: 18px;
}

.btn-dark-mode::before {
  content: "";
  display: block;
  height: 1.5rem;
  width: 1.25rem;
  background-image: var(--icon-toggle-theme);
  background-size: contain;
  border-radius: 50%;
}

.btn-dark-mode:focus {
  outline: none;
}

.btn-submit-form {
  width: 100%;
  height: 45px;
  color: var(--text-color-white);
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
    inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  mask-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 25%,
    #ffffff 75%,
    rgba(255, 255, 255, 0) 100%
  );
}

.btn-submit-form:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 15px rgb(255, 255, 255);
}

/* Icône form */
ion-icon {
  width: 25px;
  height: 25px;
  color: var(--text-color-white);
  padding-right: 10px;
}

/* Footer */
footer {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  background: var(--bg-linear-gradient);
}

/* Page 404 */
.center-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 63px);
}

/* Media Queries */
@media (max-width: 992px) {
  .btn-dark-mode {
    margin: 1rem 0 0 1rem;
  }
}

/* Mode sombre par défaut */
@media (prefers-color-scheme: dark) {
  body {
    --text-color-white: white;
    --bg-image-linear-gradient: rgba(0, 0, 0, 0.7);
    --bg-linear-gradient: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 10%,
      rgba(84, 79, 79, 0.4) 50%,
      rgba(255, 255, 255, 0) 90%,
      rgba(255, 255, 255, 0) 100%
    );
    --box-shadow-form: 1px 1px 1px whitesmoke, -1px -1px 1px whitesmoke;
    --bg-dropdown-menu: rgb(30, 18, 32);
    --bg-navbar-mobile: #282828;
    --color-a-navbar-mobile: white;
    --color-a-hover-navbar-mobile: white;

    --icon-toggle-theme: url("/Src/img/light-mode.svg");
  }

  body.light-theme {
    --text-color-white: white;
    --bg-image-linear-gradient: rgba(0, 0, 0, 0);
    --bg-linear-gradient: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 10%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 90%,
      rgba(255, 255, 255, 0) 100%
    );
    --box-shadow-form: 10px 10px 35px rgb(35, 86, 146),
      -10px -10px 35px rgb(180, 60, 140);
    --bg-dropdown-menu: #43417a;
    --bg-navbar-mobile: white;
    --color-a-navbar-mobile: black;
    --color-a-hover-navbar-mobile: black;
    --icon-toggle-theme: url("/Src/img/dark-mode.svg");
  }
}