html{
	font-family: 'Noto Serif', serif;
	text-decoration: none;
}


/* Set Your Own Margin & Padding */
h1 {
    font-family: 'Noto Serif', serif;
   
    font-size: 1.875em;
}
h2{
    font-family: 'Noto Serif', serif;
	font-size: 1.75em;
}
h3{
    font-family: 'Noto Serif', serif;
	font-size: 1.625em;
}

p{
    font-family: Verdana, sans-serif;
    font-size: 1.375em;
}
/* Layout for Style Tile*/
section {
	margin: 20px 0;
}

.color-1,
.color-2,
.color-3,
.color-4,
.pattern-1,
.pattern-2,
.pattern-3,
.pattern-4 {
	border: 1px solid #000;
	float: left;
	margin: 0 10px;
	height: 200px;
	width: 200px;
}

.color-1{
	background-color: #008080;
}

.color-2{
	background-color: #BFFFFE;
}

.color-3{
	background-color: #802A00;
}

.color-4{
	color: white;
	background-color: #000000;
}

.pattern-1{
background: url("bg.png");

}

.pattern-2{
 background: url("parchment.jpg");
}
.pattern-3{
 background: url("black geometric.png");

}

.pattern-4{
background: url("teal.png");
}

@media screen and (max-width: 480px){

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8.
.grid_9,
.grid_10,
.grid_11,
.grid_12,{
    width: 100%;
}

@media screen and (max-width: 1000px){
    
}