p.przyklad1 {
	outline-style: solid;
	outline-color: red;
}

body{
	background-color: grey;
}
.przyklad2 {
	text-indent:-9999px;
	line-height: 0;
}
.przyklad2:after{
content:'szary';
text-indent: 0px;
display:block;
line-height:initial;
}

@media screen and (max-width: 960px) {
	body{
		background-color: red;

	}
	p.przyklad1 {
	outline-style: solid;
	outline-color: yellow;
	content:"czerwony";
}
.przyklad2 {
	text-indent:-9999px;
	line-height: 0;
}
.przyklad2:after{
content:'czerwony';
text-indent: 0px;
display:block;
line-height:initial;
}
}

@media screen and (max-width: 760px) {
	body{
		background-color: orange;
	}
	p.przyklad1 {
	outline-style: solid;
	outline-color: red;
}
.przyklad2 {
	text-indent:-9999px;
	line-height: 0;
}
.przyklad2:after{
content:'pomaranczowy';
text-indent: 0px;
display:block;
line-height:initial;
}
}

@media screen and (max-width: 550px) {
	body{
		background-color: yellow;
	}
	p.przyklad1 {
	outline-style: solid;
	outline-color: red;
}
.przyklad2 {
	text-indent:-9999px;
	line-height: 0;
}
.przyklad2:after{
content:'czerwony';
text-indent: 0px;
display:block;
line-height:initial;
}
}

@media screen and (max-width: 320px) {
	body{
		background-color: blue;
	}
	p.przyklad1 {
	outline-style: solid;
	outline-color: red;
}
.przyklad2 {
	text-indent:-9999px;
	line-height: 0;
}
.przyklad2:after{
content:'niebieski';
text-indent: 0px;
display:block;
line-height:initial;
}
}

div{
	background-color:lightgrey;
	border: 15px solid green;
	padding: 50px;
	margin: 20px;

}