@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Castoro&display=swap');

html {
  scroll-behavior: smooth;
}

/* ---- reset ---- */ 
body{ margin:0; } 

/* ---- particles.js container ---- */ 
#particles-js{ 
	position:absolute; 
	width: 100%; 
	 /*height will need to be adjusted for each page*/
	height: 260%; 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: 50% 50%; 
	z-index: -1000;
} 

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

/* Track */
::-webkit-scrollbar-track {
  background: #fff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #6b30bc; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #4C1499; 
}

#hero {
	height: 90vh;
	position: relative;
}

.hero-container {
	margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 38vh;
}

.hero-greet {
	text-align: center;
	color: #6b30bc;
	font-size: 40px;
	font-family: 'Share Tech', sans-serif;
}

.hero-role {
	text-align: center;
	color: #222;
	font-size: 30px;
	font-family: 'Share Tech', sans-serif;
	margin-bottom: 25px;
}

.hero-request {
	text-align: center;
	font-size: 18px;
	position: relative;
}

.hero-request .icon {
	border: none;
	padding: 0 25px;
	color: #6b30bc;
	position: relative;
	top: 1px;
    display: inline-block;
    font-size: 35px;
    text-decoration: none;
	width: 120px;
}

.hero-request .icon:hover {
	color: #222;
	transform: translateY(-3px);
}

.hero-request-text {
	font-family: 'Nunito Sans', sans-serif;
	display: block;
	font-size: 18px;
	padding-top: 5px;
}

#body {
	padding-right: 0;
	padding-left: 0;
	min-height: 100vh;
	position: relative;
}

.recent-work {
	background-color: #f0f0f0;
	font-family: 'Share Tech', sans-serif;
	padding-top: 20px;
	padding-bottom: 20px;
}

.h2-head {
	font-family: 'Share Tech', sans-serif;
	text-align: center;
	color: #6b30bc;
	color: #222;
}

.recent-work-title {
	font-family: 'Nunito Sans', sans-serif;
}

.recent-work-title a {
	text-decoration: none;
	color: #6b30bc;
}

.recent-code, .recent-game {
	max-width: 85em;
    margin-left: auto;
    margin-right: auto;
    color: #222;
    margin-top: 3em;
	margin-bottom: 2em;
}

.body-container {
	margin: 0 auto;
    left: 0;
    right: 0;
	/* background-color: #f0f0f0; */
	background-color: rgba(240, 240, 240, 0.8);
	padding-top: 20px;
	padding-bottom: 20px;
}

.body-work {
	padding: 3rem 0;
    border-bottom: 3px solid #222;
    margin: 2em auto;
}

.body-category {
	margin-bottom: 5em;
}

/* .body-category:nth-child(3) {
	margin-bottom: 10em;
} */

.body-category-name {
	font-family: 'Share Tech', sans-serif;
	border-left: dashed #6b30bc;
	padding-left: 10px;
}

.text-col p {
	font-family: 'Castoro', serif;
	font-size: 18px;
	margin-bottom: 30px;
	color: #222;
}

.text-col-links {
	text-align: left;
	font-size: 20px;
}

.text-col-button {
	color: #6b30bc;
	font-size: 18px;
	border: solid #6b30bc;
	padding: 8px 15px;
	background-color: none;
	font-family: 'Nunito Sans', sans-serif;
}

.text-col-button:hover {
	color: #fff;
	background-color: #6b30bc;
	text-decoration: none;
}

/* .img-col {
	height: 350px;
	overflow: hidden;
	text-align: center;
}

.img-col img {
	max-width: 100%;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
} */

.body-work > .img-col img {
	max-width: 100%;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.body-work > .text-col p {
	font-family: 'Castoro', serif;
	color: #222;
	font-size: 16px;
	margin-bottom: 25px;
}

/* Hide image on Left when in desktop view */
.web-left {
	position: absolute;
	visibility: hidden;
}

.work-date {
	margin-top: 3px;
	text-align: left;
}

.work-title {
	margin-top: 0;
	padding-top: 10px;
}

.work-title a {
	text-decoration: none;
	color: #6b30bc;
}

.work-links {
	text-align: left;
	font-size: 20px;
}

.work-button {
	color: #6b30bc;
	font-size: 16px;
	border: solid #6b30bc;
	padding: 6px 10px;
	background-color: none;
	font-family: 'Nunito Sans', sans-serif;
}

.work-button:hover {
	color: #fff;
	background-color: #6b30bc;
	text-decoration: none;
}

.back { text-align: center; padding-bottom: 20px;}

.back a {
	border: solid #6b30bc;
	padding: 6px 10px;
	font-family: 'Nunito Sans', sans-serif;
	color: #6b30bc;
	font-style: italic;
}

.back a:hover {
	color: #fff;
	background-color: #6b30bc;
	text-decoration: none;
}

@media only screen and (max-width: 600px) {
	#particles-js{ 
		 /*height will need to be adjusted for each page*/
		height: 354%; 
	}

	.hero-request .icon {
		height: 80px;
	}

	.text-col-button {
		display: inline-block;
		margin: 5px;
	}

	.img-col {
		height: 208px;
		overflow: hidden;
	}
	
	/* Reveal image on Left when in mobile view */
	.web-left {
		position: relative;
		visibility: visible;
	}

	/* Hide image on right when in mobile view */
	.web-right {
		position: absolute;
		visibility: hidden;
	}

	.work-button {
		display: inline-block;
		margin: 5px;
	}
}