.main-content
	div.month.month--feb(style="--color:#db7a7a") February
	each val, index in ['#db7f7a', '#db847a','#db8d7a','#db8d7a','#db917a','#db967a', '#db9a7a', '#db9a7a','#db9f7a','#dba37a', '#dba87a','#dbac7a', '#dbb07a', '#dbb57a', '#dbbe7a', '#dbc27a', '#dbc77a', '#dbd07a', '#dbd47a', '#dbd97a', '#d9db7a', '#d0db7a', '#cbdb7a', '#c7db7a', '#c2db7a', '#bedb7a', '#b9db7a', '#b5db7a']
		div.date(style="--color:"+val)= index+1
		
	div.month.month--mar(style="--color:#b0db7a") March
	each val, index in [ '#acdb7a', '#a7db7a', '#a3db7a','#9adb7a','#96db7a', '#91db7a', '#8ddb7a', '#88db7a', '#7fdb7a',	'#7bdb7a', '#7adb7e', '#7adb82', '#7adb87', '#7adb90', '#7adb9d', '#7adba6', '#7adbaf', '#7adbb3', '#7adbb8', '#7adbc1', '#7adbce', '#7adbd3','#7adbd7', '#7adadb', '#7ad6db', '#7ad1db', '#7acddb', '#7ac8db', '#7ac4db','#7abfdb', '#7ab6db']
		div.date(style="--color:"+val)= index+1
	div.month.month--title(style="--color:#7ab6db") you've got plans
	div.explanation(style="--color:#7ab2db")
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
		| .
	footer(style="--color:#7ab2db")
		a(href="https://twitter.com/meowlivia_" target="_blank")
			i.icon-social-twitter.icons
		a(href="https://github.com/oliviale" target="_blank")
			i.icon-social-github.icons
		a(href="https://dribbble.com/oliviale" target="_blank")
			i.icon-social-dribbble.icons
	//more colors: '#7aaddb', '#7aa9db','#7aa5db', '#7a9cdb', '#7a97db', '#7a8edb', '#7a81db', '#7c7adb', '#817adb', '#8a7adb', '#8e7adb', '#977adb', '#9c7adb', '#a57adb', '#a97adb', '#ae7adb', '#b27adb', '#b67adb', '#bb7adb', '#bf7adb', '#c47adb', '#c87adb', '#cd7adb', '#d17adb', '#d67adb', '#da7adb', '#db7ac5', '#db7ac1','#db7ab8','#db7ab3', '#db7aaf', '#db7aaa', '#db7aa6', '#db7aa2', '#db7a9d', '#db7a99', '#db7a94', '#db7a90', '#db7a87', '#db7a82', '#db7a82', '#db7a7a']
	div.event.event--1 
		.event__name Valentines party with Ames ❤️
	div.event.event--2
		.event__name 😎 Die Hard binge weekend 😎
	div.event.event--3
		.event__name Dinner w/ Gina 💯
	div.event.event--4a
		.event__name Charles' Taco...
	div.event.event--4b
		.event__name ... Food Truck Opening 🌯
	div.event.event--5
		.event__name Run-through 🎃

* {
	box-sizing: border-box;
}
body {
	font-family: "Comfortaa", sans-serif;
}

.explanation {
	background: var(--color);
	grid-column: span 6;
	padding: 28px;
	color: #fff;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
}

footer {
	background: var(--color);
	text-align: center;
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	place-content: center;
	a {
		text-decoration: none;
		display: inline-block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #fff;
		color: #fff;
		margin: 0 5px;
		&:hover {
			background: rgba(0, 0, 0, 0.05);
		}
		.icons {
			margin-top: 8px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

.date {
	background: var(--color);
	padding: 15px;
	position: relative;
	font-size: 20px;
}

.month {
	background: var(--color);
	font: 900 75px "Montserrat", sans-serif;
	text-transform: uppercase;
	padding: 40px 30px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	text-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
	&--feb {
		grid-column: span 3;
	}
	&--mar {
		grid-column: span 2;
	}
	&--title {
		grid-column: span 6;
		text-align: right;
		padding-right: 60px;
	}
}

.main-content {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: repeat(10, 170px) 80px;
	grid-template-columns: repeat(7, minmax(170px, 1fr));
}

.event {
	z-index: 10;
	background: transparent;
	padding-top: 40px;
	&__name {
		background: rgba(255, 255, 255, 0.4);
		border-radius: 20px;
		height: auto;
		padding: 10px;
		margin: 10px;
		font-size: 14px;
	}
	&--1 {
		grid-column: 3 / span 2;
		grid-row: 3;
	}
	&--2 {
		grid-column: 4 / span 3;
		grid-row: 3;
		padding-top: 85px;
	}
	&--3 {
		grid-column: 2;
		grid-row: 6;
	}
	&--4a {
		grid-column: 7;
		grid-row: 7;
		.event__name {
			border-radius: 20px 0 0 20px;
		}
	}
	&--4b {
		grid-column: 1 / span 2;
		grid-row: 8;
		.event__name {
			border-radius: 0 20px 20px 0;
		}
	}
	&--5 {
		grid-column: 5;
		grid-row: 9;
	}
}

//events

div.date {
	&:nth-child(15) {
		grid-column: 3;
		grid-row: 3;
	}
	&:nth-child(16) {
		grid-column: 4;
		grid-row: 3;
	}
	&:nth-child(17) {
		grid-column: 5;
		grid-row: 3;
	}
	&:nth-child(18) {
		grid-column: 6;
		grid-row: 3;
	}
	&:nth-child(34) {
		grid-column: 2;
		grid-row: 6;
	}
	&:nth-child(46) {
		grid-column: 7;
		grid-row: 7;
	}
	&:nth-child(47) {
		grid-column: 1;
		grid-row: 8;
	}
	&:nth-child(48) {
		grid-column: 2;
		grid-row: 8;
	}
	&:nth-child(58) {
		grid-column: 5;
		grid-row: 9;
	}
}

//feb & march days
.date {
	&:after {
		position: absolute;
		z-index: 20;
		top: 15px;
		right: 15px;
		font-size: 10px;
		text-transform: uppercase;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	}
}

.date {
	&:nth-child(-7n + 30):after {
		content: "Fri";
	}
	&:nth-child(-7n + 24):after {
		content: "Sat";
	}
	&:nth-child(-7n + 25):after {
		content: "Sun";
	}
	&:nth-child(-7n + 26):after {
		content: "Mon";
	}
	&:nth-child(-7n + 27):after {
		content: "Tue";
	}
	&:nth-child(-7n + 28):after {
		content: "Wed";
	}
	&:nth-child(-7n + 29):after {
		content: "Thu";
	}
}

.date {
	&:nth-child(7n + 31):after {
		content: "Fri";
	}
	&:nth-child(7n + 32):after {
		content: "Sat";
	}
	&:nth-child(7n + 33):after {
		content: "Sun";
	}
	&:nth-child(7n + 34):after {
		content: "Mon";
	}
	&:nth-child(7n + 35):after {
		content: "Tue";
	}
	&:nth-child(7n + 36):after {
		content: "Wed";
	}
	&:nth-child(7n + 37):after {
		content: "Thu";
	}
}