@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100&family=Space+Grotesk:wght@500&display=swap');

body {
    background-color: #EDF3FA;
}
/*-------------------------------------------------Form styling*/

input[type=text], 
input[type=number] {
    width: 80px; /* let's shrink the width so that i can put the label and input in one line (make space) */
    background-color: #EDF3FA;
    border-radius: 12px;
   
    height: 25px; /* making input box a reasonably good size */
    box-shadow: 0px 5px 5px #1d3dcdab; 
    margin: 5px;

    border: none;
    /*removes sharpmness from the edges, but the shadows are still there */
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  /* attributing the solution to the above 
  youtube channel https://www.youtube.com/watch?v=v62zala_rlQ*/
}

form  {
    margin: 40px auto; 
    /* this setting centers the form,
    but also leaves space between boxes */
    background-color: rgba(28, 78, 187, 0.13);
    border-radius: 15px;
    padding: 20px; /* gives form a padding */
    box-shadow: 0px 5px 5px #1d3dcdab; 
    align-items: baseline; 
    /* centers the slider input and the logo */
}

#currency-input-container-1,
#currency-input-container-2,
#currency-input-container-3 {
    /* this centers the display and currecy together
    a bit more in line with the result container result boxes */
    display: flex;
    justify-content: center; 
    margin-top: 5px;
    margin-bottom: 5px;
    align-items: center;
    margin-right: 5px;
}

  /*----------------------------------------------MEDIA RULES*/

  @media screen and (min-width: 350px) {
    form,
    h1,
    #styling-result-container {
        width: 275px;
    }

    /* only adding the result container to the existing rule - which worked, 
    however now need*/
    .styling-amount-container,
    .styling-rate-container,
    .styling-term-container {
        flex-direction: column;
    }

    form span i {
        flex-shrink: 1;
    }
}

@media screen and (min-width: 750px) {
    form,
    h1,
    #styling-result-container {
      width: 720px;
    }
  
    .styling-amount-container,
    .styling-rate-container,
    .styling-term-container,
    #styling-result-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  
    #mortgage-slider,
    #rate-slider,
    #term-slider {
      width: 100% ;
      max-width: 270px;
    }

    .slider-container {
        width: 100%;
        max-width: 270px;
      }
      /* targeting sliders with a class above helped with the issue*/
  }
  
/*------------------------------------------------SLIDER STYLING */

#mortgage-slider,
#rate-slider,
#term-slider {
     /* Margin for top and bottom parts of the slider 
    because I want to give a box shadow */
    margin: 5px 0px;
    background-color: #1363d3;
    width: 100% !important;
    max-width: 270px !important;
     /* after tidying up sliders are all of a sudden less than 270px - trying to fix that */
}


input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 5px 7px #1d3dcdab; 
  /* Some of the code is taken and inspired by 
  https://www.cssportal.com/style-input-range/ */
  border: 7px solid #83a2e5db;
  border-radius: 23px;
  background: #4b4396;
  -webkit-appearance: none;
  color: #29437A; /* need to change the color of the thumb! */
}

input[type=range]::-webkit-slider-runnable-track {  
  border-radius: 12px; 
  /* rounds out the borders  around the slider*/
  margin: 1px;
  padding: 1px;
}

  /*----------------------------------------------CALCULATE BUTTON STYLING*/

  #calculate-button {
    text-transform: uppercase;
    width: 226px; 
    background-color: #29437A;
    border-radius: 12px;
    height: 40px;
    box-shadow: 0px 5px 5px #1d3dcdab; 
    border: none;
    color: #EDF3FA;
    letter-spacing: 5px;
  }

  .styling-button-container {
    display: flex;
    justify-content: center; 
    margin-top: 20px;
    margin-bottom: 20px;
    /* this puts the button in the centre */
  }

  #calculate-button:hover {
   background-color: #1363d3;
  }

  #calculate-button:active {
    background-color: #EDF3FA;
    color: #29437A;
  }

/*------------------------------------------------STYLING H1*/

 h1 {
    margin: 40px auto; 
    /* this setting centers the form,
    also the 40px gives space between h1 and form  */
    background-color: #29437A;
    border-radius: 15px;
    padding: 20px; /* gives form a padding */
    box-shadow: 0px 5px 5px #1d3dcdab; 
    /* Using the same style as the form */
    text-align: center;    
}

/*-----------------------------------------------FONT STYLING */

label {
    text-transform: uppercase;
    color:  #29437A;
    font-weight: bold;
    text-shadow: 0px 0px 1px #030b2cab; 
    font-size: large;
    /*font-family: 'Space Grotesk', sans-serif !important;
    FONT DESICION LOGIC:
    was my original idea for the font I was worried it may be hard to see, 
    but after seeing couple of UX inspired desinges aka https://dribbble.com/shots/9933822-Mortgage-Calculator 
    decided to revert back to a more gentlefont, so that it does not distract from the numbers, h1 and the button
    */
    font-family: 'Kanit', sans-serif;
}

form #calculate-button  {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: large;
    text-shadow: 0px 5px 10px #07144eab
}

h1 {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #EDF3FA;
}

form .label-container {
    padding: 3px;
    border: none;
    padding: 3px;
 }

/*------------------------------------------------NUMBERS AND ICON STYLE*/

input[type=number],
input[type=text],
i {
   color: #29437A;
  /* text-shadow: 0px 0px 1px #1d3dcdab; */
   font-size: large;
   padding-left: 10px;
   padding-right: 10px;
   /* targeting both icons with i and number inputs so that there's a bit of give
   and number and symbols are not too flush to the input*/
   margin: 5px;
   display: inline;
}
   /*  vertical-align: middle;
   this ligns the input and slideer and icons so that they are vertically in the middle and 
   inline with each other */
   .slider-container {
    padding: 5px;
    margin: 5px;
   }

   /*--------------------FIXING THE BREAKPOINTS FOR THE FORM ITEMS*/

   .styling-amount-container,
   .styling-rate-container,
   .styling-term-container {
    padding: 5px;
    display: flex;
   }

   div.styling-rate-container input[type="range"],
   div.styling-term-container input[type="range"],
   div.styling-amount-container input[type="range"] {
    width: 100%;
    max-width: 270px;
   }
   /* after tidying up sliders are all of a sudden less than 270px - trying to fix that */

   /*---------------------------------------------RESULT CONTAINER STYLING */
  
   #styling-result-container {
    margin: 40px auto; 
    /* this setting centers the form,
    but also leaves space between boxes */
    background-color: rgba(28, 78, 187, 0.13);
    border-radius: 15px;
    padding: 20px; /* gives form a padding */
    box-shadow: 0px 5px 5px #1d3dcdab; 
    align-items: baseline; /* centers the slider input and the logo */
}

#result-currency-container-1,
#result-currency-container-2,
#result-currency-container-3 {
    display: flex;
    justify-content: center; 
    margin-top: 5px;
    margin-bottom: 5px;
    align-items: center;
    margin-right: 10px; /* result container is too flush to the next label
    so adding margin for the right specifically */
}

.label-container {
    display: flex;
    justify-content: center; 
    margin-top: 5px;
    margin-bottom: 5px;
}