/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* ===================================================== */

:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-200: hsl(0, 0%, 94%);
  --clr-neutral-300: hsl(0, 0%, 86%);
  --clr-neutral-900: hsl(0, 0%, 8%);
  --clr-accent-400: hsl(259, 100%, 65%);
  --clr-secondary-400: hsl(0, 100%, 67%);
  --clr-primary-400: hsl(0, 1%, 44%);

  --bg: var(--clr-neutral-200);
  --text-clr: var(--clr-neutral-900);
  --card-clr: var(--clr-neutral-100);
  --input-clr: var(--clr-primary-400);
  --error: var(--clr-secondary-400);

  --size-80: 0.775rem;
  --size-100: 0.875rem;
  --size-200: 1.5rem;
  --size-300: 2rem;
  --size-400: 3rem;
  --size-500: 3.5rem;

  --font-family: 'poppins';

  --fw-regular: 400;
  --fw-semi-bold: 700;
  --fw-bold: 800;

  --fs-input: var(--size-200);
  --fs-output: var(--size-500);
}

@media (max-width: 768px) {
  :root {
    --fs-input: var(--size-200) !important;
    --fs-output: var(--size-400) !important;
  }
}

body {
  font-family: var(--font-family);
  font-weight: var(--fw-regular);
  background-color: var(--bg);
  color: var(--text-clr);
}

.flex {
  display: flex;
}

.stacked > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

#age-calculator {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.calculator {
  --max-width: 700px;
  --padding: 1rem;
  /* border: 1px solid red; */
  background-color: var(--card-clr);
  min-height: max-content;
  width: min(var(--max-width), 100% - var(--padding) * 2 );
  overflow: hidden;
  border-radius: 1rem;
  border-bottom-right-radius: 30%;
  padding: 3rem;
}

.calculator #form-inputs {
  color: var(--input-clr);
  /* flex-wrap: wrap; */
  gap: 2em;
}

.calculator #form-inputs label {
  font-size: var(--size-80);
  font-weight: var(--fw-semi-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
  display: inline-block;
}

.calculator #form-inputs input {
  /* width: 125px; */
  width: 100%;
  font-size: var(--fs-input);
  font-weight: bold;
  outline: none;
  padding-inline: 1rem;
  padding-block: .5rem;
  border-radius: .3rem;
  border: .13rem solid hsl(0, 0%, 94%);
}

.calculator #form-inputs input:focus {
  border-color: var(--clr-accent-400);
  color: black;
}

.form-control.error label {
  color: var(--error);
}

.form-control.error input{
  border-color: var(--error) !important;
}

.form-control.success input {
  border: .13rem solid hsl(0, 0%, 94%) !important;  
}

.form-control small {
  color: var(--error);
  font-style: italic;
}

@media (min-width: 50em) {
  .calculator #form-inputs {
    width: 75%;
    transition: all 500ms linear;
  }
}

@media (max-width: 50em) {
  .calculator {
    --max-width: 500px;
    --padding: 1rem;
    width: min(var(--max-width), 100% - var(--padding) * 2 );
    padding-inline: 2rem;
  }
  .calculator #form-inputs {
    gap: 1em;
  }
}

@media (max-width: 768px) {.calculator #form-inputs input {
  padding-block: 1rem;
}}

@media (max-width: 375px) {
  .calculator {
    padding-inline: 1rem;   
    border-bottom-right-radius: 20%;
    min-height: 20px !important;
  }
  .calculator #form-inputs {
    gap: 1em;
  }
  .calculator #form-inputs h4 {
    font-size: .8em;
  }
  .calculator #form-inputs input {
    font-size: 1.1rem;
    padding-block: .7rem;
    padding-inline: 1rem;
  }
}

/* render */
#render {
  margin-block: 2rem;
  display: grid;
  place-items: center;
}

#render .line {
  background-color: var(--clr-neutral-200);
  height: 2px;
  width: 100%;
}

#render-btn {
  background-color: var(--clr-accent-400);
  border: none;
  padding: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
} 

#render-btn:hover {
  background-color: black;
  transition: 500ms;
}

@media (min-width: 50em) {
  #render {margin: 0}
  #render-btn {  justify-self: end; }
}

@media (max-width: 375px) {
  #render-btn img {
    width: 25px;
  }
}


/* calculator-output */
#calculator-output .flex{
  align-items: center;
  font-size: var(--fs-output);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: 1;
  margin-top: .5rem;
}

.output {
  color: var(--clr-accent-400);
  margin-right: 11px;
}

@media (max-width: 500px) {
  #calculator-output .flex {
    font-size: 2.2rem;
  }
}

@media (max-width: 393px) {
  .calculator {
    border-radius: 0;
  }
  #calculator-output .flex {
    font-size: 2rem;
  }
}

@media (max-width: 335px) {
  #calculator-output .flex {
    font-size: 1.8rem;
  }
}
@media (max-width: 319px) {
  #calculator-output .flex {
    display: block;
    text-align: center;
  }

  form {
    display: block !important;
  }
}