* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  font-size: 16px;
}

body {
  line-height: 1;
  font-family: "Helvetica Neue", helvetica, sans-serif;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  cursor: pointer;
}

:root {
  --red: #f44336;
  --red-50: #ffebee;
  --red-100: #ffcdd2;
  --red-200: #ef9a9a;
  --red-300: #e57373;
  --red-400: #ef5350;
  --red-500: var(--red);
  --red-600: #e53935;
  --red-700: #d32f2f;
  --red-800: #c62828;
  --red-900: #b71c1c;
  --red-a100: #ff8a80;
  --red-a200: #ff5252;
  --red-a400: #ff1744;
  --red-a700: #d50000;
  --pink: #e91e63;
  --pink-50: #fce4ec;
  --pink-100: #f8bbd0;
  --pink-200: #f48fb1;
  --pink-300: #f06292;
  --pink-400: #ec407a;
  --pink-500: var(--pink);
  --pink-600: #d81b60;
  --pink-700: #c2185b;
  --pink-800: #ad1457;
  --pink-900: #880e4f;
  --pink-a100: #ff80ab;
  --pink-a200: #ff4081;
  --pink-a400: #f50057;
  --pink-a700: #c51162;
  --purple: #9c27b0;
  --purple-50: #f3e5f5;
  --purple-100: #e1bee7;
  --purple-200: #ce93d8;
  --purple-300: #ba68c8;
  --purple-400: #ab47bc;
  --purple-500: var(--purple);
  --purple-600: #8e24aa;
  --purple-700: #7b1fa2;
  --purple-800: #6a1b9a;
  --purple-900: #4a148c;
  --purple-a100: #ea80fc;
  --purple-a200: #e040fb;
  --purple-a400: #d500f9;
  --purple-a700: #a0f;
  --deep-purple: #673ab7;
  --deep-purple-50: #ede7f6;
  --deep-purple-100: #d1c4e9;
  --deep-purple-200: #b39ddb;
  --deep-purple-300: #9575cd;
  --deep-purple-400: #7e57c2;
  --deep-purple-500: var(--deep-purple);
  --deep-purple-600: #5e35b1;
  --deep-purple-700: #512da8;
  --deep-purple-800: #4527a0;
  --deep-purple-900: #311b92;
  --deep-purple-a100: #b388ff;
  --deep-purple-a200: #7c4dff;
  --deep-purple-a400: #651fff;
  --deep-purple-a700: #6200ea;
  --indigo: #3f51b5;
  --indigo-50: #e8eaf6;
  --indigo-100: #c5cae9;
  --indigo-200: #9fa8da;
  --indigo-300: #7986cb;
  --indigo-400: #5c6bc0;
  --indigo-500: var(--indigo);
  --indigo-600: #3949ab;
  --indigo-700: #303f9f;
  --indigo-800: #283593;
  --indigo-900: #1a237e;
  --indigo-a100: #8c9eff;
  --indigo-a200: #536dfe;
  --indigo-a400: #3d5afe;
  --indigo-a700: #304ffe;
  --blue: #2196f3;
  --blue-50: #e3f2fd;
  --blue-100: #bbdefb;
  --blue-200: #90caf9;
  --blue-300: #64b5f6;
  --blue-400: #42a5f5;
  --blue-500: var(--blue);
  --blue-600: #1e88e5;
  --blue-700: #1976d2;
  --blue-800: #1565c0;
  --blue-900: #0d47a1;
  --blue-a100: #82b1ff;
  --blue-a200: #448aff;
  --blue-a400: #2979ff;
  --blue-a700: #2962ff;
  --light-blue: #03a9f4;
  --light-blue-50: #e1f5fe;
  --light-blue-100: #b3e5fc;
  --light-blue-200: #81d4fa;
  --light-blue-300: #4fc3f7;
  --light-blue-400: #29b6f6;
  --light-blue-500: var(--light-blue);
  --light-blue-600: #039be5;
  --light-blue-700: #0288d1;
  --light-blue-800: #0277bd;
  --light-blue-900: #01579b;
  --light-blue-a100: #80d8ff;
  --light-blue-a200: #40c4ff;
  --light-blue-a400: #00b0ff;
  --light-blue-a700: #0091ea;
  --cyan: #00bcd4;
  --cyan-50: #e0f7fa;
  --cyan-100: #b2ebf2;
  --cyan-200: #80deea;
  --cyan-300: #4dd0e1;
  --cyan-400: #26c6da;
  --cyan-500: var(--cyan) ;
  --cyan-600: #00acc1;
  --cyan-700: #0097a7;
  --cyan-800: #00838f;
  --cyan-900: #006064;
  --cyan-a100: #84ffff;
  --cyan-a200: #18ffff;
  --cyan-a400: #00e5ff;
  --cyan-a700: #00b8d4;
  --teal: #009688;
  --teal-50: #e0f2f1;
  --teal-100: #b2dfdb;
  --teal-200: #80cbc4;
  --teal-300: #4db6ac;
  --teal-400: #26a69a;
  --teal-500: var(--teal);
  --teal-600: #00897b;
  --teal-700: #00796b;
  --teal-800: #00695c;
  --teal-900: #004d40;
  --teal-a100: #a7ffeb;
  --teal-a200: #64ffda;
  --teal-a400: #1de9b6;
  --teal-a700: #00bfa5;
  --green: #4caf50;
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-200: #a5d6a7;
  --green-300: #81c784;
  --green-400: #66bb6a;
  --green-500: var(--green);
  --green-600: #43a047;
  --green-700: #388e3c;
  --green-800: #2e7d32;
  --green-900: #1b5e20;
  --green-a100: #b9f6ca;
  --green-a200: #69f0ae;
  --green-a400: #00e676;
  --green-a700: #00c853;
  --light-green: #8bc34a;
  --light-green-50: #f1f8e9;
  --light-green-100: #dcedc8;
  --light-green-200: #c5e1a5;
  --light-green-300: #aed581;
  --light-green-400: #9ccc65;
  --light-green-500: var(--light-green);
  --light-green-600: #7cb342;
  --light-green-700: #689f38;
  --light-green-800: #558b2f;
  --light-green-900: #33691e;
  --light-green-a100: #ccff90;
  --light-green-a200: #b2ff59;
  --light-green-a400: #76ff03;
  --light-green-a700: #64dd17;
  --lime: #cddc39;
  --lime-50: #f9fbe7;
  --lime-100: #f0f4c3;
  --lime-200: #e6ee9c;
  --lime-300: #dce775;
  --lime-400: #d4e157;
  --lime-500: var(--lime);
  --lime-600: #c0ca33;
  --lime-700: #afb42b;
  --lime-800: #9e9d24;
  --lime-900: #827717;
  --lime-a100: #f4ff81;
  --lime-a200: #eeff41;
  --lime-a400: #c6ff00;
  --lime-a700: #aeea00;
  --yellow: #ffeb3b;
  --yellow-50: #fffde7;
  --yellow-100: #fff9c4;
  --yellow-200: #fff59d;
  --yellow-300: #fff176;
  --yellow-400: #ffee58;
  --yellow-500: var(--yellow);
  --yellow-600: #fdd835;
  --yellow-700: #fbc02d;
  --yellow-800: #f9a825;
  --yellow-900: #f57f17;
  --yellow-a100: #ffff8d;
  --yellow-a200: #ff0;
  --yellow-a400: #ffea00;
  --yellow-a700: #ffd600;
  --amber: #ffc107;
  --amber-50: #fff8e1;
  --amber-100: #ffecb3;
  --amber-200: #ffe082;
  --amber-300: #ffd54f;
  --amber-400: #ffca28;
  --amber-500: var(--amber);
  --amber-600: #ffb300;
  --amber-700: #ffa000;
  --amber-800: #ff8f00;
  --amber-900: #ff6f00;
  --amber-a100: #ffe57f;
  --amber-a200: #ffd740;
  --amber-a400: #ffc400;
  --amber-a700: #ffab00;
  --orange: #ff9800;
  --orange-50: #fff3e0;
  --orange-100: #ffe0b2;
  --orange-200: #ffcc80;
  --orange-300: #ffb74d;
  --orange-400: #ffa726;
  --orange-500: var(--orange);
  --orange-600: #fb8c00;
  --orange-700: #f57c00;
  --orange-800: #ef6c00;
  --orange-900: #e65100;
  --orange-a100: #ffd180;
  --orange-a200: #ffab40;
  --orange-a400: #ff9100;
  --orange-a700: #ff6d00;
  --deep-orange: #ff5722;
  --deep-orange-50: #fbe9e7;
  --deep-orange-100: #ffccbc;
  --deep-orange-200: #ffab91;
  --deep-orange-300: #ff8a65;
  --deep-orange-400: #ff7043;
  --deep-orange-500: var(--deep-orange);
  --deep-orange-600: #f4511e;
  --deep-orange-700: #e64a19;
  --deep-orange-800: #d84315;
  --deep-orange-900: #bf360c;
  --deep-orange-a100: #ff9e80;
  --deep-orange-a200: #ff6e40;
  --deep-orange-a400: #ff3d00;
  --deep-orange-a700: #dd2c00;
  --brown: #795548;
  --brown-50: #efebe9;
  --brown-100: #d7ccc8;
  --brown-200: #bcaaa4;
  --brown-300: #a1887f;
  --brown-400: #8d6e63;
  --brown-500: var(--brown);
  --brown-600: #6d4c41;
  --brown-700: #5d4037;
  --brown-800: #4e342e;
  --brown-900: #3e2723;
  --grey: #9e9e9e;
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-200: #eeeeee;
  --grey-300: #e0e0e0;
  --grey-400: #bdbdbd;
  --grey-500: var(--grey);
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;
  --blue-grey: #607d8b;
  --blue-grey-50: #eceff1;
  --blue-grey-100: #cfd8dc;
  --blue-grey-200: #b0bec5;
  --blue-grey-300: #90a4ae;
  --blue-grey-400: #78909c;
  --blue-grey-500: var(--blue-grey);
  --blue-grey-600: #546e7a;
  --blue-grey-700: #455a64;
  --blue-grey-800: #37474f;
  --blue-grey-900: #263238;
}

html[data-display=mobile] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  background-color: black;
}
html[data-display=mobile] body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 390px;
  height: 100%;
  overflow-y: auto;
  background-color: white;
  padding: 1rem;
}

[data-flex=row] {
  display: flex;
  flex-direction: row;
}

[data-flex=column] {
  display: flex;
  flex-direction: column;
}

[data-skeleton=true] * {
  outline: 1px solid lime;
}

[data-container=large] {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
@media only screen and (min-width: 426px) {
  [data-container=large] {
    padding: 0 2rem;
  }
}

body {
  font-family: "Helvetica Neue", sans-serif;
}

.form {
  display: flex;
  flex-direction: column;
}
.form h2 {
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: bold;
  line-height: 1.4;
  color: black;
  align-self: flex-start;
  background: linear-gradient(45deg, var(--red-a400), var(--blue-a400));
  background-size: 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.form .inputField {
  padding: 0.75rem 0;
}
.form .buttonPrimary {
  margin-top: 1rem;
}
.form .formLinkToSignUp {
  text-align: center;
  padding-top: 2rem;
  font-size: 0.875rem;
}
.form .formLinkToSignUp a {
  font-weight: bold;
  text-decoration: none;
  color: var(--blue-a700);
}
.form .formLinkToSignUp a:hover {
  text-decoration: underline;
}

.inputField {
  display: flex;
  flex-direction: column;
  position: relative;
}
@-webkit-keyframes shake {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-2%);
  }
  75% {
    transform: translateX(1%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes shake {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-2%);
  }
  75% {
    transform: translateX(1%);
  }
  100% {
    transform: translateX(0%);
  }
}
.inputField .fieldContainer {
  display: flex;
  flex-direction: column;
  position: relative;
}
.inputField .fieldContainer label {
  position: absolute;
  top: 50%;
  left: calc(0.75rem - 4px);
  transform: translateY(-50%);
  margin-top: -1px;
  color: var(--blue-grey-300);
  font-weight: normal;
  line-height: 1;
  font-size: 1rem;
  padding: 4px;
  background-color: white;
  transition-property: top, font-size;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.inputField .fieldContainer input:invalid:not(:-moz-placeholder-shown) ~ label {
  color: var(--red-a400);
}
.inputField .fieldContainer input:invalid:not(:-ms-input-placeholder) ~ label {
  color: var(--red-a400);
}
.inputField .fieldContainer input:invalid:not(:placeholder-shown) ~ label {
  color: var(--red-a400);
}
.inputField .fieldContainer input:valid:not(:-moz-placeholder-shown) ~ label {
  color: var(--green-a700);
}
.inputField .fieldContainer input:valid:not(:-ms-input-placeholder) ~ label {
  color: var(--green-a700);
}
.inputField .fieldContainer input:valid:not(:placeholder-shown) ~ label {
  color: var(--green-a700);
}
.inputField .fieldContainer input:focus ~ label,
.inputField .fieldContainer input:valid:focus ~ label,
.inputField .fieldContainer input:invalid:focus ~ label {
  color: var(--blue-a700);
}
.inputField .fieldContainer input:not(:-moz-placeholder-shown) ~ label {
  top: 0;
  font-size: 0.875rem;
}
.inputField .fieldContainer input:not(:-ms-input-placeholder) ~ label {
  top: 0;
  font-size: 0.875rem;
}
.inputField .fieldContainer input:focus ~ label,
.inputField .fieldContainer input:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: 0.875rem;
}
.inputField .fieldContainer input {
  background-color: white;
  font-size: 1rem;
  font-weight: normal;
  color: black;
  padding: 0.75rem;
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--blue-grey-200);
  border-radius: 2px;
}
.inputField .fieldContainer input:invalid:not(:-moz-placeholder-shown) {
  outline-color: var(--red-a400);
}
.inputField .fieldContainer input:invalid:not(:-ms-input-placeholder) {
  outline-color: var(--red-a400);
}
.inputField .fieldContainer input:invalid:not(:placeholder-shown) {
  outline-color: var(--red-a400);
}
.inputField .fieldContainer input:valid:not(:-moz-placeholder-shown) {
  outline-color: var(--green-a700);
}
.inputField .fieldContainer input:valid:not(:-ms-input-placeholder) {
  outline-color: var(--green-a700);
}
.inputField .fieldContainer input:valid:not(:placeholder-shown) {
  outline-color: var(--green-a700);
}
.inputField .fieldContainer input:focus,
.inputField .fieldContainer input:valid:focus,
.inputField .fieldContainer input:invalid:focus {
  outline-color: var(--blue-a700);
}
.inputField .fieldContainer input:not(:focus):invalid:not(:-moz-placeholder-shown) {
  animation: shake 0.3s ease-in-out;
}
.inputField .fieldContainer input:not(:focus):invalid:not(:-ms-input-placeholder) {
  animation: shake 0.3s ease-in-out;
}
.inputField .fieldContainer input:not(:focus):invalid:not(:placeholder-shown) {
  -webkit-animation: shake 0.3s ease-in-out;
          animation: shake 0.3s ease-in-out;
}
.inputField .fieldMessage {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 0.75rem;
  color: var(--red-500);
  text-decoration: none;
}
.inputField .fieldMessage:hover {
  text-decoration: none;
}
.inputField .fieldMessage[data-message=password] {
  color: var(--blue-a700);
}
.inputField .fieldMessage[data-message=password]:hover {
  text-decoration: underline;
}

.buttonPrimary {
  position: relative;
  display: inline-block;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-transform: lowercase;
  line-height: 1;
  text-align: center;
  height: auto;
  cursor: pointer;
  background: transparent;
  outline: 0;
  border: 0;
}
.buttonPrimary span {
  position: relative;
  z-index: 2;
}
.buttonPrimary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(45deg, var(--blue-a400), var(--red-a400));
  background-position: 0;
  background-size: 200%;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
  z-index: 1;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.buttonPrimary:hover::before, .buttonPrimary:focus::before {
  background-position: 100%;
  box-shadow: 0 8px 16px rgba(255, 0, 0, 0.33);
}
.buttonPrimary:active::before {
  transform: scale(0.9);
  transition-duration: 0s;
}
.buttonPrimary::first-letter {
  text-transform: uppercase;
}
.buttonPrimary[data-size=small] {
  font-size: 0.75rem;
  padding: 0.5rem 0.875rem;
}
.buttonPrimary[data-size=medium] {
  font-size: 0.875rem;
  padding: 0.875rem 1.25rem;
}
.buttonPrimary[data-size=large] {
  font-size: 1rem;
  padding: 1rem 2rem;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: linear-gradient(45deg, var(--indigo-a200), var(--red-a200));
  background-size: 150%;
  padding: 0;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

body.profileScreen {
  background: url(../images/abstract-background.jpg);
  background-size: cover;
  background-position: center;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background-color: white;
  overflow: hidden;
}

section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logo {
  display: flex;
  align-self: flex-start;
  width: auto;
  height: 2rem;
}

.sectionContent {
  display: flex;
  flex-direction: column;
  padding: 3rem;
}

section:first-child .sectionContent {
  color: white;
}

section:first-child h6 {
  display: none;
}

section:first-child {
  height: 50vh;
}

section:last-child {
  margin-right: 1rem;
  margin-left: 1rem;
  background-color: white;
  margin-top: -64px;
  margin-bottom: 4rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

section:last-child .sectionContent {
  padding: 2rem;
}

.textContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 2rem 0;
}
.textContainer h1 {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: bold;
}
.textContainer p {
  display: none;
}

.profileScreen section:last-child {
  margin-top: -150px;
}
.profileScreen .sectionContent {
  align-items: center;
}
.profileScreen .profilePicture {
  display: flex;
  flex-direction: column;
  width: 6rem;
  height: 6rem;
  background-size: cover;
  background-position: center;
  border-radius: 100%;
}
.profileScreen .sectionProfile {
  display: flex;
  flex-direction: column;
}
.profileScreen .sectionProfile .dati {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  text-align: center;
}
.profileScreen .sectionProfile .dati .fullName {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
  background: linear-gradient(45deg, var(--red-a400), var(--blue-a400));
  background-size: 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 2rem 0;
  line-height: 1.4;
}
.profileScreen .sectionProfile .dati .email, .profileScreen .sectionProfile .dati .age {
  font-size: 1.25rem;
  color: black;
  padding: 0.5rem 0;
}
.profileScreen .sectionProfile .dati .email span, .profileScreen .sectionProfile .dati .age span {
  color: var(--blue-grey-500);
}
.profileScreen .sectionProfile .dati .email span {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

@media only screen and (min-width: 426px) {
  body {
    padding: 3rem;
  }
  .loginScreen section:last-child {
    padding-bottom: 6rem;
  }
  main {
    flex-direction: row;
    border-radius: 4px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
  }
  section:first-child {
    flex-basis: 55%;
    width: 55%;
    height: auto;
  }
  section:first-child .sectionContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  section:last-child {
    flex-basis: 45%;
    width: 45%;
    margin: 0;
  }
  section:last-child .sectionContent {
    padding: 3rem;
  }
  .textContainer p {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    padding: 2rem 0;
    line-height: 1.6;
  }
  .textContainer p a {
    color: white;
    font-weight: bold;
    text-decoration: underline;
  }
  section:first-child h6 {
    display: flex;
  }
  section:first-child h6 a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
  }
  section:first-child h6 a:hover {
    color: white;
    text-decoration: underline;
  }
  .profileScreen section:last-child {
    margin-top: 0;
  }
}/*# sourceMappingURL=styles.css.map */