@charset "utf-8";

/* This is the colored box which changes based on screen widths in two media queries below. */
.responsiveBox{
	width: 30%;
	margin: 0px auto;
	padding: 10px;
	background-color: red;
	color: white;
	font-size: 20px;
	font-weight: bold;
}
@media screen and (max-width: 720px){
    .responsiveBox{
		width: 50%;
		background-color: blue;
		color: orange;
		font-size: 14px;
		font-style: italic;
    }
}
@media screen and (max-width: 420px){
    .responsiveBox{
		width: 90%;
		background-color: green;
		color: yellow;
		font-size: 12px;
		font-style: normal;
    }
}

.responsiveBox img{
	max-width: 75%;
}

/* This is visible on wide screens and invisible on narrow screens. */
.laptopWidth{
	display: block;
}
@media screen and (max-width: 720px){
	.laptopWidth{
		display: none;
	}
}

/* This is only visible on tablet sized screens. */
.tabletWidth{
	display: none;
}
@media screen and (max-width: 720px){
	.tabletWidth{
		display: block;
	}
}
@media screen and (max-width: 420px){
	.tabletWidth{
		display: none;
	}
}

/* This is only visible on narrow screens. */
.phoneWidth{
	display: none;
}
@media screen and (max-width: 420px){
	.phoneWidth{
		display: block;
	}
}