Adjust Media Selector

The problems about the following sentence is that there is no space before "(" and after ")"

@media(min-width:500px)and(max-width:550px){

It should be spaced like this

@media (min-width:500px) and (max-width:550px){

To do so,
1. take a text from "@media" to "{"
2. Convert all "<alpha-char>(" to "<alpha-char> ("
3. Convert all ")<alpha-char>" to ") <alpha-char>"

Input Text

.color-div{
	margin:10px;
	display:inline-block;
	width:100px;
	height:100px;
}
@media(min-width:500px)and(max-width:550px){
  h3 { color: blue; }
}
.red-div{
	background:red;
}
.green-div{
	background:green;
}
@media(min-width:100px)and(max-width:250px){
	.xyz { color: blue; }
}
.blue-div{
	background:blue;
}
.pic-div{
	background:url(../img/test.jpg);
	background-size:cover;
}

After adding spaces

.color-div{
	margin:10px;
	display:inline-block;
	width:100px;
	height:100px;
}
@media (min-width:500px) and (max-width:550px){
  h3 { color: blue; }
}
.red-div{
	background:red;
}
.green-div{
	background:green;
}
@media (min-width:100px) and (max-width:250px){
	.xyz { color: blue; }
}
.blue-div{
	background:blue;
}
.pic-div{
	background:url(../img/test.jpg);
	background-size:cover;
}