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

body {
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cellipse fill='none' stroke-width='200' id='a' rx='600' ry='450'/%3E%3C/defs%3E%3Cg style='transform-origin:center'%3E%3Cg transform='' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%231D012F' href='%23a' transform='rotate(-60 0 0) scale(0.4)'/%3E%3Cuse stroke='%2323013b' href='%23a' transform='rotate(-50 0 0) scale(0.5)'/%3E%3Cuse stroke='%23280147' href='%23a' transform='rotate(-40 0 0) scale(0.6)'/%3E%3Cuse stroke='%232d0253' href='%23a' transform='rotate(-30 0 0) scale(0.7)'/%3E%3Cuse stroke='%2331025f' href='%23a' transform='rotate(-20 0 0) scale(0.8)'/%3E%3Cuse stroke='%2334026b' href='%23a' transform='rotate(-10 0 0) scale(0.9)'/%3E%3Cuse stroke='%23370277' href='%23a' transform=''/%3E%3Cuse stroke='%23390283' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%233b028f' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%233c029b' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%233c02a7' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%233b02b3' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%233a02bf' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%233902cb' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%233702d8' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%233402e4' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%233001f0' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%232c01fc' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%232f0cfe' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%233317fe' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%233823ff' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%233d2fff' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%23433BFF' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

main {
  display: flex;
  flex-wrap: wrap;
  min-height: 100dvh;
}

.About-Mimo {
  min-height: 50dvh;
  width: 100%;
  min-width: 320px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 1.25rem;
}

h1 {
  color: white;
  font-size: 3.125rem;
}

h2 {
  color: white;
  font-size: 1.5625rem;
  width: 100%;
  max-width: 40.625rem;
}

ul {
  backdrop-filter: blur(20px);
  box-shadow: 0 0 3px white;
  border-radius: 15px;
  padding: 1.35rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-right: 1.3rem;
  gap: 2rem;
}

li {
  color: white;
  font-size: 1.1em;
  width: 90%;
  text-align: justify;
}

.Cadastre-se {
  width: 100%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem;
}

.Cadastre-se h2 {
  text-align: center;
  font-size: 3.125rem;
  margin-bottom: 1.5625rem;
  max-width: none;
}

form {
  padding: 1.25rem 1.5625rem;
  background-color: black;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 90%;
  max-width: 400px;
}

form button {
  color: white;
  border: none;
  border-radius: 0.625rem;
  font-size: 1.25rem;
  padding: 0.75rem;
  cursor: pointer;
  outline: none;
  background: linear-gradient(135deg, #0F184C 0%, #5F1CCD 50%, #0011FF 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition:
    background-position 0.5s ease-in-out,
    transform 0.5s ease-in-out;
}

form button:hover {
  background-position: 0% 0;
  transform: scale(0.95);
}

.Campo {
  position: relative;
}

.Campo label {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  pointer-events: none;
  transform: translateY(-50%);
  padding: 0 0.3125rem;
  transition: all 0.5s ease;
  border-radius: 0.625rem;
}

.Campo input:focus ~ label,
.Campo input:not(:placeholder-shown) ~ label {
  top: 0;
  color: white;
  background-color: black;
}

.Campo input:not(:placeholder-shown):invalid {
  border: 2px solid red;
}

input {
  width: 100%;
  padding: 0.625rem 0.625rem 0.3125rem 0.625rem;
  border: none;
  font-size: 1.25rem;
  outline: none;
  border-radius: 0.625rem;
}

p {
  text-align: center;
  margin-top: 1.25rem;
  color: white;
  text-decoration: underline;
  cursor: pointer;
  transition: text-shadow 0.3s ease;
}

p:hover {
  text-shadow: 0 0 1px white;
}

@media (min-width: 768px) {
  main{
    flex-wrap: nowrap;
  }

  .About-Mimo, .Cadastre-se{
    width: 50%;
    height: 100dvh;
  }
}