:root {
	--pink: 255,104,185;
    --green: 109,218,109;
	--yellow: 255,214,63;
    --blue: 51,153,254;
}

.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 5%;
  box-sizing: border-box;
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-family: "code-saver", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #3399FE; 
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0rem;
	font-family: "code-saver", sans-serif;
	font-weight: 700; }
h1 { font-size: 2.25rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

p {
  	margin-top: 0;
 }

#header{
	padding: 5%;	
}

.post-it_group {
	padding: 0;
	margin: 0;
	list-style: none;
}

.post-it {
	width: 90%;
	height: 0;
	padding-bottom: 90%;
	position: relative;
	float: left;
	margin: 5%;
}

.post-it::after {
  	content: '';
  	position: absolute;
  	top: 15%;
  	right: 0%;
  	width: 85%;
  	height: 85%;
  	background: #FFD63F;
  	z-index: -1;
}

.post-it img{
	width: 85%;
	position: relative;
}
.post-it.pink > h2, .post-it.pink::after {
	background-color: rgb(var(--pink));
}
.post-it.green > h2, .post-it.green::after {
	background-color: rgb(var(--green));
}
.post-it.blue > h2, .post-it.blue::after {
	background-color: rgb(var(--blue));
}
.post-it.yellow > h2, .post-it.yellow::after {
	background-color: rgb(var(--yellow));
}

.number.pink{
	color: rgb(var(--pink));
}
.number.green{
	color: rgb(var(--green));
}
.number.blue{
	color: rgb(var(--blue));
}
.number.yellow{
	color: rgb(var(--yellow));
}

li.post-it:nth-child(even)::after {
	right:auto;
	left: 0%
}

li.post-it:nth-child(even) img{
	float: right;
}

li.post-it:nth-child(even) > h2{
	left: 15%;
}


li > h2{
	position: absolute;
	margin: 5%;
	padding: 0rem 1rem 0rem;
	background: inherit;
	font-weight: 700;
	letter-spacing: 3px;
	z-index: 1;
}

@media (min-width: 550px) {
	.container {
    padding: 2.5%;
	}

	.post-it {
		width: 45%;
		padding-bottom: 45%;
		margin: 2.5%;
	}
	#header{
		padding: 2.5%;	
	}
}

@media (min-width: 900px) {
	
	.container, #header {
    padding: 2.5%;
	}

	.post-it {
		width:28.333%;
		padding-bottom: 28.333%;
		margin: 2.5%;
	}

}