@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
 
 /*with these codes padding and border does not increase it's width.Gives intuitive style.*/
 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
 
body {
 margin:0;
 padding:0;
 font-family: 'Droid Sans', sans-serif;
 
 }
div#envelope{
 width:100%;
 margin: 15px 0% 10px 15px;
 padding:10px 0;
 }
 
form{
width:80%;
margin-left:5%;
}
 
form header {
 text-align:center;
 font-family: 'Roboto Slab', serif;
 }
 
/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
 width:100%;
 padding: 12px;
 border-radius:5px;
 border:0px;
 background:#c4a181;
}
 
input[type=submit]
{
margin-bottom: 20px;
 width:150px;
 padding: 12px;
 border-radius:5px;
 border:0px;
 float:right;
 background:#c4a181;
}
textarea{
 width:100%;
 padding: 12px;
 margin-top: 10px;
 border:0px;
 border-radius:5px;
 margin-bottom: 20px;
 resize:none;
 background:#c4a181;
 }
 
input[type=text]:focus,
textarea:focus {
 border-color: #4697e4;
}
 
/* By using @ media form can have different layout for screen, mobile phone, tablet.*/
 
/* Sets the form layout for mobile phone, tablet*/
@media screen and (max-device-width: 600px){
 
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
 
 /*with these codes padding and border does not increase it's width.Gives intuitive style.*/
 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
 
body {
 margin:0;
 padding:0;
 font-family: 'Droid Sans', sans-serif;
 
 }
div#envelope{
 width:100%;
 margin: 10px 0% 10px 0%;
 padding:10px 0;
 }
 
form{
width:70%;
margin-left:5%;
}

 
form header {
 text-align:center;
 font-family: 'Roboto Slab', serif;
 }
 
/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
 width:100%;
 padding: 15px;
 border-radius:5px;
 border:0px;
}
 
input[type=submit]
{
margin-bottom: 20px;
 width:100%;
 padding: 15px;
 border-radius:5px;
 border:0px;
 background-color:#c4a181;
}
textarea{
 width:100%;
 padding: 15px;
 margin-top: 10px;
 border:0px;
 border-radius:5px;
 margin-bottom: 20px;
 resize:none;
 }
 
input[type=text]:focus,
textarea:focus {
 border-color: #4697e4;
}
}