/*
================================
======= Table of Content =======
================================
    0. Form Styles
    1. Responsive Design 
        1.0. Desktop Styles (min-width: 1024px)
================================
*/

/* ========== 0. Form Styles ========== */
form {
  width: 18rem;
  margin: auto;
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
}

form > p {
  line-height: var(--line-height-lg);
  text-align: center;
  font-size: var(--font-size-sm);
}

form p:last-of-type {
  margin-bottom: var(--spacing-md);
}

form > div {
  margin-bottom: var(--spacing-md);
}


form input:not([type=submit]),
textarea {
  width: 100%;
  padding: 1rem;
  background-color: var(--color-bg-primary);
  border-radius: var(--border-radius-md);
  border: none;
  outline: 0;
  caret-color: var(--color-theme);
}

form input:not([type=submit]):focus,
textarea:focus {
  border-bottom: 2px solid var(--color-theme);
}

form input[type=email]:invalid {
  border-color: red;
}

form input[type=submit] {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border: none;
  outline: none;
  width: 8rem;
  padding: 1rem;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: 0.3s;
}
form input::placeholder {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
}
form input[type=submit]:hover {
  opacity: 0.7;
}
/* ========== 1. Responsive Design ========== */

/* -- 1.0. Desktop Styles (min-width: 1024px) */
@media screen and (min-width: 1024px) {

  form {
    width: 70%;
  }

  form > p {
    font-size: var(--font-size-lg);
  }

  form > div:first-of-type {
    display: flex;
    gap: 1rem;
  }

  form div:first-of-type div {
    width: 49%;
  }
}