/* Header */
header {
    margin-bottom: 1.5rem;
  }
  header h1 {
    color: var(--slate-900);
    font-size: 1.5rem;
    font-weight: var(--fw-700);
    margin-bottom: .5rem;
  }

  header a {
    color: var(--slate-500);
    font-weight: var(--fw-500);
  }

  header a:hover {
    color: var(--slate-700);
  }

  /* Mortgage */
  .mortgage-calc {
    padding: 2.5rem 1.5rem 2rem;
    background-color: var(--white);
  }

  label {
    display: block;
    color: var(--slate-500);
    font-weight: var(--fw-500);
    margin-bottom: .75rem;
  }

  input[type="number"] {
    width: 100%;
    height: 3rem;
    border-radius: .3rem;
    outline: none;
    border: 1px solid var(--slate-700);
    color: var(--slate-900);
    font-weight: var(--fw-700);
    padding-left: 1rem;
  }

  input:hover, button, .radio-container {
    cursor: pointer;
  }

  .mortgage-input:not(.error) input:focus {
    border:2px solid var(--lime);
  }

  .mortgage-input:not(.error) input:focus + .input-symbol {
    background-color: var(--lime);
    border:2px solid var(--lime);
  }

  .amount-container .mortgage-input:nth-of-type(1) input[type="number"] {
    padding-left: 3.5rem;
  }

  .mortgage-input {
    position: relative;
    margin-bottom: 1.5rem;
  }

  .mortgage-input p {
    display: none;
    margin-top: .5rem;
  }

  .input-symbol {
    position: absolute;
    top: 0;
    height: 3rem;
    color: var(--slate-700);
    font-weight: var(--fw-700);
    background-color: var(--slate-100);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--slate-700);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .input-symbol.left {
    border-radius: .3rem 0 0 .3rem;
    border-right: none;
  }

  .input-symbol.right {
    right: 0;
    border-radius: 0 .3rem .3rem 0;
    border-left: none;
  }

  .radio-input {
    display: flex;
    align-items: center;
    height: 3rem;
    border: 1px solid var(--slate-700);
    border-radius: .3rem;
    padding-left: 1.25rem;
    margin-bottom: .5rem;
  }
  .radio-input:hover {
    border-color: var(--lime);
  }
  .radio-container {
    margin-bottom: 1.5rem;
  }
  .radio-input label {
    margin-bottom: 0;
    color: var(--slate-700);
    font-weight: var(--fw-700);
    font-size: 1.1rem;
  }

  .radio-container p {
    display: none;
  }

  input[type="radio"] {
    width: 1.1rem;
    height: 2rem;
    margin-right: 1rem;
    border: 1px solid var(--slate-700);
  }

  .active-radio {
    background-color: hsl(61, 70%, 82%);
    border: 1px solid var(--lime);
  }

  button {
    width: 100%;
    height: 3rem;
    border-radius: 3.25rem;
    outline: none;
    border: none;
    background-color: var(--lime);
    color: var(--slate-900);
    font-weight: var(--fw-700);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button:hover {
    background-color: hsl(61, 70%, 72%);
  }

  button img {
    margin-right: 1rem;
  }

  .mortgage-input.error input[type="number"] {
    border-color: var(--red);
  }
  .mortgage-input.error .input-symbol {
    border-color: var(--red);
    background-color: var(--red);
    color: var(--white)
  }
  .mortgage-input.error p, .radio-container.error p {
    display: block;
    color: red;
  }