/* colors */

html {

  width: 100%;

  height: 100%;

}

body {
  /* background: transparent  linear-gradient(360deg, #d49eff 0%, #8f00ff 100%) 0% 0% no-repeat ; */

  background: url("https://filatilandia.it/magazzino/foto.png"), transparent linear-gradient(360deg, #d49eff 0%, #8f00ff 100%) 0% 0% no-repeat;

  position: relative;

  width: 100%;

  height: 100%;

  font-size: 16px;

  font-family: "Source Sans Pro", sans-serif;

  font-weight: 400;

  -webkit-font-smoothing: antialiased;

  overflow-y: hidden;
  overflow-x: hidden;

}

form {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: block;

  width: 100%;

  max-width: 400px;

  background-color: rgba(255, 255, 255, 0.5);

  margin: 0;

  padding: 2.25em;

  box-sizing: border-box;

  border: solid 1px #DDD;

  border-radius: 0.5em;

  font-family: "Source Sans Pro", sans-serif;

}

form .svgContainer {

  position: relative;

  width: 200px;

  height: 200px;

  margin: 0 auto 1em;

  border-radius: 50%;

  background: none;

  border: solid 2.5px #322932;

  overflow: hidden;

  pointer-events: none;

}

form .svgContainer div {

  position: relative;

  width: 100%;

  height: 0;

  overflow: hidden;

  padding-bottom: 100%;

}

form .svgContainer .mySVG {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}

form .inputGroup {

  margin: 0 0 2em;

  padding: 0;

  position: relative;

}

form .inputGroup:last-of-type {

  margin-bottom: 0;

}

form label {

  margin: 0 0 12px;

  display: block;

  font-size: 1.25em;

  color: #322932;

  font-weight: 700;

  font-family: inherit;

}

form input[type=email],
form input[type=text],
form input[type=password] {

  display: block;

  margin: 0;

  padding: 0 1em 0;

  background-color: rgb(226, 191, 254, 0.5);

  border: solid 2px #322932;

  border-radius: 4px;

  -webkit-appearance: none;

  box-sizing: border-box;

  width: 100%;

  height: 65px;

  font-size: 1.55em;

  color: #322932;

  font-weight: 600;

  font-family: inherit;

  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;

}

form input[type=email]:focus,
form input[type=text]:focus,
form input[type=password]:focus {

  outline: none;

  box-shadow: 0px 2px 10px rgb(0, 0, 0, 0.1);

  border: solid 2px #8f00ff;

}

form input[type=email],
form input[type=text] {

  padding: 14px 1em 0px;

}

form button {

  display: block;

  margin: 0;

  padding: 0.65em 1em 1em;

  background-color: rgb(226, 191, 254, 0.5);

  border: solid 2px #322932;

  border-radius: 4px;

  box-sizing: border-box;

  box-shadow: none;

  width: 100%;

  height: 65px;

  font-size: 1.55em;

  color: black;

  font-weight: 600;

  font-family: inherit;

  transition: background-color 0.2s ease-out;

}

form button:hover,
form button:active {

  background-color: #8f00ff;

}

form .inputGroup1 .helper {

  position: absolute;

  z-index: 1;

  font-family: inherit;

}

form .inputGroup1 .helper1 {

  top: 0;

  left: 0;

  transform: translate(1.4em, 2.6em) scale(1);

  transform-origin: 0 0;

  color: #000000;

  font-size: 1.25em;

  font-weight: 400;

  opacity: 0.65;

  pointer-events: none;

  transition: transform 0.2s ease-out, opacity 0.2s linear;

}

form .inputGroup1.focusWithText .helper {

  /*input[type='email']:focus + .helper {*/

  transform: translate(1.4em, 2em) scale(0.65);

  opacity: 1;

}