html, body {
  height: 100%;
}


main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}


.jar-logo {
  max-width: 150px;         /* limits width on desktop */
  width: 50%;               /* optional: scales with container */
  height: auto;             /* maintain aspect ratio */
  display: block;           /* allows margin auto centering */
  margin-top: 0.5rem;      /* less space above jar */
  margin-bottom: 1rem; 

}



body {
  font-family: 'Agbalumo', sans-serif;
  background-color: #FFF4E1; /* Soft caramel tone */
  color: #D8A79E;
  margin: 0;
  padding: 0;
  font-size: 25px; /* base font size */
}

main {
  max-width: 600px;
  margin: auto;
  padding: 2rem;
  text-align: center;
}


h1 {
  font-family: 'Mali', cursive;
  font-size: 4.5rem !important;
  margin-top: 0;
  margin-bottom: 0.5rem;

}

p.description {
  font-size: 1.4 rem;
  margin-bottom: 2rem;
  color: #5A2B22;

}

.description-left {
  align-self: flex-start;  /* left-align inside flex */
  text-align: left;
  width: 100%;
  color: #5A2B22 !important;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  margin-top: 4rem; /* add some space from top */
}

img {
  max-width: 100%;
  height: auto;
  margin-bottom: 2rem;
}


input[type="email"] {
  font-family: 'Baloo 2', cursive;
  color: #5A2B22;
  padding: 0.75rem;
  width: calc(100% - 1rem);
  margin-bottom: 2rem;
  border-radius: 4px;
  border: 1px solid #5A2B22;
  font-size: 1.2rem;
}

button {
  background-color: #5A2B22; /* Brand accent */
  color: #FFF4E1;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
}

button:hover {
  background-color: #D8A79E;
}

/* Response message */
#response {
  margin-top: 1rem;
  font-weight: 600;
}

.social-follow {
  margin-top: 0.25rem; /* pulls it closer to the button */
  text-align: center;
}

.social-follow p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #5A2B22;
}

.social-follow a {
  text-decoration: none;   /* removes blue underline */
  color: inherit;          /* makes icons use your set color */
  margin: 0 0.5rem;        /* spacing between icons */
}

.social-follow a:hover {
  color: #D8A79E;          /* optional hover color */
}

.social-icon {
  font-size: 2rem;
  margin: 0 10px;
  color: #5A2B22;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.2);
  color: #D8A79E;
}



/* Mobile responsiveness */
@media (max-width: 480px) {
  body {
    font-size: 16px; /* slightly smaller base */
  }

  h1 {
    font-size: 2.25rem;
  }

  p.description {
    font-size: 1.25rem;
  }

  button {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    width: 100%;
  }

  .jar-logo {
    max-width: 120px;       /* smaller on mobile */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }


  main {
    height: auto;              /* let main expand naturally */
    justify-content: flex-start; /* stack from top instead of vertical center */
    padding-top: 1rem;         /* optional: small top space */
  }

  .description-left {
    margin-top: 2rem;          /* move it down a bit */
    font-size: 1.1rem;         /* smaller on mobile */
  }
}