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

		
html{
    scroll-behavior: smooth;
}

body{
			margin: 0;
			padding: 0;
			transition: .5s ease-in-out;
			font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
            
            
			
		}

p, li{
	font-size: 20px;
	line-height: 30px;
}
h1{
	font-weight: 400;
}
	
		
		#logoAnimatinSectionContainer{
			display: flex;
			justify-content: center;
			align-items: center;
            flex-direction: column;
			height: 100vh;
			background-color:#f1f1f1;
			background-image: url("webDev.png");
			overflow: hidden;
			background-attachment: fixed;
			background-blend-mode: multiply;
			background-size:cover;
			background-repeat: no-repeat;
			background-position: center;
            position: relative;
		}
	
		#animateLogo{
			width:70%;
			overflow: visible;
			max-width:1000px;
		}
		#middle-3, #Peak-2, #right-5, #name-6, #Left-1, #bottom-4{
			animation-name: scaled;
			animation-duration: 5s;
			animation-iteration-count: 1;
			transform-origin: center;
			transform: scale(1);
			transition: .01s;
		}
.animName, .st0,  .st1, .st2{
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
		#Left-1{
			animation-duration: .8s;
		}
		#Peak-2{
			animation-duration: 1s;
		}
		#middle-3{
			animation-duration: 1.3s;
		}
		#bottom-4{
			animation-duration: 1.8s;
		}
		#right-5{
			animation-duration: 2.1s;
		}
		#name-6{
			animation-duration: 2.6s;
			transform: translateX()
		}
		
		.st0{/*fill:#971C1F;*/ fill:#f1f1f1; }
		.st1{font-family:'ArialMT';}
		.st2{font-size:40.2163px;}
		.st3{/*fill:#981C1F;*/fill:#cc0000;}
		
		
		@keyframes scaled{
			from{
				transform: scale(6);
			}
			to{
				transform: scale(1);
			}
		}
.fa-arrow-alt-circle-down{
    position: absolute;
    bottom: 30px;
    font-size: 40px;
    color:#fff;
    text-shadow: 0px 4px 8px #000;
    animation: arrow 5s ease-in-out infinite;
}

@keyframes arrow{
    0%{
        transform: scale(1.2);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.2);
    }
}

#jobs-container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height:70vh;
	position: relative;
}

#background-gray-container{
	height:100%;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:0;
}

#background-gray{
	width:70%;
	height:40vh;
	background-color:#f1f1f1;
	display: none;
}
.background-gray-animation{
	animation: jobs-scaled 1s 1;
}

@keyframes jobs-scaled{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}

#jobs-content-container{
	position: absolute;
	top: 0;
	display: grid;
	grid-template-columns: 50% 50%;
	height:100%;
	width:100%;
}
#job-ul{
	grid-column: 1/2;
	width:100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-left: 25%;
	
}
.jobs-li{
	font-size:50px;
	margin: 40px 0;
}
#job1{
	animation: slide1 1s 1;
	display: none;
}
#job2{
	animation: slide1 2s 1;
	display: none;
}
#job3{
	animation: slide1 3s 1;
	display: none;
}

@keyframes slide1{
	0%{
		transform: translateX(-100px);
		opacity:0;
	}
	25%{
		transform: translateX(-100px);
		opacity:0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide2{
	0%{
		transform: translateX(-100px);
		opacity:0;
	}
	50%{
		transform: translateX(-100px);
		opacity:0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide3{
	0%{
		transform: translateX(-100px);
		opacity:0;
	}
	75%{
		transform: translateX(-100px);
		opacity:0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
#jobs-image{
	width:60%;
}
.job-image-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

.jobsImage{
	animation: imgSlide1 3s 1;
	display: none;
}

@keyframes imgSlide1{
	0%{
		transform: translateX(100px);
		opacity:0;
	}
	25%{
		transform: translateX(100px);
		opacity:0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}

/*BIO CSS*/
#bioContainer{
	width:80%;
	text-align: center;
	margin: 0 auto;
	
}

#knowledgeContainer{
	width:80%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 20px;
	margin-top: 50px;
	
}
#proficientContainer{
	grid-column: 1/2;
	background-color: rgb(241,241,241);
	padding: 20px;
	
}
#aditContainer{
	grid-column: 2/3;
	background-color: rgb(241,241,241);
	padding: 20px;
}

#proficientContainer, #aditContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 0;
}

.knowledgeLi, #proficientContainer h1, #aditContainer h1{
	text-align: center;
	list-style-type: none;
	margin: 0 auto;
	width:100%;
	transition: 1s ease-in;
    
}

.knowledgeLi{
	opacity: 0;
}

.knowledgeUl{
    width: 100%;
    padding: 20px;
    margin: 0;
}

/*RESUME CONTAINER*/
#resumeContainer{
	width:100%;
	background-color:lightgray;
	height:600px;
	margin-top: 50px;
    background-image: url("webDev.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.buttonContainer{
	margin: 50px;
	border: 3px solid #CC1500;
	display: grid;
	grid-template-columns: 100%;
	overflow: hidden;
	
	
	
}
.buttonContainer h1{
	color:#fff;
	grid-row: 1;
	grid-column: 1;
	z-index: 1000;
	padding: 5px 30px;
}
.buttonSlide{
	height: 100%;
	width:100%;
	background-color: #cc1500;
	grid-row: 1;
	grid-column: 1;
	transform: translateX(-100%);
	transition: .2s ease-in-out;
}

.buttonContainer:hover .buttonSlide{
	transform: translateX(0);
}

a{text-decoration: none;}



@media only screen and (max-width: 800px){
	
	body{
		overflow-x: hidden;
	}
	
	#logoAnimatinSectionContainer{
		height: 40vh;
	}
    
    #downArrow{
        display: none;
    }
    
	#jobs-content-container{
		grid-template-rows: 2;
		grid-template-columns: 100%;
		width:100%;
		display: grid;
	}
	
	#job-ul{
		grid-column: 1/2;
		grid-row: 2/3;
		display: block;
		margin: 0;
		width:100%;
		padding: 0;
	}
	.jobs-li{
		text-align: center;
		font-size: 30px;
		list-style-type: none;
		margin: 30px 0;
	}
	#background-gray{
		width:90%;
	}
	
	#knowledgeContainer{
		display: block;
	}
	
	#proficientContainer, #aditContainer{
		margin: 20px 0;
	}
    #resumeContainer{
        flex-direction: column;
    }
    .buttonContainer{
        margin: 20px;
    }
    .buttonContainer h1{
        font-size: 30px;
    }
}