@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
* { /* With these codes padding and border does not increase it's width and gives intuitive style.*/

/*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;*/ }
body { margin: 0; padding: 0; font-family: 'Roboto Slab', serif; }
div#envelope { width: 75%; margin: 10px 7% 10px 7%; padding: 0px 0px; border: 2px solid gray; border-radius: 10px; }
form { width: 75%; margin: 4% 10%; }
/*header { background-color: #4180C5; text-align: center; padding-top: 12px; padding-bottom: 8px; margin-top: -11px; margin-bottom: -8px; border-radius: 10px 10px 0 0; color: aliceblue; }*/
/* Makes responsive fields. Sets size and field alignment.*/
input[type=text] { margin-bottom: 10px; margin-top: 10px; width: 100%; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; }
input[type=checkbox] { margin-bottom: 10px; margin-top: 10px; padding: 5px; border-radius: 5px; border: 1px solid #7ac9b7; }
input[type=submit] { margin-bottom: 10px; width: 100%; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; background-color: #4180C5; color: aliceblue; font-size: 15px; cursor: pointer; }
#submit:hover { background-color: black; }
textarea { width: 100%; padding: 15px; margin-top: 10px; border: 1px solid #7ac9b7; border-radius: 5px; margin-bottom: 10px; resize: none; }
select { width: 100%; padding: 15px; margin-top: 10px; border: 1px solid #7ac9b7; border-radius: 5px; margin-bottom: 10px; resize: none; }
input[type=text]:focus, textarea:focus { border-color: #4697e4; }