@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap");
:root {
  --border: 2px solid #f7b267;
  --lightOrange: #f7b267;
}

* {
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Readex Pro", sans-serif;
  background: url("../../img/homeBackgroundCreateAccount.jpg");
  background-size: 35%;
  height: 100vh;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.2));
  height: 100%;
}
.screen .form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #f7b267, #f4845f);
  box-shadow: 0px 0px 11px 1px rgba(0, 0, 0, 0.14), 0px 0px 19px 6px rgba(0, 0, 0, 0.03), 0px 0px 26px 12px rgba(0, 0, 0, 0.14), 0px 0px 29px 12px rgba(0, 0, 0, 0.14);
  border: 1rem solid rgba(0, 0, 0, 0.03);
  border-radius: 3.5rem;
  height: 40rem;
  width: 28rem;
  padding: 1rem;
}
.screen .form-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.screen .form-content h2 {
  color: white;
  font-size: 3em;
}
.screen .form-content h3 {
  color: #ffffff;
  font-size: 1.2em;
  font-style: italic;
  padding-top: 1em;
  text-transform: uppercase;
  cursor: default;
}
.screen .form-content a {
  color: white;
}
.screen .form-content p {
  text-align: center;
  color: #ffffff;
  cursor: default;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.screen .form-content p a:hover {
  text-decoration: underline;
}
.screen .form-content input {
  color: white;
  font-weight: bold;
  width: 80%;
  border-radius: 1.25em;
  padding: 0.62em 1.25em;
  margin: 0.6em 0 0;
  border: 2px solid white;
  background: transparent;
  transition: 0.3s;
  outline: none;
}
.screen .form-content input::-moz-placeholder {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}
.screen .form-content input::placeholder {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

.form-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.form-login a {
  color: white;
}
.form-login p {
  text-align: center;
  color: #ffffff;
  cursor: default;
  margin-top: 0.3em;
  margin-bottom: 1em;
}
.form-login p a:hover {
  text-decoration: underline;
}
.form-login .btn-login {
  background: white;
  color: #f4845f;
  border-radius: 1.87em;
  border: 2px solid white;
  padding: 0.5rem;
  width: 19rem;
  font-size: 20px;
  font-weight: bold;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  transition: 0.5s;
}
.form-login .btn-login:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 10px white;
}

.gender div {
  position: relative;
  display: inline-block;
  margin: 0.2rem;
}

.radio input[type=radio],
.radio input[type=checkbox] {
  display: none;
}
.radio label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.radio label span {
  background: transparent;
  border: 2px white solid;
  border-radius: 50px;
  padding: 10px 30px;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.radio label i {
  position: absolute;
  font-size: 1.8rem;
  padding: 1rem 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.radio label:hover span {
  color: transparent;
}
.radio label:hover i {
  display: inline-block;
  color: #fff;
}

@media screen and (max-width: 840px) {
  body {
    background-size: 70%;
  }
}/*# sourceMappingURL=login.css.map */