/*-----------------------------------*\
 * style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */

/*-----------------------------------*\
 * #CUSTOM PROPERTY
\*-----------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&family=Noto+Kufi+Arabic:wght@100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");
:root {
  /**
   * colors
   */
  --raw-seinna: hsl(24, 74%, 58%);
  --sizzling-sunrise: hsl(51, 95%, 54%);
  --scarlet: hsl(13, 96%, 47%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
  --green: rgb(14, 189, 128);
  --red: rgb(255, 68, 0);
  /**
   * typography
   */

  --ff-saira-stencil-one: "Noto Kufi Arabic", sans-serif;
  --ff-poppins: "El Messiri", sans-serif;
  --ff-roboto: "Tajawal", sans-serif;

  --fs-1: 2rem;
  --fs-2: calc(1.813rem + 1vw);
  --fs-3: calc(1.313rem + 1vw);
  --fs-4: 1.4rem;
  --fs-5: 1rem;
  --fs-6: 0.813rem;
  --fs-7: 0.75rem;

  --fw-400: 400;
  --fw-700: 700;

  /**
     * transition
     */

  --transition-1: 0.25s ease-in-out;

  /**
     * spacing
     */

  --section-padding: 80px;

  /**
     * radius
     */

  --radius-4: 4px;
  --radius-12: 12px;
}

/*-----------------------------------*\
   * #THEME COLORS
  \*-----------------------------------*/

body.dark_theme {
  --bg-primary: hsl(0, 0%, 12%);
  --bg-secondary: hsl(0, 0%, 19%);
  --color-primary: hsl(0, 0%, 100%);
  --color-secondary: hsl(0, 0%, 62%);
  --card-shadow: hsla(0, 0%, 0%, 0.4);
  --input-bg: hsl(0, 0%, 16%);

  --shadow-1: 10px 10px 40px var(--card-shadow);
}

body.light_theme {
  --bg-primary: hsl(0, 0%, 90%);
  --bg-secondary: hsl(0, 0%, 100%);
  --color-primary: hsl(0, 0%, 12%);
  --color-secondary: hsl(0, 0%, 37%);
  --card-shadow: hsla(0, 0%, 0%, 0.1);
  --input-bg: hsl(0, 0%, 93%);

  --shadow-1: 10px 10px 40px var(--card-shadow);
}
/* REGISTER */

/* Media query */
@media (max-width: 992px) {
  .form-container form input {
    width: 80%;
  }
  .form-container form textarea {
    width: 80%;
  }
}