:root {
  /* Primary */
  --lime: hsl(61, 70%, 52%);
  --red: hsl(4, 69%, 50%);

  /* Neutral */
  --white: hsl(0, 0%, 100%);
  --slate-100: hsl(202, 86%, 94%);
  --slate-300: hsl(203, 41%, 72%);
  --slate-500: hsl(200, 26%, 54%);
  --slate-700: hsl(200, 24%, 40%);
  --slate-900: hsl(202, 55%, 16%);

  --fs-para: 1rem;

  --fw-500: 500;
  --fw-700: 700;
}
@font-face {
  font-family: JakartaSans;
  src: url(assets/fonts/PlusJakartaSans-VariableFont_wght.ttf);
}
@font-face {
  font-family: JakartaSans-italic;
  src: url(assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf);
}

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing: border-box;
  /* outline:1px solid red; */
}
body{
  font-family: JakartaSans, Verdana, Helvetica;
  background-color: var(--slate-100);
}
.wrapper{
  width:65%;
  margin:auto;
  display: flex;
  margin-top:140px;
}
.mini-wrapper-one{
  width:50%;
  border-radius: 10px;
  padding:25px;
  background-color: var(--white);
  padding-right:70px
}
.heading{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:25px;
  h3{
    color:var(--slate-900)
  }
  span{
    color:var(--slate-700);
    font-size: 0.9rem;
    text-decoration: underline;
    transition: 300ms;
    cursor: pointer;
  }
  span:hover{
    color:hsl(200, 24%, 30%)
  }
  span:active{
    color:hsl(200, 24%, 20%)
  }
}

.number-input{
  margin-bottom:10px;
  label{
    font-size: 0.9rem;
    color:var(--slate-700);
    font-weight: var(--fw-500);
  }
  .amount-box{
    margin-block:10px;
    border:1px solid var(--slate-300);
    height:35px;
    display: flex;
    background-color: var(--white);
    border-radius:2px;
    cursor: pointer;
    span{
      background-color:var(--slate-100) ;
      width:30px;
      margin-right:10px;
      font-weight: var(--fw-700);
      padding:7px;
      font-size: 0.9rem;
      color:var(--slate-700);

    }
  }
  ::-webkit-inner-spin-button{
    display:none
  }
  input{
    width:100%;
    height:100%;
    border:none;
    outline:none;
    background-color: transparent;
    font-weight: var(--fw-700);
    color:var(--slate-900);
    font-size: 1rem;
    cursor: pointer;
  }
  
}
.amount-box:focus-within{
  border: 1px solid var(--lime);
}
.mortgage-interest{
  display: flex;
  gap:20px;

  .mini-box{
    margin-block:10px;
    border:1px solid var(--slate-300);
    height:35px;
    display: flex;
    background-color: var(--white);
    border-radius:2px;
    cursor: pointer;
  }
  .mini-box:focus-within{
    border: 1px solid var(--lime);
  }
  input{
    padding-left:10px
  }
  span{
      background-color:var(--slate-100) ;
      width:40px;
      margin-left:10px;
      font-weight: var(--fw-700);
      padding:8px;
      color:var(--slate-700);
      font-size: 0.9rem;
  }
  .years{
    width:70px;
  }
}
label{
  font-size: 0.9rem;
  color:var(--slate-700);
  font-weight: var(--fw-500);
  cursor: pointer;
}
.radios-wrapper{
  margin-block:10px;
  height:35px;
  padding:8px;
  display: flex;
  border:1px solid var(--slate-300);
  height:35px;
  display: flex;
  background-color: var(--white);
  border-radius:2px;
  cursor: pointer;

  input{
    height:19px;
    width:21px;
    cursor: pointer;
    accent-color: var(--lime);
  }
  label{
    margin-left:10px;
    font-weight: var(--fw-700);
  }
}
#calculate-btn{
  margin-top: 20px;
  width:fit-content;
  padding:10px 30px;
  display: flex;
  font-size: 0.9rem;
  align-items: center;
  font-weight: var(--fw-700);
  border-radius: 20px;
  border:none;
  cursor: pointer;
  background-color: var(--lime);
  color:var(--slate-900);


  img{
    width: 20px;
    height:16px;
  }
  span{
    margin-left: 10px;
  }
}
#calculate-btn:hover{
  background-color: hsl(61, 70%, 62%);
}
#calculate-btn:active{
  background-color: hsl(61, 70%, 72%);
}


.mini-wrapper-two{
  width:50%;
  border-radius: 6px;
  display:flex
}
.first-page{
  background-color: var(--slate-900);
  border-radius:10px ;
  border-bottom-left-radius: 50px;
  padding:10px;
  padding-inline:25px;
  border-top-left-radius: 0px;
  transform: translateX(-50px);

  .image-illustration{
    width:100%;
    height:fit-content;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top:30px
  }
  h3{
    text-align: center;
    margin-bottom: 10px;
    color:var(--white)
  }
  p{
    text-align:center;
    color:var(--slate-300);
    font-size: var(--fs-para);
  }
}
.second-page{
  display: none;
  color:white;
  background-color: var(--slate-900);
  padding:20px 30px;
  h3{
    margin-block: 10px 15px;
  }
  p{
    color:var(--slate-300) ;
    margin-bottom:30px;
    font-size: var(--fs-para);
    text-align:justify;
  }
}
.wrapper-results{
  background-color: hsl(202, 55%, 12%);
  padding:20px;
  border-radius: 6px;
  box-shadow: 0px -3px 0px var(--lime);
  color:var(--slate-700);
  #output-value{
    font-size: 2.5rem;
    margin-top: -20px;
    font-weight: var(--fw-700);
    color: var(--lime);
  }
  hr{
    border:1px solid var(--slate-700);
    margin-bottom:30px
  }
  #overall-value{
    color:var(--white);
    margin-top: -20px;
    font-weight: var(--fw-700);
    font-size: 1.3rem;
    margin-bottom: 0px;
  }
}

.attribution {
  font-size: 11px;
  text-align: center;
  margin-top: 20px;
}
.attribution a {
  color: hsl(228, 45%, 44%);
  text-decoration: none;
  font-weight: var(--fw-700);
}
.attribution a:hover {
  color: hsl(228, 45%, 54%);
}
.attribution a:active {
  color: hsl(228, 45%, 64%);
}
  
/* ----------- JS ARGUMENTS ------------ */
.errBorder{
  border: 1px solid var(--red);
}
.hide{
  display:none;
}
.radioBgc{
  border: 1px solid var(--lime);
  background-color: hsl(61, 70%, 92%);
}
.err{
  color:var(--red);
  font-size: 0.8rem;
  margin-top:-10px;
  margin-bottom: 10px;
  font-weight: var(--fw-500);
}
.focusSigns{
  background-color: var(--lime);
}
.errSigns{
  color:var(--white);
  background-color: var(--red);
}



@media (max-width:1302px){
  .wrapper{
    width:50%;
    margin-inline:28%;
    display: block;
    margin-top:140px;
  }
  .mini-wrapper-one{
    border-radius: 0px;
    width:fit-content;
    padding-right:25px
  }
  .first-page{
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    transform: translateX(0px);
    border-radius: 0px;

    .image-illustration{
      margin-top:10px
    }
  }
  .mini-wrapper-two{
    display:block;
    width:fit-content
  }
  .explanation-para, .wrapper-results{
    margin-bottom:20px
  }
}
@media (max-width:580px){
  .wrapper{
    width:100%;
    margin:0;
    display: block;
    margin-top:0;
  }
  .mini-wrapper-one{
    padding:15px;
    width:100%;
  }
  .number-input{
    .amount-box{
      margin-bottom: 20px;
    }
  }
  .mortgage-interest{
    display: flex;
    gap:20px;

    .mini-box{
      margin-block:15px;
    }
  }
  #calculate-btn{
    font-size: 0.7rem;
    padding:10px 20px;
    display: flex;
    align-items: center;
  }
  .mini-wrapper-two{
    width:100%;
  }
}
@media (max-width:290px){
  .heading{
    display:block;
    gap:10px;
    h3{
      margin-bottom:6px
    }
  }
  .mortgage-interest{
    display: block;
    gap:20px;
  }
  #calculate-btn{
    padding:10px 15px;
  }
  .wrapper-results{
    #output-value{
      font-size: 1.9rem;
    }
  }
  .second-page{
    p{
      text-align:start;
      font-size:0.8rem
    }
  }
}

.color{
  color:pink;
}