body{
	/*width: 960px;
	margin: 0px auto;*/
}
a{
	text-decoration: none;
}
h1{
	/*text-align: center;*/
}
h2{
	margin: 0px 0px 10px;
}

.container{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 10px;
}
/* repeat(auto-fit, minmax(232.5px, 1fr));
grid-template: repeat(#, 1fr) / repeat (#, 1fr);  first portion is rows, 2nd is columns */


.header{
	grid-column: 1 / -1;
	justify-self: center;
	align-self: center;
}
.article-container{
	grid-column: 4 / 10;
	display: grid;
	/*grid-template-columns: 1fr 1fr 1fr 1fr;*/
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
}
	
.folder{
	background-color: #ddd;
	grid-column: 1fr;
	padding: 10px;
}
/* alternatively, grid-column: span # (# = number of columns), 1 / # (# = total number of columns -1); */

.footer{
	justify-self: center;
	align-self: center;
	margin: 20px;
	grid-column: 1 / -1
}

/* For desktop and up */
@media only screen and (max-width: 1200px){
	h1{
		font-size: 64px;
	}
	h2{
		font-size: 48px;
	}
	a{
		font-size: 36px;
	}
	.article-container{
		grid-column: 1 / 13;
		grid-template-columns: auto auto auto;
	}
}

@media only screen and (max-width: 980px){
	h1{
		font-size: 75px;
	}
	h2{
		font-size: 64px;
	}
	a{
		font-size: 50px;
	}
	.header{
		grid-column: 1 / 13;
	}
	.article-container{
		grid-column: 1 / 13;
		grid-template-columns: 1fr 1fr;
	}
}

/* For tablet landscape */
@media only screen and (max-width: 900px){
	h1{
		color:blue;
	}
	.article-container{
	}
}

/* For tablet portrait */
@media only screen and (max-width: 600px){
	h1{
		color:green;
		font-size: x-large;
	}
	.article-container{
		grid-template-columns: 1fr 1fr;
	}
}

/* For phone only */
@media only screen and (max-width: 400px){
	h1{
		color:purple;
	}
	.article-container{
		grid-template-columns: 1fr;
	}
}

/* For phone only */
@media only screen and (max-width: 360px){
	h1{
		color:orange;
	}
	.article-container{
	}
}