@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

:root {
	--backgroundColor: #282528;
	--textColor: #f6f6f6;
	--boxShadow: #2e3e7c;
	--textHoverColor: #bcc5e8;
	--cardHoverColor: #72778e;
	--pageTitleColor: #266fa7;
	--pageTitleFontSize: 50px;
	--mainFontFamily: 'Share Tech Mono', monospace;
	--mainFontSize: 20px;
	--inlineLinkColor: #1f8bde;
}


html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
	scroll-behavior: smooth; /* for jumping to place on page, to make it smooth */
	background-color: #000103;
	word-wrap: break-word;
	overflow-x: hidden;

}

h1 {
	/* padding-top: 30px; */
	font-family: 'Poppins', sans-serif;
	color: var(--textColor);
	/* padding-left: 30px; */
	font-size: 30px;
	margin: 0;
}

ul {
  list-style-type: none;
	position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
	background-color: var(--backgroundColor);
	font-family: 'Poppins', sans-serif;
	-webkit-box-shadow: 0 0 40px var(--boxShadow);
	box-shadow: 0 0 40px var(--boxShadow);
	font-size: 20px;
}

li {
  float: left;
}

li a {
  display: block;
  color: var(--textColor);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
	transition-duration: 0.5s;
}

li a:hover {
  /* background-color: #2e3e7c; */
	/* text-decoration: underline; */
	transition-duration: 0.5s; 
	text-shadow: 0px 0px 40px #f6f6f6;
	color: var(--textHoverColor);
}

#navbarName {
	color: #eea23b;
	padding-right: 20px;
	padding-top: 16px;
	font-size: 30px;
	margin: 0;
	font-weight: bold;
	font-family: var(--mainFontFamily);
	text-shadow: 0px 0px 40px #f6f6f6;
}

#navbarImage {
	border-radius: 50%;
	width: 50px;	
	height: 50px;
	padding: 5px;
	box-shadow: 0 0 40px var(--boxShadow);
}

#intro {
	font-size: 90px;
	text-align: center;
  padding-top: 50px;
  color: black;
  font-weight: bold;
  top: 0;
  width: 100%;
	height: 100%;
  transition: 0.3s;
}

#intro, #emoji {
	color: var(--textColor);
	font-family: var(--mainFontFamily);
	font-size: 50px;
}

#name {
	font-size: 70px;
}

#profilePicture {
	border-radius: 20px;
	width: 200px;
	height: 200px;
	box-shadow: 0 0 40px var(--boxShadow);
}

@keyframes wiggle {
	0% { transform: rotate(0deg); }
	70% { transform: rotate(0deg); }
	75% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	85% { transform: rotate(5deg); }
	95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

#emoji {
  display: inline-block;
  animation: wiggle 2.5s infinite;
}


#homePage {
  background-image: url("Images/Background Images/backgroundHome.jpg");
  background-repeat: no-repeat;
}

body {
	background-image: url("Images/Background Images/backgroundHome.jpg");
  background-repeat: no-repeat;
}

.neon {
	color: var(--textColor);
  text-shadow:

    0 0 40px #2e3e7c,
    0 0 80px #2e3e7c,
    0 0 90px #2e3e7c,
    0 0 100px #2e3e7c,
    0 0 150px #2e3e7c;
}







#openingLineContainer {
	padding-top: 400px;	
	text-align: center;
}

.openingLine {
	/* position: relative; */
	/* margin-top: 200px; */
	/* margin-left: 30%; */
	width: 24em;
	border-right: 2px solid rgba(255,255,255,.75);
	/* font-size: 180%; */
	text-align: center;
	padding-left: 30px;
	/* margin-top: 400px; */
	white-space: nowrap;
	overflow: hidden;
	transform: translateY(-50%);
	color: var(--textColor);    
	font-size: 90px;
	font-family: Inconsolata, monospace;
	text-shadow: 0 0 5px #C8C8C8;		
}


/* Animation */
.typewriter {
  animation: typewriter 2s steps(12) 1s 1 normal both, blinkTextCursor 500ms steps(12) infinite normal;
	word-wrap: break-word;
}
@keyframes typewriter { 
  from {width: 0;}
  to {width: 7em;}
}
@keyframes blinkTextCursor {
  from {border-right-color: rgba(255,255,255,.75);}
  to {border-right-color: transparent;}
}


.aboutParagraph {
	color: var(--textColor);
	margin: 0;
	padding-left: 30px;
	padding-top: 30px;
	font-family: var(--mainFontFamily);
	font-size: var(--mainFontSize);
}

.pageTitle {
	margin-left: 60px;
	color: var(--pageTitleColor);
	font-size: var(--pageTitleFontSize);
	font-family: 'Poppins', sans-serif;
}


.codeBlock {
	font: 19px Inconsolata, monospace;
	text-shadow: 0 0 5px #C8C8C8;	
}

#aboutPage {
	background-color: #000103;
}

#projectsPage {
	background: #2c2e33;
/* background: linear-gradient(180deg, rgba(44,46,51,1) 0%, rgba(46,62,124,1) 41%, rgba(0,0,0,1) 68%); */
	height: 1000px;
}

#projectsSnippet {
	background-color: black;
  /* background-image: radial-gradient(rgba(46, 62, 124, 0.465), black 120%); */
	background-image: url("Images/Background Images/snippetProjectsBackground	.gif");
	min-height: 1000px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#moreProjectsPage {
	background: rgb(0,0,0);
	background: radial-gradient(circle, rgba(0,0,0,1) 15%, rgba(46,62,124,1) 91%);
	height: 400%;
}


#contactPage {
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,1) 29%, rgba(46,62,124,1) 72%);
}

#transitionAboutProjects {
	background-image: linear-gradient(#000103, #2c2e33);
}

#transitionHelloHome {
	background: linear-gradient(#090d18, #000103);
}

#helloWorld {
	background-color: black;
  background-image: radial-gradient(rgba(46, 62, 124, 0.465), black 120%);
}

::selection {
  background: #2e3e7c;
  text-shadow: none;
}

#downChevron {
	font-size: 30px;
	text-decoration: none;
	color: gray;
	transition-duration: 0.5s;
}

#downChevron:hover {
	text-shadow: 0px 0px 40px #f6f6f6;
	color: var(--inlineLinkColor);
}

#downChevronContainer {
	text-align: center;
	/* height: 20px; */
	transition-duration: 0.5s;
	padding-bottom: 50px;
}


#downChevronContainer:hover {
	-ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);	
}



.projectCard {
	background-image: radial-gradient(#000103, #2c2e33);
  box-shadow: 0 4px 8px 0 var(--boxShadow);
  transition: 0.3s;
  width: 25%;
	float: left;
	padding-left: 30px;
  border-radius: 5px;
	transition-duration: 0.5s;
	color: var(--textColor);
	font-family: var(--mainFontFamily);
}

.individualProjectTitle {
	color: var(--textColor);
	font-family: 'Poppins', sans-serif;
	font-style: italic;
	font-size: 21px;
}




/* Float four columns side by side */
.projectsColumn {
  float: left;
  width: 23%;
  padding: 0 10px;
	transition-duration: 0.5s;
}
/* 
.projectsColumn2 {
  float: left;
  width: 30%;
  padding: 0 10px;
	transition-duration: 0.5s;
}
 */

.projectsRow {
	display: flex;
}


@media screen and (max-width: 850px) {
  .projectsColumn {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }

	.projectImage {
		width: 50%;
		height: 50%;
		border-radius: 8px;
	}	

	.openingLine {   
		font-size: 40px;
	}

	#projectsPage {
		height: 3500px;
	}

	#moreProjectsPage {
		height: 5000px;
	}

	ul {
		font-size: 13px;
	}

	#contactTitle {
		margin-top: 1350px;
	}

	#contactPage {
		background: transparent;
	}

	#navbarName {
		display: none;
	}

	#navbarImage {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
}


.projectsCard {
	box-shadow: 0 4px 8px 0 black;
  padding: 16px;
	margin-top: 60px;
  text-align: center;
	background-image: radial-gradient(#000103, #2c2e33);
	transition: 0.5s;
	color: var(--textColor);
	font-family: var(--mainFontFamily);
	border-radius: 8px;
}


.projectsCard:hover {
	box-shadow: 0 4px 8px 0 var(--boxShadow);
}


.typeOfProjectTitle {
	padding-left: 30px;
	color: var(--textColor);
	margin-top: 100px;
	font-size: 23px;
	font-family: 'Poppins', sans-serif;
}

.projectImage {
	width: 80%;
	height: 80%;
	border-radius: 8px;
	transition-duration: 0.5s;
}

.projectImage:hover {
	border: 4px solid var(--boxShadow);
	border-radius: 8px;
	cursor: pointer;
}

.inlineLink {
	/* color: #1f8bde; */
	transition-duration: 0.5s;
  background: linear-gradient(to bottom, var(--inlineLinkColor) 0%, var(--inlineLinkColor) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: var(--inlineLinkColor);
  text-decoration: none;
  transition: background-size .2s;
	/* width: 35px; */
	display: inline;
}


.inlineLink:hover {
	/* text-decoration: underline wavy #1f8bde;
	text-shadow: 0px 0px 40px #f6f6f6; */
	color: var(--textColor); 
	background-position: 0 100%;
	background-size: 4px 50px;
	/* text-decoration: none; */
}


::-webkit-scrollbar 
{
  width: 10px;
}

::-webkit-scrollbar-track 
{
	background: linear-gradient(180deg, rgba(44,46,51,1) 0%, rgba(46,62,124,1) 94%);
} 

::-webkit-scrollbar-thumb 
{
  background: #266fa7;
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover 
{
	background: #17527e;
}   

.collab {
	color: #eea23b;
	font-family: var(--mainFontFamily);
	text-decoration: none;
	transition-duration: 0.5s;
}

.collab:hover {
	text-decoration: underline wavy #eea23b;
	/* text-shadow: 0px 0px 40px #f6f6f6; */
	filter: brightness(65%);
}

a {
	text-decoration: none;
}