body {
    background: #ffbb00;
    font-family: 'Archivo Narrow', sans-serif;
}

ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

ul#coolstuff {
	width:80%;
	padding-left:10%;
}

li {
	display: flex;
	flex-flow: column;
	border-width: 1px;
	border-color: #000000FF;
	border:solid;
	margin:1rem;
	padding:0.5rem;
    background: #dddada;
	/*transform: rotate(5deg);*/
}

li.cool {
	font-size: 0em;
	text-align: center;

}

h1 {
	clip-path: polygon(100% 0%, 100% 100%, 0% 100%,0% 0.4em);
}

h1 {
	font-size: 100;
	margin-bottom: 0;
}

#email {
	padding-left: 1rem;
}

#nav > a {
	display:inline;
	border: 2px black solid; margin:4px;
	padding:2px;
}

#nav > a:hover {
	background-color: white;
}

#nav {
	text-align: center;
}

a {
	text-decoration: none;
	color:#000;
	display: block;
}

div.date {
	color:#888;
}

img.card {
	width:100%;
	text-align: center;
}

li.dateCard {
	background-color: #f65dbd;
	font-size: 30;
	text-align: center;
	height:max-content;
	margin:12.5% 25%;
	font-size: 45px;
}

li:nth-child(17n+0) { transform: rotate(-0.09deg); }
li:nth-child(17n+1) { transform: rotate(-0.52deg); }
li:nth-child(17n+2) { transform: rotate(1.32deg); }
li:nth-child(17n+3) { transform: rotate(1.03deg); }
li:nth-child(17n+4) { transform: rotate(-0.35deg); }
li:nth-child(17n+5) { transform: rotate(-0.30deg); }
li:nth-child(17n+6) { transform: rotate(-0.65deg); }
li:nth-child(17n+7) { transform: rotate(-1.97deg); }
li:nth-child(17n+8) { transform: rotate(1.87deg); }
li:nth-child(17n+9) { transform: rotate(-1.19deg); }
li:nth-child(17n+10) { transform: rotate(-1.04deg); }
li:nth-child(17n+11) { transform: rotate(-0.92deg); }
li:nth-child(17n+12) { transform: rotate(1.00deg); }
li:nth-child(17n+13) { transform: rotate(1.14deg); }
li:nth-child(17n+14) { transform: rotate(0.61deg); }
li:nth-child(17n+15) { transform: rotate(1.24deg); }
li:nth-child(17n+16) { transform: rotate(1.31deg); }