@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Big+Shoulders:opsz@10..72&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=League+Spartan:wght@100..900&family=Lexend+Deca:wght@100..900&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Libre Franklin", sans-serif; }

.hidden {
  display: none; }

.show {
  display: block; }

.false {
  color: #ff5263; }

.correct {
  color: #0ecf0e; }

body {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 4rem 0; }
  body main {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: ". . . header header header header . . ." ". . . section section section section . . ." ". . . section section section section . . ." ". . . footer footer footer footer . . ."; }
    body main header {
      width: 100%;
      display: grid;
      grid-area: header;
      justify-items: center;
      justify-content: center; }
      body main header img {
        display: block;
        margin: auto;
        margin-bottom: 3rem; }
      body main header h1 {
        font-size: 2.5rem;
        font-weight: 300;
        margin-bottom: 1.2rem;
        color: #969696; }
        body main header h1 strong {
          font-weight: 700;
          color: #151f29; }
      body main header p {
        color: #151f29; }
    body main section {
      display: grid;
      grid-area: section;
      justify-items: center;
      justify-content: center; }
      body main section .form {
        display: flex;
        justify-content: space-around;
        margin: 2rem 0; }
        body main section .form .input {
          height: 55px;
          border-radius: 50px;
          font-weight: 600;
          border: 2px solid #c2d3ff; }
        body main section .form #email {
          width: 420px;
          margin-right: 1.5rem;
          padding-left: 1.3rem; }
          body main section .form #email::-webkit-input-placeholder {
            color: #c2d3ff;
            font-size: 0.9rem; }
        body main section .form .error {
          font-size: 0.8rem; }
          body main section .form .error p {
            margin-top: 0.8rem;
            padding-left: 1.6rem; }
        body main section .form #submit {
          width: 180px;
          background-color: #4f7df3;
          color: white;
          cursor: pointer;
          box-shadow: 2px 5px 15px 0px #c2d3ff; }
          body main section .form #submit:hover {
            color: #4f7df3;
            background-color: white; }
      body main section img {
        width: 650px;
        margin-top: 2.7rem;
        margin-bottom: 3.3rem; }
    body main footer {
      display: grid;
      grid-area: footer;
      justify-items: center;
      justify-content: center; }
      body main footer #icons {
        display: flex;
        gap: 0 1rem;
        margin-bottom: 1.5rem; }
        body main footer #icons i {
          width: 28px;
          height: 28px;
          border: 1px solid #c2d3ff;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          color: #4f7df3; }
          body main footer #icons i:hover {
            cursor: pointer;
            color: white;
            background-color: #4f7df3; }
      body main footer p {
        color: #969696; }

@media (max-width: 375px) {
  body {
    padding: 3rem 0; }
    body main {
      display: grid;
      grid-template-areas: ". . header header header header . ." ". . section section section section . ." ". . section section section section . ." ". . footer footer footer footer . ."; }
      body main header img {
        display: block;
        margin: auto;
        margin-bottom: 3rem; }
      body main header h1 {
        font-size: 1.7rem;
        font-weight: 300;
        margin-bottom: 1.2rem;
        color: #969696; }
        body main header h1 strong {
          font-weight: 700;
          color: #151f29; }
      body main header p {
        color: #151f29; }
      body main section .form {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 2rem 0; }
        body main section .form #email {
          width: 300px;
          margin-right: 0rem; }
        body main section .form .error {
          margin-bottom: 1rem; }
          body main section .form .error p {
            margin: 0.5rem auto;
            padding-left: 1.6rem;
            text-align: center; }
        body main section .form #submit {
          width: 300px; }
      body main section img {
        width: 350px;
        margin-top: 2.7rem;
        margin-bottom: 4rem; }
      body main footer p {
        font-size: 0.6rem; } }

/*# sourceMappingURL=style.css.map */