@charset "utf-8";
*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-family: 'Josefin Sans', sans-serif;
	list-style: none;
	scroll-behavior: smooth;
	scroll-padding-top: 3.5rem;
	
}

/*---- Colors and font sizes for the webpages --------*/
:root{
	--bg-color: #101010;
	--second-bg-color: #191919;
	--text-color: #fff;
	--second-color: #c6c9d8bf;
	--main-color: #f6005d;
	--big-font: 4.3rem;
	--h2-font: 4.2rem;
	--h3-font: 2.5rem;
	--p-font: 1.1rem;
}
/*---- end --------*/
/*---- Default background color for the text and webpages --------*/
body {
	background: var(--bg-color);
	color: var(--text-color);
}

a { text-decoration: none}
/*---- end --------*/
/*---- Formating for nav bar on the top --------*/
header {
	position:fixed;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	padding: 25px 15%;
	transition-duration: .3s;
}
/*---- end --------*/

/*---- Formatting for when a stick nav bar when you scroll down --------*/

header.sticky {
	padding: 12px 15%;
	background: #E8585A;
	opacity:85%;
}

.sticky .navbar a::after{
	background: #EFE1E2;
}
.sticky .h-btn {
	background: var(--text-color);
	color: #000;	
}

.sticky .h-btn:hover{
	background:#F4EBEB;
	color:red;
}

/*---- Formating for the word Portfolio --------*/
.logo {
	color: var(--text-color);
	font-size: 30px;
	font-weight:bold;
	letter-spacing: 1px;
	text-decoration: none;
}
/*---- end --------*/

/*---- Formatting for the nav bar --------*/

/*---- Display the Nav bar values as one line --------*/
.navbar{
	display: flex;
}
/*---- end --------*/


.navbar li{
	position: relative;
}

/*---- Adds formatting values to each individual item in the bav bar--------*/
.navbar a{
	color: var(--text-color);
	font-weight: bold;
	font-size: 1rem;
	padding: 10px 20px;
	text-decoration: none;
}
/*---- end --------*/

/*---- Adds the formatting for the red bar color as you hover over the nav bar text --------*/

.navbar a::after{
	content: '';
	position:absolute;
	width: 0%;
	height: 2px;
	background: var(--main-color);
	left:0;
	bottom: -4px;
	transition: ease .40s;
		
}
/*---- end --------*/

/*---- Shows the red bar as you hover over the nav bar text since the width is 0% above --------*/
.navbar a:hover::after{
	width:100%;
}
/*---- end --------*/

/*---- Formatting for the menu icon on smaller screens, defaulted to none--------*/

#menu-icon{
	font-size: 30px;
	color: var(--text-color);
	z-index:10001;
	cursor: pointer;
	display:none;
}
/*---- end --------*/

/*---- Formatting for the contact me button --------*/
.h-btn{
	text-decoration: none;
	padding: 0 20px;
	height: 40px;
	display: inline-block;
	line-height: 42px;
	background: var(--main-color);
	color: var(--text-color);
	border:none;
	border-radius: 40px;
	font-size: 16px;
	letter-spacing: normal;
	transition: all .30s;
}
/*---- end --------*/

/*---- Hover effect for the contact me button --------*/

.h-btn:hover{
	transform: translateX(-7px);
}

/*---- end --------*/

/*---- Spacing for the Hi, I'm Jeremy... --------*/
section{
	padding: 120px 15%;
}
/*---- end --------*/

/*---- Formatting for the banner picture --------*/

.Home{
	height: 100vh;
	width: 100%;
	background:url("../images/bannerforwebsite1.png");
	background-size:cover;
	background-position: center;
	position: relative;
	display: grid;
	grid-template-columns: repeat(1,1fr);
	align-items:center;
	
}
/*---- end --------*/

.Thanks{
	height: 100vh;
	width: 100%;
	background:url("../images/thankyoubanner.png");
	background-size:cover;
	background-position: center;
	position: relative;
	display: grid;
	grid-template-columns: repeat(1,1fr);
	align-items:center;
	
}

/*---- Formating for the text Hi,I'm Jeremy --------*/

.home-text h1{
	margin: 20px 0px 20px;
	font-size: var(--big-font);
}

span{
	color:#3F8DB3;
}
.home-text h3{
	font-size: 25px;
	margin-bottom: 20px;
}

.home-text h4{
	color:#EC161A;
	font-size: 20px;
	letter-spacing: 3px;
}
/*---- end --------*/

/*---- Formatting for the about page--------*/


.About{
	background: var(--second-bg-color);
	display: grid;
	grid-template-columns: repeat(2,2fr);
	align-items: center;
	grid-gap: 1.5rem;
}

/*---- Formatting for the image on the page --------*/
.about-img img{
	max-width: 100%;
	width:500px;
	height:auto;
	border-radius: 10px;
}

/*---- Formatting for the Header text on the page --------*/
.about-text h2{
	font-size: var(--h2-font);
	margin-bottom: 20px;
}

/*---- Formatting for the subheader text on the page --------*/
.about-text h5{
	font-size: 28px;
	margin-bottom: 25px;
	letter-spacing: 2px;
}

/*---- Formatting for the paragraph on the page --------*/
.about-text p{
	color: #96CFE0;
	letter-spacing: 1px;
	line-height: 28px;
	max-width: 590px;
	font-size: 1.1rem;
	margin-bottom: 45px;
}
/*---- End formatting for the About page elements --------*/

/*---- Formatting for the Books page -------*/

.Books{
	background: var(--second-bg-color);
	display: grid;
	grid-template-columns: repeat(2,2fr);
	align-items: center;
	grid-gap: 1.5rem;
}

/*---- Formatting for the Images on the page --------*/

.book-img img{
	max-width: 70%;
	width:300px;
	height:auto;
	border-radius: 10px;
}
/*---- Formatting for the Header text on the page --------*/

.books-text h3{
	font-size: var(--h3-font);
	margin-bottom: 30px;
}

/*---- Formatting for the subheader text on the page --------*/
.books-text h4{
	color:#5BE88E;
	font-size: 18px;
	margin-top:10px;
	margin-bottom: 25px;
	letter-spacing: 2px;
}
.books-text h5{
	font-size: 16px;
	margin-top:10px;
	margin-bottom: 25px;
	letter-spacing: 2px;
}




/*---- Formatting for the paragraph on the page --------*/
.books-text p{
	color: #96CFE0;
	letter-spacing: 1px;
	line-height: 28px;
	max-width: 590px;
	font-size: 1.1rem;
	margin-bottom: 45px;
}




/*---- Formatting for the Download CV button --------*/
.btn{
	display:inline-block;
	background:#E7B26E;
	color:#251D1D;
	border: 2px solid transparent;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 40px;
	transition:ease .35s;
	text-decoration: none;
}


.btn:hover{
	transform: translateY(-5px);
	border: 2px solid var(--main-color);
	background: transparent;
	color:#F1E8E8;
}

/*---- End formatting for the CV button --------*/

/*---- Formatting for the portfolio test page --------*/

.boxes{
	background: var(--bg-color);	
}
.portfolioheading{
	text-align: center;
}
.portfolioheading h2 {
	font-size: 30px;
	color: #E0292C;
	
}

.portfolioheading p{
	color:#B48856;
	letter-spacing: 2px;
	line-height: 20px;
	padding-top: 10px;
}

.content{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
	align-items: center;
	margin-top: 20px;
}
.row{
	background:#8F7778;
	padding: 55px 30px;
	border-radius: 10px;
	cursor: pointer;
	transition: all .35s;
	line-height: 1.7rem;
}
.row:nth-child(1){
	font-size:1.1rem;
	grid-row:span 2;
	display:grid;
	align-content:center;

}
/*---- End of portfolio test page --------*/

/*---- Formatting for the Gallery page on the page --------*/

/*---- Formatting for how to display the images --------*/
.container {
	width:100%;
	min-height:75vh;
	display:flex;
	align-items: center;
	justify-content:center;
	padding: 5px 8%;
	
}

/*---- Makes the pictures fit regardless of screen size --------*/

.gallery{
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	grid-gap: 30px;
}

/*---- How the images are displayed --------*/

.gallery img{
	width:100%;
/*Make the images grayscaled */
	filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-webkit-transition: all 1s ease;
	
}
/*---- The hover effects on the image from color to scale size --------*/

.gallery img:hover{
/*	opacity:40%;
	transform:scale(0.9); */
	
/*	Square to Circle     */
/*	border-radius:50%;
	transition: 1s ease;   */
	
/*  Greyscale to color           */	          
filter: grayscale(0%);
filter: gray;
-webkit-filter: grayscale(0%);
filter: none;
transition: 1s ease;
transform: scale(1.1);

/* Rotates              */
/*-webkit-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
transition: 1s ease;     */
	
	
}
/*---- Formatting for the text on the gallery page --------*/


.gallery-description {
	text-align:center;
	padding-top: 200px;
	padding-bottom: 20px;
}
.gallery-description p{
	font-size: 30px;
}

/*---- End formatting for the gallery page--------*/

/*---- Formatting for the Contact page --------*/

/*---- Two grid system --------*/

.contact {
	background: var(--bg-color);
	display:grid;
	grid-template-columns: repeat(2,2fr);
	align-items:center;
	grid-gap: 2rem;
}
/*---- Formatting for the image on the page --------*/

.contact-img img {
	max-width: 100%;
	width:700px;
	height:auto;
	border-radius: 30px;
}
/*---- Formatting for the header text on the page --------*/
.contact-form h2{
	font-size: var(--h2-font);
	margin-bottom: 15px;
}
/*---- Formatting for the paragraoh text on the page --------*/
.contact-form p{
	color: var(--second-color);
	letter-spacing: 1px;
	line-height: 29px;
	font-size: var (--p-font);
	margin-bottom: 4.1rem;
}
/*---- Formatting for the form on the page --------*/
.contact-form form{
	position:relative;
}

.contact-form form input,form textarea{
	width:100%;
	padding: 20px;
	border:none;
	outline:none;
	background: var(--second-bg-color);
	color: var(--text-color);
	font-size: 1rem;
	margin-bottom: 0.5rem;
	border-radius: 10px;	
}

.contact-form textarea {
	resize:none;
	height:200px;
}

/*---- Formatting for the submit button--------*/
.contact-form form .send{
	display:inline-block;
	background: orange;
	color: black;
	font-size: 18px;
	font-weight:800;
	border-radius:40px;
	width:175px;
	transition: ease .45s;
	text-transform: uppercase;
}

/*---- Formatting for the hover effects of the submit button --------*/
.contact-form form .send:hover {
	transform: translateY(-8px);
	cursor:pointer;
	opacity: 50%;
}

/*---- End formatting for the form --------*/

.footer {
	text-align:center;
	background: var(--second-bg-color);
	padding:50px;
}

.footer p {
	font-size: 17px;
	color: var(--second-color);
	letter-spacing: 1px;
}

/*---- Formatting for smaller screens --------*/

@media (max-width: 1270px) {
	
	header {
		padding: 18px 4%;
		transition: .2s;
	}
	header.sticky {
		padding: 10px 4%;
		transition: .2s;
	}
	section {
		padding: 80px 4%;
		transition: .2s;
	}
	:root {
	--big-font: 4.8rem;
	--h2-font: 3.8rem;
	--p-font: 1rem;
	transition: .2s;
	}
		
}	

/*---- Formatting for the even smaller screens --------*/

@media (max-width: 990px) {
	
	.Home {
		height: 85vh;
	}

	
/*---- Formatting for the nav bar showing up --------*/
	#menu-icon {
		display:inline;
	}
	.navbar {
		position: absolute;
		top: -700px;
		left:0;
		right:0;
		flex-direction: column;
		background:var(--bg-color);
		text-align: left;
		transition: all .30s;
	}
	.navbar a {
		display:block;
		padding: 1.1 rem;
		margin: 1.3rem;
		border-left: 2px solid var(--text-color);
	}
	.navbar a:hover {
		background:red;
		width:20%;
		opacity: 50%;
	}
	.navbar a::after {
		display:none;
	}
	.navbar.active {
		top: 100%;
	}
	
	/*---- End of nav bar formatting --------*/
	
	/*---- Formatting to fit the about page to one column --------*/
	.about {
		grid-template-columns: 1fr;
	}
	.about-img {
		text-align:center;
		margin-bottom: 30px;
	}
	.about-img img {
		max-width: 100%;
		width: 700px;
		height: auto;
	}
	
	/*---- Formatting to fit the contact page to one column --------*/
	.contact {
		grid-template-columns: 1fr;
	}
	.contact-img {
		text-align: center;
		margin-bottom: 25px;
	}
	
	.contact-form {
		order: 2;
	}
	
}
/*----end --------*/