/*TODO: make a few media queries*/

body {
	font-family: 'Mukta Vanni', sans-serif;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: 
	"header"
	"writeups"
	"footer";
}
/*header*/
.header {
	grid-area: header;
	padding-left:10vw;
	margin: 25px 0;
}
.header > h1 {
	font-family: 'Heebo', sans-serif;
	font-size: 35px;
}

/*footer*/
.footer {
	margin: 25px;
	grid-area: footer;
	text-align: center;
}

.writeups {
	grid-area: writeups;
	margin: 0 auto;
	width: 80vw;
	display: grid;
	grid-gap: 60px;
	padding-bottom: 50px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 300px 300px 300px;
	grid-template-areas: 
	"wua wua wua wua wud wud"
	"wub wub wub wuf wuf wuf"
	"wue wue wuc wuc wuc wuc";
}

#wua {
	grid-area: wua;
	background-image: url('img/stars.png');
	background-size: cover;
}
#wua > .title {
	font-size: 24pt;
}
#wua > .subtitle {
	font-size: 14pt;
	text-align: left;
	padding-top: 160px;
}
#wub {
	grid-area: wub;
	background-image: url('img/train.png');
	background-size: cover;
}
#wub > .title {
	text-align: right;
}
#wub > .subtitle {
	text-align: right;
}
#wuc {
	grid-area: wuc;
	background-image: url('img/mars.png');
	background-size: cover;
	background-position: middle;
}
#wuc > .title {
	padding-top: 30px;
}
#wuc > .subtitle {
	color: #eee;
}
#wud {
	grid-area: wud;
	background-image: url('img/terrain.png');
	background-size: cover;
}
#wud > .title {
	text-align: right;
}
#wud > .subtitle {
	text-align: right;
	color: #efefef;
}
#wue {
	grid-area: wue;
	background-image: url('img/states.png');
	background-size: cover;
}
#wue > .title {
	color:#333;
}
#wue > .subtitle {
	color: grey;
	padding-top: 195px;
}
#wuf {
	grid-area: wuf;
	background-image: url('img/pain.png');
	background-size:cover;
}
#wuf > .title {
	color:black;
}
#wuf > .subtitle {
	color: #555;
	padding-top: 195px;
	text-align: right;
}
.writeup {
	overflow: hidden;
	padding-top: 0;
	border-radius: 10px;
	background-color: white;
	width: 100%;
	height: 100%;
	box-shadow: 0 15px 35px rgba(50,50,93,.3),
	0 5px 15px rgba(0,0,0,0.17);
	/*box-shadow: 0px 1.5px 3px .25px #888;*/
	transition: .1s;
}
.writeup:hover {
	transform: translateY(-2px);
}
.writeup:active {
	transform: translateY(1px);
}
.title {
	padding: 0 15px;
	color: white;
	z-index: 10;
	font-size: 14pt;
}
.subtitle {
	padding: 0 15px;
	color: lightgrey;
	z-index: 10;
	font-size: 11pt;
	font-weight: 700;
}