/*------------------------------------------------------------------------------------------------*/
/*----------------------------------------DEFAULT STYLING-----------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

*{
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;
	color: #000000;
}

/*------------------------------------------------------------------------------------------------*/
/*-------------------------------------DESKTOP VIEW STYLING---------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

p{
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
}

article ul li{
	font-family: 'Barlow', sans-serif;
}

a{
	text-decoration: none;
}

aside li{
	font-size: 14px;
}

article{
	width: 75%;
	background-color: #FFF;
	left: 0;
}

img, video, audio{
	max-width: 100%;
}

h1{
	text-align: center;
	padding-bottom: 2vw;
	font-family: 'Ubuntu', sans-serif;
	color: #000;
}

h2{
	text-decoration: underline;
	text-align: center;
}

h3{
	padding: 6vw 0vw 1vw 0vw;
	font-family: 'Raleway', sans-serif;
	color: #000;
}

h2, h4, h5, h6{
	padding: 1vw 0vw;
	font-family: 'Barlow', sans-serif;
	color: #000;
}

.about, .assignment, .project, .assignment_home, .project_home{
	padding: 3vw 5vw;
	margin-top: 6vw;
}

/*------------------HEADER-----------------*/

header{
	background-color: #FFF;
	display: block;
	height: 6vw;
	position: fixed;
	width: 100%;
	top: 0;
}

.logo{
	max-width: 5vw;
	padding: 0.5vw 0.5vw 0.5vw 23vw;
	float: left;
}

/*------------------MENU-------------------*/

nav ul li{
	display: inline-block;
	padding: 2.16vw 3vw;
}

nav ul li a{
	display: block;
}

nav ul{
	position: relative;
}

nav ul li:hover{
	background-color: #5BD2B4;
}

.menu{
	background-color: #0A605A;
	text-align: center;
	color: #FFF;
	cursor: pointer;
	display: none;
}


/*--------------HOME PAGE---------------*/

.home{
	margin-top: 6vw;
	padding: 10px;
	letter-spacing: 7px;
	text-align: center;
}

.prefix{
	font-size: 25px;
	font-family: 'Actor', sans-serif;
	color: #FFF;
}

.name{
	font-size: 50px;
	font-family: 'Actor', sans-serif;
	color: #FFF;
}

.name strong{
	font-size: 50px;
	font-family: 'Actor', sans-serif;
	color: #FFF;
}

/*---------------TABLE OF CONTENTS----------------*/


.sub_sidebar{
	width: 25%;
	background-color: #FFF;
	position: fixed;
	left: 75%;
	top: 6vw;
	display: block;
	bottom: 6vw;
	overflow-y: scroll;
	border-left: 0.2vw solid #000;
	padding: 2vw 5vw 2vw 2vw;
}

.sub_sidebar ul>li{
	padding-right: 2vw;
}

/*---------------SOCIAL MEDIA----------------*/

.social_media li{
	padding: 0.5vw 0vw;
	text-decoration: underline;
	list-style-type: none;
	font-size: 18px;
}

.social_media li a:hover{
	color: #0ECABE;
}

/*-------------------FOOTER------------------*/

footer{
	background-color: #000;
	bottom: 0;
	position: relative;
	height: 8vw;
	color: #FFF;
}

.copyright{
	color: #FFF;
	font-size: 12px;
	padding-top: 3vw;
	text-align: center;
}

/*------------------------------------------------------------------------------------------------*/
/*--------------------------------------TABLET VIEW STYLING---------------------------------------*/
/*------------------------------------------------------------------------------------------------*/


@media screen and (max-width:700px){
	.sub_sidebar{
		display: none;
	}

	article{
		width: 100%;
		margin-left: 0;
		top: 7.5vw;
	}

	img, video, audio{
		max-width: 100%;
	}

	header{
		height: 7.5vw;
	}

	.about, .assignment, .project, .assignment_home, .project_home{
		padding: 3vw 5vw;
	}

	footer{
		height: 18vw;
	}

	.copyright{
		padding-top: 5vw;
	}
}

/*------------------------------------------------------------------------------------------------*/
/*--------------------------------------MOBILE VIEW STYLING---------------------------------------*/
/*------------------------------------------------------------------------------------------------*/

@media screen and (max-width:550px){
	header{
		height: 8vw;
		clear: both;
	}

	article{
		margin-left: 0;
		width: 100%;
	}

	.logo{
		max-width: 12vw;
		padding-left: 1vw;
		padding-top: 1vw;
		display: none;
	}

	.about, .assignment, .project, .assignment_home, .project_home{
		padding: 10vw 7vw;
	}

	footer{
		height: 24vw;
	}

	.menu{
		display: block;
		height: 8vw;
		padding: 2vw;
	}

	nav ul{
		display: none;
		position: static;
		background-color: #53C5A9; 
	}

	nav ul li{
		display: block;
	}

	img, video, audio{
		max-width: 100%;
	}

	.copyright{
		padding-top: 6vw;
	}

	/*-------------HOME PAGE-------------*/

	.home{
		margin-top: 8vw;
		padding: 6vw 1vw 1vw 1vw;
		text-align: center;
		letter-spacing: 2px;
	}

	.prefix{
		font-size: 15px;
	}

	.name{
		font-size: 30px;
	}

	.name strong{
		font-size: 30px;
	}

}

/*------------------------------------------------------------------------------------------------*/
/*------------------------------------MINIMUM SCREEN STYLING--------------------------------------*/
/*------------------------------------------------------------------------------------------------*/


@media screen and (max-width:320px){
	
	article, header, footer{
		width: 320px;
	}
}

/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/