@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap');

/**
Colors:
Dark Orange: #FF9F55
Blue: #a3b9c9;
Light Orange: rgb(236, 206, 150);
Cream: #FCFCF5
**/

html {
	scroll-behavior: smooth;
}

body {
	background-color: #FCFCF5;
	background-image: url(../images/background_img.png);
	background-position: center;
}

.fade-scroll {
	opacity: 1;
}

#bootstrap-overrides a {
	text-decoration: none;
	color: black;
	line-height: 118%;
}

p {
	font-size: 20px;
	font-family: 'Spectral', serif;
	display: flex;
}

h1 {
	font-size: 80px;
	color: #FCFCF5;
	font-family: 'Alata', sans-serif;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 30px;
}

h2 {
	font-family: 'Josefin Sans', sans-serif;
	color: rgb(236, 206, 150);
	text-align: center;
	margin-left: 50px;
	margin-right: 50px;
	font-size:35px;
}

h3 {
	font-size: 50px;
	color: #a3b9c9;
	font-family: 'Alata', sans-serif;
	text-align: center;
	margin-bottom: 50px;
}


h4 {
	font-size: 50px;
	color: #a3b9c9;
	font-family: 'Alata', sans-serif;
	margin-bottom: 30px;
}

h5 {
	font-family: 'Josefin Sans', sans-serif;
	color: rgb(233, 201, 143);
	text-align: center;
	font-size:30px;
	margin: 20px 0px;
}

h6 {
	font-size: 18px;
	font-family: 'Spectral', serif;
	margin: 20px 5%;
}


/* Navigation Bar */
.navbar {
	border:none;
	background-color: rgb(236, 206, 150);
	box-shadow: 5px 10px 18px #888888;
	padding: 0px 0px;
}

#bootstrap-overrides .nav-bar-options {
	font-family: 'Reem Kufi', sans-serif;
	font-size: 23px;
	margin: 10px 25px;
}

#bootstrap-overrides .contact {
	padding-right: 20px;
}

#bootstrap-overrides .logo {
	font-size: 60px;
	margin-left: 3%;
	text-shadow: 2px 2px #a3b9c9;
	font-family: 'Yeseva One', cursive;
	/* margin-top: 10px; */
}

.logo:hover {
	cursor: pointer;
}

#bootstrap-overrides .nav-bar-options:hover {
	color: #a3b9c9;
	cursor: pointer;
	background-color: transparent;
}

.navbar-toggler {
	margin-right: 3%;
	background-color: #a3b9c9b9;
}


/* Home Section */
#home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 98vh;
	text-align: center;
	background: linear-gradient(-45deg, #85afce, #a3b9c9, #a29fda);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	color: #FCFCF5;
	box-shadow: 5px 10px 18px #888888;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* About Me Section */
#about {
	padding: 10% 0%;
}

.about-content {
	display: flex;
	flex-direction: row;
  	justify-content: center;
  	margin: 0% 10% 3% 10%;
	align-items: center;
	flex-wrap: wrap;
}

#about-text {
	width: 615px;
}

.prof-pic {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 7px solid rgb(236, 206, 150);
	margin-right: 60px;
	margin-top: 80px;
	margin-bottom: 20px;
}

#bootstrap-overrides .resume-button {
	color: #a3b9c9;
	border: 3px solid #a3b9c9;
	text-decoration: none;
	padding: 10px 20px;
	margin-top: 10px;
	border-radius: 50px;
	font-family: 'Alata', sans-serif;
	font-size: 18px;
	position: absolute;
	text-align: center;
}

#bootstrap-overrides .resume-button:hover {
	background-color: #a3b9c9;
	border-color: #a3b9c9;
	color: #FCFCF5;
	text-align: center;
}

/* Projects Section */
#projects {
	padding: 10vh 0px;
}

#project-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.project-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0px 3.5% 30px 3.5%;
	text-align: center;
	width: 500px;
	background-color: #85b0ce25;
	box-shadow: 5px 10px 18px #888888b4;
}

.project-pic {
	width: 450px;
	height: 350px;
	object-fit: cover;
	box-shadow: 5px 10px 18px #888888a6;
}

.project-pic:hover {
	transition: transform .3s;
	transform: scale(1.02);
}

/* Contact Me Section */
#contact {
	padding: 0px 0px 50px;
}

#contact-logos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.sizing {
	width: 80px;
 	height: 80px;
 	margin: 0px 40px 40px 40px;
}

#email:hover {
	border-radius: 9px;
}

#linkedin:hover {
	border-radius: 6px;
}

#github:hover {
	border-radius: 50%;
}

#email:hover, #linkedin:hover, #github:hover {
	background-color: rgb(236, 206, 150);
	transition: transform .3s;
  	transform: scale(1.05);
}

/* Footer */
#footer-section {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: rgb(236, 206, 150);
	text-align: center;
	height: 80px;
	padding: 15px 0px 0px 0px;
  }

#footer-section p{
	color: black;
	font-size: 17px;
	line-height:20px;
	padding-left:2%;
}