body {
	background-color: #ffffff;
	background-size: cover;
	margin: 0vh 0vw 0vh 0vw;
}

/* for desktops */
@media screen and (min-width: 1024px){

	/*Main Blocks*/
	#header {
		height: 12vmin;
		margin: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		box-sizing: border-box;
		background-color: #225fc1;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
	}
	#navigation {
		width: 100%;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		background-color: #999999;
		float: left;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
	}
	#container1 {
		height: calc(97.5vh - 12vmin - 5vmin);
		width: 100%;
	}
	#container2 {
		height: calc(97.5vh - 12vmin - 5vmin);
		width: 25vmin;
		float: left;
		margin: 0vmin 0vmin 0vmin 2.5vmin;
	}
	#content {
		height: 100%;
		margin: 0vmin 2.5vmin 2.5vmin 35vmin;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		background-color: #dddddd;
		box-sizing: border-box;
		font-size: 3vmin;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
		position: relative;
	}
	#logo {
		float: left;
		display: inline;
		width: 120%;
		height: auto;
		position: relative;
		top: 10vmin;
		left: 0vmin;
	}
	/*Text Stuff*/
	.titleText {
		display: inline;
		font-family: Arial;
		font-size: 6vh;
		color: white;
		float: left;
		text-decoration: none;
	}
	.navText {
		display: block;
		font-family: Arial;
		font-size: 5vh;
		color: white;
		text-decoration: none;
	}
	
	.block {
		position: relative;
		width: 35vh;
		height: 35vh;
		border-radius: 2px;
		margin: 0 2.5vmin 2.5vmin 0;
		background-color: #dddddd;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		box-sizing: initial;
		border-radius: 10px;
		float: left;
		display: inline-block;
	}
	.blockPic {
		position: relative;
		max-width: 80%;
		height: auto;
		object-fit: contain;
		display: block;
		margin: auto;
	}
	.blockText{
		position: absolute;
		display: block;
		width: 100%;
		text-align: center;
		font-family: Arial;
		color: #000000;
		bottom: 5%;
	}
}

/* for tablets */
@media screen and (min-width: 768px) and (max-width: 1023px){

	/*Main Blocks*/
	#header {
		height: 12vmin;
		margin: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		box-sizing: border-box;
		background-color: #225fc1;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
	}
	#navigation {
		width: 100%;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		background-color: #999999;
		float: left;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
	}
	#container1 {
		height: calc(97.5vh - 12vmin - 5vmin);
		width: 100%;
	}
	#container2 {
		height: calc(97.5vh - 12vmin - 5vmin);
		width: 25vmin;
		float: left;
		margin: 0vmin 0vmin 0vmin 2.5vmin;
	}
	#content {
		height: 100%;
		margin: 0vmin 2.5vmin 2.5vmin 35vmin;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		background-color: #dddddd;
		box-sizing: border-box;
		font-size: 3vmin;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
		position: relative;
	}
	#logo {
		float: left;
		display: inline;
		width: 120%;
		height: auto;
		position: relative;
		top: 10vmin;
		left: 0vmin;
	}
	/*Text Stuff*/
	.titleText {
		display: block;
		font-family: Arial;
		font-size: 6vmin;
		color: white;
		text-align: center;
		text-decoration: none;
	}
	.navText {
		display: block;
		font-family: Arial;
		font-size: 5vmin;
		color: white;
		text-decoration: none;
	}
	.block {
		position: relative;
		width: 35vh;
		height: 35vh;
		border-radius: 2px;
		margin: 0 2.5vmin 2.5vmin 0;
		background-color: #dddddd;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		box-sizing: initial;
		border-radius: 10px;
		float: left;
		display: inline-block;
	}
	
	.blockPic {
		position: relative;
		max-width: 80%;
		height: auto;
		object-fit: contain;
		display: block;
		margin: auto;
	}
	.blockText{
		position: absolute;
		display: block;
		width: 100%;
		text-align: center;
		font-family: Arial;
		color: #000000;
		bottom: 5%;
	}
}

/* for phones */
@media screen and (max-width: 767px){

	/*Main Blocks*/
	#header {
		height: 12vmin;
		margin: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		box-sizing: border-box;
		background-color: #225fc1;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
	}
	#navigation {
		width: 100%;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		background-color: #999999;
		float: left;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
	}
	#container1 {
		height: calc(97.5vh - 12vmin - 5vmin);
		width: 100%;
	}
	#container2 {
		height: calc(97.5vh - 12vmin - 5vmin);
		width: 25vmin;
		float: left;
		margin: 0vmin 0vmin 0vmin 2.5vmin;
	}
	#content {
		height: 100%;
		margin: 0vmin 2.5vmin 2.5vmin 35vmin;
		padding: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
		background-color: #dddddd;
		box-sizing: border-box;
		font-size: 3vmin;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		border-radius: 10px;
		position: relative;
	}
	#logo {
		float: left;
		display: inline;
		width: 120%;
		height: auto;
		position: relative;
		top: 10vmin;
		left: 0vmin;
	}
	/*Text Stuff*/
	.titleText {
		display: block;
		font-family: Arial;
		font-size: 6vmin;
		color: white;
		text-align: center;
		text-decoration: none;
	}
	.navText {
		display: block;
		font-family: Arial;
		font-size: 5vmin;
		color: white;
		text-decoration: none;
	}
	.block {
		position: relative;
		width: 56.5vmin;
		border-radius: 2px;
		margin: 0 2.5vmin 2.5vmin 0;
		background-color: #dddddd;
		box-shadow: 0.5vmin 0.5vmin 1vmin gray;
		box-sizing: initial;
		border-radius: 10px;
		float: left;
		display: block;
	}	
	
	.blockPic {
		position: relative;
		max-width: 80%;
		margin: 0 auto 20% auto;
		height: auto;
		display: block;
	}
	.blockText{
		position: absolute;
		display: block;
		width: 100%;
		text-align: center;
		font-family: Arial;
		font-size: calc(0.06*56.5vmin);
		color: #000000;
		bottom: 5%;
	}
}

 /*Content Stuff*/
.contentText{
	position: absolute;
	top: 7.5vmin;
	bottom: 2.5vmin;
	/*height: calc(100% - 15vmin);*/
	font-family: Arial;
	font-size: 3vmin;
	color: #111111;
	word-spacing: 0.5vmin;
	white-space: normal;
	letter-spacing: 0.02vmin;
	padding: 0vmin 5vmin 0vmin 0vmin;
	margin: 0vmin 2.5vmin 0vmin 0vmin;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	z-index: 1;
}

.contentLink{
	font-family: Arial;
	font-size: 3vmin;
	color: #000000;
	word-spacing: 0.5vmin;
	white-space: normal;
}
.grad1 {
	position: absolute;
	background: linear-gradient(to bottom, rgba(221,221,221,1), rgba(221,221,221,0));
	height: 5vmin;
	left: 0;
	right: 5vmin;
	z-index: 2;
}

.grad2 {
	position: absolute;
	background: linear-gradient(to bottom, rgba(221,221,221,0), rgba(221,221,221,1));
	height: 5vmin;
	left: 0;
	right: 5vmin;
	bottom: 2.5vmin;
	z-index: 3;
}
.grad3 {
	position: absolute;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	height: 5vmin;
	left: 35vmin;
	right: 5vmin;
	bottom: 2.5vmin;
	z-index: 3;
}
.projectPic {
	margin: 5vmin;
}

.back {
	position: relative;
	width: 100%;
	font-size: 3vmin;
	height: 5vmin;
}

#contentBlocks {
	height: 100%;
	margin: 0vmin 2.5vmin 2.5vmin 35vmin;
	box-sizing: border-box;
	font-size: 3vh;
	overflow-y: auto;
	overflow-x: hidden;
}

/*Link Stuff*/
.titleText:hover {
	color: #cccccc;
}
.navText:hover {
	color: #cccccc;
}
.contentLink:hover {
	color: #bbbbbb;
}
.block:hover {
	background-color: #cccccc;
}
.titleText:active {
	color: #aaaaaa;
}
.navText:active {
	color: #aaaaaa;
}
.contentLink:active {
	color: #aaaaaa;
}
.block:active {
	background-color: #bbbbbb;
}


/*Scrollbar Stuff*/

/* Scrollbar */
::-webkit-scrollbar {
	width: 15px;
	
}
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 7.5px grey; 
	border-radius: 7.5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #225fc1;
	border-radius: 7.5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #bbbbbb; 
}
/* Handle on click */
::-webkit-scrollbar-thumb:active {
	background: #aaaaaa; 
}