body{
    background-color: hsl(222, 26%, 31%);
    font-family: 'League Spartan', sans-serif;
}
  .calculator {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 340px;
    font-family: 'League Spartan', sans-serif;
    margin: 0 auto;
    
    border-radius: 10px;
    box-shadow: 0px 0px 10px #666;
    padding: 20px;
    
  }
  .calculator input[type="button"] {
    width: 60px;
    height: 60px;
    margin: 10px ;
    font-size: 24px;
    border: none;
    border-radius: 10%;   
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .calculator input[type="text"] {
    width: 100%;
    height: 60px;
    margin-bottom: 14px;
    font-size: 24px;
    border: none;
    text-align: right;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 5px;
    
  }
p{
text-align: right;
}
.outside{
margin-bottom: 10px;
width: 52px;
float: right;
border-radius: 10px;
 }

 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #054a61;
    border-radius: 10px;
    height: 18px;
    
  }


  






  /* Theme 1 */

 
  .theme-1 {
    background: hsl(223, 31%, 20%);
  }
  .theme-1 input[type="button"] {
    background: hsl(30, 25%, 89%) ;
    box-shadow: 1px 4px 4px 0px hsl(35, 11%, 61%);
    color: hsl(221, 14%, 31%);
  }
  .theme-1 input[type="button"]:hover {
    background: hsl(28, 16%, 65%);
  }
  .theme-1  input[type="text"] {
    background-color: hsl(224, 36%, 15%);
    color:  hsl(30, 25%, 89%);
  }



  /* Theme 2 */
  .theme-2 {
    background-color: hsl(0, 5%, 81%) ;
  }
  .theme-2 input[type="button"] {
    background-color: hsl(45, 7%, 89%);
    box-shadow: 1px 4px 4px 0px hsl(35, 11%, 61%);
    color:hsl(60, 10%, 19%)
  }
  



  .theme-2 input[type="button"]:hover {
    background-color: hsl(35, 11%, 61%);
  }
  .theme-2  input[type="text"] {
    background-color:  hsl(0, 0%, 93%);
    color: hsl(60, 10%, 19%);
  }



/* theme-3 */

  .theme-3 {
    background-color: hsl(268, 71%, 12%) ;
  }
  .theme-3  input[type="button"] {
    background-color: hsl(268, 47%, 21%);
    color: hsl(52, 100%, 62%);
    box-shadow: 1px 4px 4px 0px hsl(285, 91%, 52%);
  }
  .theme-3  input[type="button"]:hover {
    background-color: hsl(285, 91%, 52%);
  }
  .theme-3 .calculator input[type="text"] {
    background-color: #424242;
    color: #fff;
  }



@media  only screen and (max-width: 350px)  {

    .calculator {
       
     
        width: 280px;
        padding: 14px;
        
      }


     
    .calculator input[type="button"] {
      width: 50px;
      height: 40px;
      margin: 6px ;
      font-size: 18px;
      border: none;
      border-radius: 10%;   
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .calculator input[type="text"] {
      width: 100%;
      height: 50px;
      margin-bottom: 14px;
      font-size: 20px;
      border: none;
      text-align: right;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      
    }
 
  .outside{
  margin-bottom: 8px;
  width: 42px;
  float: right;
  border-radius: 10px;
   }
  

  
    
}