body {
	width: 100%;
	overflow-x: hidden;
	font-family: 'Sanchez', serif;
	margin: 0px;
}

/* PYRAMID STYLES */

div.iris:hover {
	background-color: #ffff99;
}

.index-triangle {
	margin-top: 25%;
}

.triangle-text1, .triangle-text2, .triangle-text3 {
	font-size: 60px;
  font-family: 'Dosis', sans-serif;
	letter-spacing: 6px;
	position: relative;
	margin-bottom: 5px;
}

.sad {
  background-color: #b3ffe0;
  padding: 0px 3px 0px 3px;
}

a.sad:link, a.sad:visited, a.sad:active {
	text-decoration: none;
	color: #ffff99;
}

a.sad:hover {
	color: #b3d9ff;
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: black;
	cursor: pointer;
}

.index-nav {
  font-family: 'Dosis', sans-serif;
  letter-spacing: 2px;
  font-size: 30px;
  color: #b3ffcc;
  display: inline-block;
}

a.nav-colour:link, a.nav-colour:visited, a.nav-colour:active {
	text-decoration: none;
	color: #b3ffcc;
}

a.nav-colour:hover {
  color: #b3d9ff;
  background-color: #ffff99;
}

/* STANDARD STYLES */

.centre {
	text-align: center;
}

/* DIRECTORY SHAPES */

.square {
	position: relative;
	width: 220px;
	padding-bottom: 40%;
	margin: 5px;
	overflow-x: hidden;
	display:inline-block;
}

.square-text {
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  position: absolute;
  top: 45px;
  left: 35px;
  padding: 3px 6px 3px 3px;
}

.diamond-text {
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
	width: 200px;
	height: 200px;
	display: table-cell;
	vertical-align: middle;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.diamond-box {
	height: 180px;
	width: 180px;
	margin: 40px;
	display: inline-block;
	overflow: hidden;
	background-color: #b3ffe0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.circle-box {
  position: relative;
  display: inline-block;
	width: 190px;
	height: 190px;
	margin-bottom: 20px;
	margin-right: 20px;
	background: #ffff99;
	-moz-border-radius: 85px;
	-webkit-border-radius: 85px;
	border-radius: 100px;
}

.circle-text {
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  position: absolute;
  top: 65px;
  left: 35px;
  padding: 3px 6px 3px 3px;
}

.rect {
	width: 140px;
	height: 200px;
	display: inline-block;
	position: relative;
	margin: 15px;
}

.rect-text {
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  position: absolute;
  top: 15px;
	left: 15px;
	height: 170px;
	padding: 3px 6px 30px 3px;
	
}

/* MISC */

.misc-sotry {
	padding-left: 20px;
	padding-right: 20px;
}

/* DEAR */

.dear {
	font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	font-size: 18px;
	margin-top: 30px;
	padding-left: 10%;
	padding-right: 10%;
	line-height: 2em;
}

/* FEELS LIKE HOME */

.home {
	font-family: Arvo-Regular;
	line-height: 1.4;
	padding-top: 5px;
	font-size: 15.5px;
}

.home a:link, .home a:visited, .home a:active {
	text-decoration: none;
	color: rgb(0,0,0);
}

/* DESKTOP STYLES */

@media all and (min-width: 45em) {
  .index-triangle {
		width: 0px;
		height: 0px;
		border-style: inset;
		border-color: transparent transparent #b3d9ff transparent;
		border-width: 0 260px 450px 260px;
		margin-left: 90px;
		margin-top: 100px;
	}
	
  .triangle-text1 {
  	top: 140px;
  	left: -71.5px;
  	font-size: 70px;
  }

  .triangle-text2 {
  	top: 155px;
  	left: -71.5px;
  	font-size: 70px;
  }

  .triangle-text3 {
  	top: 170px;
  	left: -95px;
  	font-size: 70px;
	}

	.index-nav {
		font-family: 'Dosis', sans-serif;
		letter-spacing: 2px;
		font-size: 40px;
		color: #b3ffcc;
		padding-top: 20px;
	}
	
	.square {
		position: relative;
		width: 300px;
		height: 200px;
		padding-bottom: 0;
	}

	.diamond-box {
		height: 200px;
		width: 200px;
		margin-left: 41px;
		margin-right: 40px;
		margin-top: 43px;
		background-color: #b3ffe0;
	}

	.rect {
		float: left;
		position: relative;
		width: 140px;
		height: 200px;
	}
	
	.centre {
		width: 700px;
		position: absolute;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.centre-misc {
		width: 600px;
	}
}