@charset "iso-8859-1";
/* CSS Document */
@import url(http://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;
}


#envelope{
width: 90%;
margin: 10px 30% 10px 25%;
padding:10px 0;
border: 2px solid gray;
border-radius:10px;
}
form{
	width: 90%;
	margin-top: 4%;
	margin-right: auto;
	margin-bottom: 4%;
	margin-left: auto;
}


/* 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:1px solid #ec1654;
}

input[type=submit]
{
margin-bottom: 20px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #ec1654;
background-color: #ec1654;
color: aliceblue;
font-size:15px;
cursor:pointer;
}
#submit:hover
{
background-color: black;
}
textarea{
width:100%;
padding: 15px;
margin-top: 10px;
border:1px solid #ec1654;
border-radius:5px;
margin-bottom: 20px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #ec1654;
}

@media screen size (max-width:1200px and min-width:601px) {
#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}
}	
	
@media screen size (max-width:600px and min-width:351px) {
h2{
font-size:16px;
}
p{
font-size:14px;
}
label{
font-size:12px;
}
input[type=submit]{
padding:5px;
}
input[type=text]{
padding: 8px;
}
 #envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}
}
@media screen size (max-width:350px) {
input[type=submit]
{
padding:4px;
font-size:12px;
-webkit-appearance: button;
cursor: pointer;
}
input[type=text]{
padding: 8px;
}
label{
font-size:12px;
}
h2{
font-size:15px;
}
p{
font-size:12px;
}
#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}	
}