@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

.material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito Sans", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: rgb(1, 51, 1);
}

label {
  color: "white";
}

.form-container {
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: rgba(238, 243, 243, 0.089);
  border: 1px solid rgba(188, 235, 227, 0.2);
  padding-block: 100px;
  padding-inline: 40px;
  height: 420px;
  width: 400px;
  border-radius: 16px;
  z-index: 1;
}

.form-container h1 {
  text-align: center;
  color: white;
  font-size: 2em;
  margin-block-end: 1rem;
  margin-left: 70px;
  margin-bottom: 30px;
}

form .form-group {
  position: relative;
  margin-block-end: 2rem;
}

.form-group input {
  width: 130%;
  padding-block: 8px 0;
  padding-inline: 8px 0;
  height: 28px;
  background: transparent;
  outline: none;
  border: none;
  border-bottom: 1px solid white;
  font-size: 1em;
  color: white;
  font-weight: 500;
  transition: 0.25s ease-in-out;
}

.form-group input:focus,
.form-group input:valid {
  border-color: paleturquoise;
}

.form-group label {
  position: absolute;
  top: 35%;
  left: 8px;
  transform: translateY(-50%);
  font-weight: 500;
  pointer-events: none;
  color: white;
}

.form-group input:focus ~ label,
.form-group input:valid ~ label {
  top: 0;
  color: white;
}

.form-group span {
  position: absolute;
  right: -60px;
  top: 10px;
  transform: translateY(-40%);
  font-size: 1.1em;
  color: white;
  transition: 0.25s ease-in-out;
}

.form-container .form-options {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-inline-end: 1rem;
  color: white;
  font-weight: 800;
}

.form-options a {
  color: white;
  text-decoration: none;
}

.form-options a:hover {
  text-decoration: underline;
}

.form-container button {
  width: 100%;
  height: 48px;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  margin-block: 10px;
  margin-left: 30px;
  margin-top: 3rem;
  cursor: pointer;
  background-color: rgba(238, 243, 243, 0.089);
  border: 3px solid rgba(188, 235, 227, 0.2);
  color: white;
}

.form-container button:active {
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Fond noir semi-transparent lorsque le bouton est cliqué */
}

img {
  height: 70px;
  width: 80px;
  margin-left: 120px;
}

.blob {
  position: absolute;
  height: 400px;
  width: 400px;
  background: linear-gradient(360deg, yellow 10%, green 100%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: translate(250px, 80%) rotate(60deg);
  animation: blob 16s infinite alternate;
  transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blob:hover {
  filter: blur(30px);
  width: 560px;
  height: 560px;
  box-shadow: inset 100px 100px white, inset 200px 200px greenyellow,
    inset 300px 300px orange;
}

@keyframes blob {
  5% {
    transform: translate(250px, 80%) rotate(60deg);
  }
  40% {
    transform: translate(-60%, -50%) rotate(30deg);
    border-radius: 30% 70% 23% 77% / 8% 30% 70% 92%;
  }
  75% {
    transform: translate(0%, -100%) rotate(-120deg);
    border-radius: 42% 58% 45% 55% / 38% 55% 45% 62%;
  }
}