html{
	overflow: hidden;
}

body{
	height: calc(var(--vh, 1vh) * 100);
	overflow: hidden;
	background-attachment: fixed;
}

.scroll{
	position: fixed;
	display: block;
	width: 100%;
	top: 120px;
	height: calc(calc(var(--vh,1vh) * 100) - 120px)!important;
	overflow: auto!important;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll::-webkit-scrollbar {
	display: none;
}

.hyperlink{
	color: #62BAF4!important;
}

a.active.nav-link{
	background-color: transparent!important;
	color: #62BAF4!important;
}

a.active.nav-link.contact{
	color: white!important;
}

a.active.nav-link.contact #contactButton{
	background-color: #62BAF4!important;
}

#home-tab{
	margin-left: 2vw;
	font-family: 'Roboto';
	font-size: 50px!important;
	font-weight: bold;
	color: #ffffff;
}

#about-tab{
	font-family: 'Roboto';
	font-size: 30px!important;
	color: #ffffff;
}

#project-tab{
	font-family: 'Roboto';
	font-size: 30px!important;
	color: #ffffff;
}

#contact-tab{
	font-family: 'Roboto';
	font-size: 33px!important;
	font-weight: bold;
	color: #ffffff;
}

.headerOptions{
	width: 100%!important;
	display: flex;
}

.headerButton{
	align-self: center;
	margin-left: 2vw;
}

#contactButton{
	padding: 15px 30px;
	margin-right: 2vw;
	color: white!important;
	background-color: #199BF1;
	border-radius: 20px;
}

#dropdownIcon{
	background-color: transparent;
	border-color: transparent;
}

#menu{
	color: #199BF1;
	padding: 0 0;
	font-size: 35pt;
}

#close{
	font-size: 80px;
	color: #199BF1;
}

.navigation{
	width: 100%!important;
}

.sidenav{
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 100%;
	background-color: rgba(0,0,0,0.5);
	overflow-x: hidden;
	padding-top: 60px;
	transition: 0.5s;
	font-size: 30px;
	font-weight: bold;
}

#home-tab-side{
	font-size: 50px!important;
	font-weight: bold;
}

.sideMenu{
	font-family: 'Roboto';
	font-size: 30px!important;
	color: #ffffff!important;
}

#menuButton{
	align-self: flex-start;
}

#navbarLarge{
	background-color: rgba(0, 0, 0, 0.85)!important;
	color: white!important;
	height: 120px;
}

#pageLabel{
	font-family: 'Roboto';
	font-size: 30px!important;
	color: #ffffff;
	align-self: center;
}

#navbarSmall{
	background-color: rgba(0, 0, 0, 0.85)!important;
	color: white!important;
	height: 60px;
	position: fixed;
	width: 100%;
}

#homeBackground {
	background-image: url('Images/Backgrounds/Home.jpg');
	/*background-size: 100%;*/
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center 25%;
	display: block;
}

#aboutBackground{
	background-image: url('Images/Backgrounds/About.jpg');
	/*background-size: 100%;*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 45%;
}

#projectsBackground{
	background-image: url('Images/Backgrounds/Projects.jpg');
	/*background-size: 100%;*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 45%;
}

#contactBackground{
	background-image: url('Images/Backgrounds/Contact.jpg');
	/*background-size: 130%;*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 65%;
}

.bgImg{
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
	display: none;
	width: 100%!important;
	height: 100%!important;
}

.closeButton{
	width: 100%;
	position: relative;
	top: 30%;
}

.bgImgOverlay{
	background-color: rgba(0,0,0,0.35);
	position: fixed;
	z-index:-1;
	top: 120px;
	left: 0;
	width: 100%!important;
	height: calc(100% - 120px)!important;
}

.pageTitle{
	font-size: 108px;
	font-family: 'Montserrat';
	font-weight: bold;
	color: #ffffff;
	line-height: 120px;
}

.pageText{
	font-size: 20px;
	font-family: 'Roboto';
	font-weight: lighter;
	line-height: 35px;
	color: #ffffff;
	background-color: rgba(0,0,0,0.4);
	padding: 10px 20px;
}

#homeText{
	margin-left: 3vw;
	max-width: 500px;
	min-width: 400px;
}

#homeTitle{
	max-width: 400px;
}

#home{
	height: calc(calc(var(--vh,1vh) * 100) - 120px)!important;
}

.homeContent{
	top:50%;
	left:50%;
	transform: translate(-45%, -60%);
	position: absolute;
	display: inline-flex;
	text-align: right;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	max-width: 1200px;
}

.aboutContent{
	margin: calc(var(--vh,1vh) * 20) 20vw calc(var(--vh,1vh) * 10) 20vw;
}

#profile{
	position: relative;
	background-image: url('Images/Profile/John.jpg');
	border-radius: 50%;
	height: 15vw;
	width: 15vw;
	min-height: 350px;
	min-width: 350px;
	background-color: black;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 30%;
}

#aboutTitle{
	max-width: 30vw;
}

#topContent{
	width: 100%;
	display: flex;
	align-items: flex-end;
	margin-bottom: calc(var(--vh,1vh) * 3);
}

.projectContent{
	height: calc(calc(var(--vh,1vh) * 100) - 120px);
	margin: 0 10vw 0 10vw;
	display: block;
}

.projectTable{
	position: relative;
	top: calc(var(--vh,1vh) * 7);
	width: 100%;
	justify-items: center;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	row-gap: 120px;
	padding-bottom: 120px;
}

.projectItem{
	background-color: rgba(0,0,0,0.4);
	width: 18vw;
	height: 36vw;
}

.projectHeader{
	color: #ffffff;
	align-self: center;
	font-family: "Montserrat";
	font-size: 2vw!important;
	font-weight: bold;
	text-align: center;
}

.projectImage{
	width: 16vw;
	height: 16vw;
	margin: 1vw 1vw;
}

.projectSeparator{
	background-color: #0B4973;
	border: 3px solid #0B4973;
	width: 85%;
}

.projectText{
	color: white;
	margin: 0.5vw 1vw;
	font-weight: 100!important;
	font-family: "Montserrat";
	font-size: 1vw;
	line-height: 2vw;
	text-align: center;
}

.projectExplain{
	position: relative;
	top: calc(var(--vh,1vh) * 4);
	padding: 0 4.5vw;
}

#project-website{
	background-image: url("Images/Projects/website.png");
	background-position: 50% 50%;
	background-size: cover;
}

#project-pam{
	background-image: url("Images/Projects/pam.png");
	background-color: rgba(41, 69, 100, 0.603);
	border-radius: 25%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

#project-lfr{
	background-image: url("Images/Projects/LFR.jpeg");
	background-position: 45% 50%;
	background-size: cover;
}

#project-eos{
	background-image: url("Images/Projects/ETC.jpg");
	background-position: 50% 50%;
	background-size: cover;
}

#project-sniffer{
	background-image: url("Images/Projects/DMX.jpg");
	background-position: 0% 50%;
	background-size: cover;
}

#project-led{
	background-image: url("Images/Projects/LED.jpg");
	background-position: 50% 50%;
	background-size: cover;
}

.contactContent{
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}

#contactTitle{
	font-size: 80px;
}

.contactMe{
	background-color: rgba(0,0,0,0.4);
	display: grid;
	margin-right: 5vw;
	width: 20vw;
	min-width: 400px;
	padding: 0 1vw var(--vh,1vh) 1vw;
}

.contactForm{
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 30px;
}

#formName, #formEmail, #formMessage{
	background-color: rgb(255, 255, 255, 0.65)!important;
	border: none;
	border-radius: 10px;
	color: #000000;
	width: 100%;
	font-size: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

#formMessage{
	padding-top: 10px;
}

#formName, #formEmail, #formMessage, #formSubmit, textarea, select { 
    outline: none;
}

#formName, #formEmail, #formSubmit{
	height: calc(var(--vh,1vh) * 4);
	min-height: 60px;
}

#formSubmit{
	font-family: "Roboto";
	font-size: 33px;
	font-weight: bold;
	border: none;
	border-radius: 10px;
	background-color: #199BF1;
	color: white;
}

#formMessage{
	height: 6vw;
}

#contactWriting{
	display: flex;
	width:  35vw;
	min-width: 600px;
}

#contactLeft{
	margin-right: calc(var(--vh,1vh) * 2);
	display: flex;
	align-items: center;
}

#contactText{
	font-size: 0.9vw;
	line-height: 2vw;
	font-weight: 100;
}

#contactTitle{
	margin-bottom: 10px;
}

#contactRight{
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--vh,1vh);
}

.click{
	height:100%;
	width: 100%;
	display: block;
}

#github{
	background-image: url("Images/Icons/github.svg");
}

#linkedin{
	background-image: url("Images/Icons/linkedin.svg");
}

#email{
	background-image: url("Images/Icons/email.svg");
}

#phone{
	background-image: url("Images/Icons/phone.svg");
}

.contactInfo{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: calc(var(--vh,1vh) * 4);
	font-size: 1vw;
}

.contactInfo a{
	color: white!important;
	text-decoration: none!important;
}

.contactIcon{
	height:100%;
	width: calc(var(--vh,1vh) * 4);
	background-size: cover;
	margin-left: var(--vh,1vh);
}

#contentDivider{
	display: none;
	background-color: #0B4973;
	border: 3px solid #0B4973;
	width: 85%;
}

#formDisplay{
	background-color: rgba(0,0,0,0.8);
	font-family: "Montserrat";
	color: white;
	position: absolute;
	top: calc(var(--vh, 1vh) * 10);
	display: none;
	opacity: 0;
	z-index: 100;
	width: 50%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	border-radius: 20pt;
	padding: 0pt 20pt;
	font-size: 2vw;
	transition-duration: 1s;
}

@media only screen and (max-width: 2000px){
	#contactText{
		font-size: 1.5vw;
		line-height: 2.2vw;
	}

	.contactInfo{
		font-size: 1.7vw;
		height: calc(var(--vh,1vh) * 3);
	}

	#contactWriting{
		width:  45vw;
		min-width: 600px;
	}

	.contactIcon{
		height:100%;
		width: calc(var(--vh,1vh) * 3);
	}
}

@media only screen and (max-width: 1200px){
	#formDisplay{
		font-size: 3vw;
	}

	#formName, #formEmail, #formMessage{
		font-size: 20px;
	}

	.contactContent{
		width: 90vw;
		display: grid;
		position: absolute;
		top: 100px;
		transform: translateX(-50%);
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: calc(var(--vh,1vh) * 2);
	}

	.contactMe{
		width: 65%;
		margin-right: 0;
		padding: calc(var(--vh,1vh) * 2) 2vw;
		min-width: 600px;
	}

	#formMessage{
		height: calc(var(--vh,1vh) * 15);
	}

	#contactWriting{
		display: block;
		width: 65%;
	}

	#contentDivider{
		display: block;
	}

	#contactTitle{
		width: 65%;
		text-align: right;
		font-size: 100px;
		line-height: 100px;
	}

	#contactText{
		font-size: 30px;
		line-height: 40px;
	}

	.contactInfo{
		font-size: 36px;
		font-weight: 100;
		height: calc(var(--vh,1vh) * 4);
	}

	.contactIcon{
		height:100%;
		width: calc(var(--vh,1vh) * 4);
	}

	.projectTable{
		top: calc(var(--vh,1vh) * 10);
		grid-template-columns: repeat(2, 1fr);
		row-gap: 120px;
		padding-bottom: 120px;
	}

	.projectItem{
		width: 24vw;
		height: 48vw;
	}

	.projectHeader{
		font-size: 3vw!important;
	}
	
	.projectImage{
		width: 21vw;
		height: 21vw;
		margin: 1.5vw 1.5vw;
	}
	
	.projectText{
		font-size: 1.5vw;
		line-height: 2.5vw;
	}

	.scroll{
		top: 80px;
		height: calc(calc(var(--vh,1vh) * 100) - 80px)!important;
	}

	#profile{
		position: absolute;
		left: 50%;
		top: calc(var(--vh,1vh) * 8);
		transform: translateX(-50%);
		height: 27vw;
		width: 27vw;
		min-height: 200px;
		min-width: 200px;
	}

	#aboutTitle{
		max-width: 100vw;
	}

	.aboutContent{
		margin: calc(var(--vh,1vh) * 40) 10vw calc(var(--vh,1vh) * 10) 10vw;
	}

	.pageTitle{
		font-size: 72px;
		font-family: 'Montserrat';
		font-weight: bold;
		line-height: 80px;
	}
	
	.pageText{
		font-size: 16px;
		line-height: 25px;
		background-color: rgba(0,0,0,0.4);
		padding: 10px 20px;
	}

	#homeText{
		min-width: 400px;
	}

	.homeContent{
		max-width:768px;
	}

	#contactButton{
		padding: 5px 20px;
		margin-right: 2vw;
		border-radius: 20px;
	}

	#home{
		height: calc(calc(var(--vh,1vh) * 100) - 80px)!important;
	}

	#navbarLarge{
		height: 80px;
	}

	.bgImgOverlay{
		top: 80px;
		height: calc(100% - 80px)!important;
	}

	#home-tab{
		margin-left: 2vw;
		font-size: 35px!important;
	}
	
	#about-tab{
		font-size: 22px!important;
	}
	
	#project-tab{
		font-size: 22px!important;
	}
	
	#contact-tab{
		font-size: 25px!important;
	}
}

@media only screen and (max-height: 750px){
	.homeContent{
		flex-wrap: wrap;
		justify-content: flex-end;
		top:calc(var(--vh,1vh) * 25);
		left:50%;
		transform: translateX(-50%);
	}

	#homeTitle{
		max-width: 95vw;
		min-width: 70vw;
	}

	#homeText{
		text-align: left;
		max-width: 1000px;
		min-width: 400px;
	}
}

@media only screen and (max-width: 768px){
	#formDisplay{
		font-size: 4vw;
	}

	#formName, #formEmail, #formMessage{
		font-size: calc(var(--vh,1vh) * 2);
	}

	.contactContent{
		width: 85vw;
		display: grid;
		position: absolute;
		top: 60px;
		transform: translateX(-50%);
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: calc(var(--vh,1vh) * 2);
	}

	.contactMe{
		width: 100%;
		min-width: 0px;
		margin-bottom: 20px;
	}

	#formMessage{
		height: calc(var(--vh,1vh) * 15);
		min-height: 100px;
	}

	#contactWriting{
		min-width: 0px;
		width: 100%;
	}

	#contentDivider{
		display: block;
	}

	#contactTitle{
		width: 100%;
		text-align: right;
		font-size: 20vw;
		line-height: 20vw;
		min-width: 0px;
	}

	#contactText{
		font-size: 4vw;
		line-height: 6vw;
		min-width: 0px;
	}

	.contactInfo{
		font-size: 5vw;
		font-weight: 100;
		height: calc(var(--vh,1vh) * 4);
	}

	.contactIcon{
		height: 100%;
		width: calc(var(--vh,1vh) * 4);
	}

	.projectTable{
		top: calc(var(--vh,1vh) * 10);
		grid-template-columns: 1fr;
		row-gap: 120px;
		padding-bottom: 120px;
	}

	.projectItem{
		width: 60vw;
		height: 120vw;
	}

	.projectHeader{
		font-size: 6vw!important;
	}
	
	.projectImage{
		width: 54vw;
		height: 54vw;
		margin: 3vw 3vw;
	}
	
	.projectText{
		font-size: 4vw;
		line-height: 6vw;
	}

	.scroll{
		top: 60px;
		height: calc(calc(var(--vh,1vh) * 100) - 60px)!important;
	}

	#home{
		height: calc(calc(var(--vh,1vh) * 100) - 60px)!important;
	}

	.homeContent{
		top:calc(var(--vh,1vh) * 10);
		transform: translateX(-50%);
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	#homeTitle{
		max-width: 95vw;
		min-width: 70vw;
	}

	#homeText{
		text-align: left;
		max-width: 95vw;
		min-width: 70vw;
	}

	.bgImgOverlay{
		top: 60px;
		left: 0;
		width: 100%!important;
		height: calc(100% - 60px)!important;
	}

	#homeBackground {
		background-image: url('Images/Backgrounds/HomeMobile.jpg');
		background-position: center 25%;
	}
	
	#aboutBackground {
		background-image: url('Images/Backgrounds/AboutMobile.jpg');
		background-position: center 45%;
	}
	
	#projectsBackground {
		background-image: url('Images/Backgrounds/ProjectsMobile.jpg');
		background-position: 0% 45%;
	}
	
	#contactBackground {
		background-image: url('Images/Backgrounds/ContactMobile.jpg');
		background-position: 50% 65%;
	}
	
	a.active.nav-link.contact{
		color: #62BAF4!important;
	}
}

@media only screen and (max-height: 800px){
	#profile{
		top: calc(var(--vh,1vh) * 3)!important;
	}
}

@media only screen and (max-height: 600px){
	#formName, #formEmail, #formMessage{
		font-size: 20px;
	}

	.contactInfo{
		font-size: 4vw;
		height: calc(var(--vh,1vh) * 14);
	}

	.contactIcon{
		width: calc(var(--vh,1vh) * 14);
	}

	#contactTitle{
		font-size: 13vw;
		line-height: 13vw;
	}

	#contactText{
		font-size: 3vw;
		line-height: 5vw;
	}

	#profile{
		top: calc(var(--vh,1vh) * 5)!important;
	}

	.homeContent{
		top: calc(var(--vh,1vh) * 15);
		transform: translateX(-50%);
	}

	#profile{
		left: 50%;
		top: calc(var(--vh,1vh) * 25);
		transform: translateX(-50%);
	}
	
	.aboutContent{
		margin: calc(var(--vh,1vh) * 65) 10vw calc(var(--vh,1vh) * 10) 10vw;
	}
}

@media only screen and (max-height: 400px){
	#profile{
		top: calc(var(--vh,1vh) * 6);
	}

	.contactInfo{
		font-size: 4vw;
		height: calc(var(--vh,1vh) * 10);
	}

	.contactIcon{
		width: calc(var(--vh,1vh) * 10);
	}

	.homeContent{
		top: calc(var(--vh,1vh) * 25);
		transform: translateX(-50%);
	}
}

@media only screen and (max-width: 350px){
	#formName, #formEmail, #formMessage{
		font-size: calc(var(--vh,1vh) * 2);
	}

	#contactTitle{
		font-size: 20vw;
		line-height: 20vw;
	}

	#contactText{
		font-size: 4vw;
		line-height: 6vw;
	}

	.contactInfo{
		font-size: 5vw;
		height: calc(var(--vh,1vh) * 4);
	}

	.contactIcon{
		width: calc(var(--vh,1vh) * 4);
	}
}