@charset "UTF-8";
/* CSS Document */


/**********/
/*GLOBAL RULES*/
/**********/

* {
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: inherit;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 25px;
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(85,85,0,0.89) 54%, rgba(85,85,0,0.8) 100%);
	color: #FFFFFF;
	margin: 0;
}

.center {
	text-align: center;
	align-content: center;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

h2 {
	font-size: 2rem;
	padding: 10%;
	font-family: 'Yellowtail', cursive;
}

footer {
	text-align: center;
	font-size: 0.75rem;
}

/**********/
/*NAVIGATION RULES*/
/**********/

.largenav {
    width: 100%;
    height: 9%;
    background-color: #000000;
    position: fixed;
	top: 0;
	z-index: 5;
}


.mobnav {
	display: none;
	top: 0;
    width: 100%;
    height: 10%;
    background-color: #000000;
    position: fixed;
	z-index: 2;
}

.container {
	display: flex;
	justify-content: space-between;
	font-size: 1.5vw;
}

.menu a {
	color: #FFFFFF;
	padding: 15px;
	font-size: 1.5vw;
	text-align: center;
	text-decoration: none;
}

.menu a:hover {
	background-color: #FFFFFF;
	color: #000000;
	transition: background 1s;
/*	padding:;*/
	border-radius: 5%;
}

/**********/
/*MOBILE MENU NAVIGATION*/
/**********/

#menuToggle {
	display: block;
  	position: relative;
	top: 20px;
	left: 10%;
	z-index: 1;
  	-webkit-user-select: none;
 	user-select: none;
}

#menuToggle input {
  	display: block;
  	width: 10%;
  	height: 32px;
  	position: absolute;
  	top: -7px;
  	left: -5px;
  	cursor: pointer;
  	opacity: 0; 
  	z-index: 2; 
  	-webkit-touch-callout: none;
}

/*Below is the specification for the animation of the burger button*/

#menuToggle span {
  	display: block;
  	width: 33px;
  	height: 4px;
  	margin-bottom: 5px;
  	position: relative;
  	background: #cdcdcd;
  	border-radius: 3px;
  	z-index: 1;
  	transform-origin: 4px 0px;
  	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  	transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  	transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
  	opacity: 1;
  	transform: rotate(45deg) translate(-2px, -1px);
  	background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3) {
  	opacity: 0;
  	transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2) {
  	transform: rotate(-45deg) translate(0, -1px);
}

/*Below is the specification for the mobile menu design*/

#menu {
  	position: absolute;
  	width: 45%;
  	margin: -25% 0 0 -20%;
  	padding: 50px;
  	padding-top: 125px;
  	background: #000000;
  	list-style-type: none;
  	-webkit-font-smoothing: antialiased;
  	transform-origin: 0% 0%;
  	transform: translate(-100%, 0);
  	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu a {
	padding: 10px 0;
	font-size: 20px;
	color: #FFFFFF;
}

#menuToggle input:checked ~ ul{
  	transform: none;
}

/**********/
/*ITEM SPECIFIC RULES*/
/**********/

#title {
	margin-right: auto;
	margin-top: 1%;
	margin-bottom: 0;
	margin-left: 2%;
	font-size: 1.75vw;
}

#title:hover {
	transform: rotate(360deg);
	transition: transform 0.5s;
}

#aboutme img {
	border-radius: 50%;
	padding: 2%;
	width: 30%;
	height: 30%;
}

#aboutme p {
	padding-right: 20%;
	padding-left: 20%;
	max-width: 100%;
	font-size: 1.2rem;
}

.logo {
	width: 100%;
	height: auto;
	margin-top: 5%;
}

.ContactGrid img {
	width: 50%;
	height: 50%;
}

.ContactGrid .img_container {
	width: 100%;
	height: 50%;
}

.ProjectGrid img {
	width: 50%;
	height: 50%;
}

.SkillsGrid i {
	font-size: 8vw;
	color: #000000;
}

/**********/
/*RULES FOR TIMELINE STYLING*/
/**********/

.timeline {
  	position: relative;
  	max-width: 750px;
  	margin: 0 auto;
}

.timeline::after {
  	content: '';
  	position: absolute;
  	width: 1%;
  	background-color: white;
  	top: -2%;
  	bottom: -2%;
  	left: 50%;
  	margin-left: -3px;
}

.timecontain {
  	padding: 10px 40px;
  	position: relative;
  	background-color: inherit;
  	width: 50%;
}

.timecontain::after {
  	content: '';
  	position: absolute;
  	width: 25px;
  	height: 25px;
  	right: -3.5%;
  	background-color: #FF9F55;
  	border: 4px solid #5a9642;
  	top: 15px;
  	border-radius: 50%;
  	z-index: 1;
}

.left {
  	left: 0;
}

.right {
  	left: 50%;
}

.left::before {
  	content: " ";
  	height: 0;
  	position: absolute;
  	top: 22px;
  	width: 0;
  	z-index: 1;
  	right: 30px;
  	border: medium solid white;
  	border-width: 10px 0 10px 10px;
  	border-color: transparent transparent transparent #FF9F55;
}

.right::before {
  	content: " ";
  	height: 0;
  	position: absolute;
  	top: 22px;
  	width: 0;
  	z-index: 1;
  	left: 30px;
  	border: medium solid white;
  	border-width: 10px 10px 10px 0;
  	border-color: transparent #FF9F55 transparent transparent;
}

.right::after {
  	left: -3%;
}

.contentleft {
	padding: 20px 30px;
	position: relative;
	border-radius: 6px;
	color: #FFFFFF;
	font-size: 1rem;
	border: 3px dotted white;
}

.contentright {
	padding: 20px 30px;
  	position: relative;
  	border-radius: 6px;
	border: 3px dotted white;
	color: #FFFFFF;
	font-size: 1rem;
}


/**********/
/*GRID RULES FOR PROJECTS, SKILLS AND CONTACTS*/
/**********/

.img_container {
	position: relative;
	width: auto;
	height: auto;
}

.ProjectGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
/*
	display: -ms-grid;
	-ms-grid-columns: repeat(1fr 1vw 1fr 1vw);
*/
	margin-right: 30%;
	margin-left: 30%;
}

.img_overlay {
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: auto;
	width: 100%;
	opacity: 0;
	transition: .25s ease;
	color: #FFFFFF;
	text-align: center;
}

.img_container:hover .img_overlay {
	opacity: 1;
}

.SkillsGrid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
}

.ContactGrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);	
}

/**********/
/*MOBILE AND SMALL SCREEN STYLING*/
/**********/


@media only screen and (max-width: 450px) {
	h2 {
		padding: 30%;
	}
	.largenav {
		display: none;
	}
	.mobnav {
		display: block;
	}
	#aboutme p {
		max-width: 100%;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: 20%;
	}
	.mobnav h1 {
		font-size: 1.25rem;
		margin-top: -2%;
		margin-left: 40%;
		text-align: center;
	}
	.logo img {
		width: 100%;
		margin-bottom: 40%;
		height: auto;
		padding: 1%;
	}
	#profile_img {
		height: 60%;
		width: 60%;
	}
	.img_overlay {
		opacity: 1;
	}
	.ProjectGrid {
		grid-template-columns: repeat(1, 1fr);
	}
	.SkillsGrid, .ContactGrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.timeline::after {
    left: 31px;
  }
  	.timecontain {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  	.timecontain::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  	.left::after, .right::after {
    left: 15px;
  }
  	.right {
    left: 0%;
  }
}