*{
            padding: 0px;
            margin: 0px;
            text-decoration: none;
    }
    body
    {
            display: grid;
            grid-column: 1fr;
            background: rgb(233, 229, 229);
            color:rgb(17, 53, 16) ;
          
    }
    a{
        color: black;
    }
@media only screen and (max-device-width: 600px) {

     .heading
     {
            display: flex;
            margin: 10px 5%;
            padding-left: 10px; 
            align-items: center;
            width: 90%;
            height: 60px;
            background: rgb(233, 229, 229);
            box-shadow: -3px -3px 4px rgba(255, 255, 255, 0.575), 3px 3px 4px rgba(0, 0, 0, 0.25);
            border-radius: 22px;
            font-family: sans-serif;

     }

     .calculator-main
     {
            width: 90%;
            height: 50em;
            margin: 50px 5%;
            background: rgb(233, 229, 229);
            box-shadow: -3px -3px 4px rgba(255, 255, 255, 0.575), 3px 3px 4px rgba(0, 0, 0, 0.25);
            border-radius: 25px;
     }

     .main-form
     {

            padding :20px;
            font-family: Arial;
            font-size: 1em;

     }

     input
     {

            border: none;
            width: 100%;
            margin: 1.75em 0; 
            padding-left: 5px;
            height : 3.5em;
            background:rgb(206, 206, 206);
            border-radius: 21px;
            font-size: 1em;
     }
     button
     {
            color: white;
            border: none;
            background: #61942E;
            border-radius: 22px;
            width: 200px;
            height: 50px;
            box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.411), 3px 3px 4px rgba(0, 0, 0, 0.3);

     }
     .result-t
     {
            display: flex;
            justify-content: center;
            align-items: center;
     }
     
     .output-box{
         font-size: 22px;
         
         display: flex;
         height: 38em;
         width: 90%;
         margin: 30px 5%;
         background: rgb(233, 229, 229);
         box-shadow: -3px -3px 4px rgba(255, 255, 255, 0.575), 3px 3px 4px rgba(0, 0, 0, 0.25);
         border-radius: 22px;
     }
     li{
         border:2px solid rgba(15, 15, 15, 0.596);
         margin: 10px 0px;
         padding:8px;
     }
     #tot{
         border: 2px dashed black;
         padding: 10px;
     }
     .content-out{
        padding: 30px;
     }
     .content-out li{
        padding: 8px;
     }
     .content-out h2{
         margin-left: 15%;
         
        padding: 10px;
     }
    
    .parent2{
        font-size: 22px;
        
          height: 10em;
         width: 90%;
         margin: 30px 5%;
         background: rgb(233, 229, 229);
         box-shadow: -3px -3px 4px rgba(255, 255, 255, 0.575), 3px 3px 4px rgba(0, 0, 0, 0.25);

         border-radius: 22px;

    }
    #quote,#help{
        padding: 18px 15px;
        margin: 5px 2%;
        font-size: 21px;
        align-items: center;
    }
    .blog-post{
        background: rgb(233, 229, 229);
        box-shadow: -3px -3px 4px rgba(255, 255, 255, 0.575), 3px 3px 4px rgba(0, 0, 0, 0.25);
        border-radius: 25px;
        width: 90%;
        font-size: 26px;
        height: 26em;
        margin: 10px 5%;
       
    }
    
    .des-wrap{
        padding: 20px;
    }
    .des-wrap p{
        padding: 20px 0px;
    }
    footer{
        
       margin-top: 30px; 
        height: 180px;
        width: 100%;
        background: rgba(37, 36, 36, 0.836);
        opacity: 0.9;
        color: white;

    }
    .icons{
        padding: 10px;
        margin: 10px 3%;
    }
    .footerr{
        padding: 20px ;
        margin-left: 20px;
    }
}