/* Design System */
:root {
  /* Colors */
  --red-highlight: #D2483D;
  --light-grey: #F3F3F3;
  --black: #000000;
  --white: #FFFFFF;
  /* Text configuration */
  --body-font: "Montserrat";
  --body-highlight-font: "Montserrat";
  --header-font: "Bebas Neue";
  --title-font: "Bebas Neue";
  --body-font-weight: 400;
  --body-highlight-font-weight: 600;
  --header-font-weight: 400;
  --title-font-weight: 400;
  --body-font-size: 1.25rem;
  --body-highlight-font-size: 1.25rem;
  --header-font-size: 4.5rem;
  --title-font-size: 1.5rem;
  --body-line-height: 1.5rem;
  --body-highlight-line-height: 1.5rem;
  --header-line-height: 5.375rem;
  --title-line-height: 1.75rem;
}

#header {
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
}

.header__back {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  margin: 2.25rem;
  font-size: 1.3rem;
  height: 3rem;
}

.card h3 {
  color: #0c63e4;
}

.container {
  margin-top: 50px;
  margin-bottom: 15%;
}

.card {
  padding: 20px;
  gap: 1rem;
  margin: 2rem 0;
}

/*output is hidden*/
.hide_result {
  display: none;
}

/*more input for children are hidden*/
#hide_more {
  display: none;
}

.hide_att_h {
  display: none;
}

@media (max-width: 1024px) {
  * {
    font-size: 2rem;
  }
  form {
    display: flex;
    flex-direction: column;
  }
  .hide_container {
    display: none;
  }
  .container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: 3%;
    margin-left: 3%;
    max-width: none;
  }
}

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