body{
    background-color: #f0e2dc;

    }


    h1{
        font-family: 'Expletus sans',cursive;
        color: #7c3615;
        font-size: 2.5rem;
        padding-left: 20px;
    }

    label{
        font-weight: bold;       
   }
/* --------------------styling the form  ------------------------------------------------------ */
    form{

font-family: 'Expletus sans',cursive;
color: #44361b;
font-size: 1.0rem;       
background-color: #e2c74c;        
width: 500px;
margin: 5% auto;   /* center the form in the body  */
padding: 5px 0px 5px 5px ;

              

    }

    p{
        margin: 25px;
    }
/* ---------------styling all input types --------------------------------------------------------  */
    input[type="text"],input[type="email"],input[type="URL"],input[type="tel"], input[type="time"] {
       width: 70%;
       font-size: 1.1rem;
        float: right;


    }
/* 
  changes the background color and border for all  input elements ,
  when the mouse is on top of the fieldbox or keyboard focus 

*/
input:hover, input:focus {
    
background-color: #FEFF7F;
border: 1px solid #030301;
color:#000000;
}
  
 /*  ------------- styling the button submit  ---------------------------------------------------*/
 .ibutton {
    font-family: arial;
    color: #f5f9ff !important;
    font-size: 16px;
    
    box-shadow: 1px 1px 1px #BEE2F9;
    padding: 10px 25px;
    border-radius: 9px;
    border: 2px solid #3866A3;
    margin-bottom: 2%;
    background: #2b1b0e;
  }
  .ibutton:hover {
    color: #1b180b !important;
    background: #f1cf84;
  }

   

    @media (max-width:480px) {

        body{

            background-color: white  ;
        }
/*  set the form to width  auto so it will adjust it to the screen size */
        form {
            width:auto;
         
        }

        label{
            width: 100%;
            display: none;
        }
/* align the inputs to the form  */
        input[type="text"],input[type="email"],input[type="URL"],input[type="tel"], input[type="time"] {
            width: 99%;
            margin-bottom: 5px;
            padding: 2px 2px 10px 2px;
       
        }

input:focus {
font-size: 16px;

  }
/*  adjusting the button to the form   */
.ibutton {
    font-size: 1.5rem;
    margin: 5px auto;
   margin-left: -5px;

}
}