/* UNIVERSAL */
body {
	margin: 0;
	box-sizing: border-box;
	background-color: rgb(32, 31, 44) !important;
	max-width: 100%;
  	overflow-x: hidden;
}
* {
	text-align: center;
	font-family: "Raleway", sans-serif;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
h2 {
	font-size: 3.5vw !important;
}
p {
	font-size: 1.1vw;
}
.accent {
	color: gold;
}
/* width */
::-webkit-scrollbar {
  width: 1vw;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(0, 204, 255); 
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: gold; 
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 204, 255); 
}

/* SPLASH HEADER */
.intro {
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
h1 {
	color: white !important;
	font-size: 3vw !important;
}
.name {
	color: gold;
	font-weight: bolder;
}

/* ARROW ANIMATION */
.fa-angle-double-down {
	text-align: center;
	margin: 100% 0;
	color: white;
	font-size: 4vw;
}
.arrow {
	margin-top: 2%;
}
.bounce {
	animation-delay: 17s !important;
	visibility: hidden;
	animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		visibility: visible;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		visibility: visible;
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	60% {
		visibility: visible;
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}
@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		visibility: visible;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		visibility: visible;
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	60% {
		visibility: visible;
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

/* ABOUT ME */
#about_me {
	height: 97vh;
	padding-top: 2.3%;
	color: white;
	background: rgb(85, 96, 107);
	background: linear-gradient(
		to top left,
		rgb(32, 31, 44),
		rgb(95, 108, 121) 60%
	);
	text-shadow: 1px 1px black;
}
#about_me h2 {
	margin-top: 2%;
}
em {
	font-style: normal;
	font-weight: bold;
}
#profile_pic {
	width: 25%;
	border-radius: 50%;
	box-shadow: inset 0 0 50px #fff,
		/* inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff, */
			0 0 20px #fff,
		-10px 0 20px rgb(0, 153, 255), 10px 0 20px gold;
}
.about_content {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
}
#about_text {
	width: 40%;
}

/* CONTACT BAR */
#top {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	height: 3vh;
	background-color: rgba(0, 0, 0, 0.6);
	font-size: 2vmin;
	z-index: 1;
}
#top a {
	text-decoration: none;
	color: white;
}

/* SKILLS */
#skills_section {
	height: 100vh;
	padding-top: 2%;
	padding-bottom: 10%;
	color: rgb(32, 31, 44);
	background: linear-gradient(140deg, #fdcd3b 50%, #ffed4b 50%);
}
#skills_section h2 {
	text-shadow: 1px 1px rgb(218, 149, 0);
}
#skills_section img {
	width: 3.5vw;
}
.skills_container {
	margin-top: 4%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	row-gap: 8%;
	padding: 0 15% 0 15%;
}
.skill p {
	margin-top: 2%;
	font-weight: bold;
}

/* PROJECTS */
#projects {
	padding-top: 2%;
	margin-bottom: 6%;
	color: white;
	background: linear-gradient(217deg, #73ddd6e5, rgba(255, 0, 0, 0) 70.71%),
		linear-gradient(127deg, rgba(250, 128, 114, 0.7), rgba(0, 255, 0, 0) 70.71%),
		linear-gradient(336deg, rgba(255, 217, 0, 0.7), rgba(0, 0, 255, 0) 70.71%);
	text-shadow: 1px 1px black;
}
#projects_container {
	margin-top: 4%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#projects h2 {
	width: 50%;
}
#projects header {
	display: flex;
	justify-content: center;
}
.project {
	display: flex;
	width: 80%;
	justify-content: center;
	margin-bottom: 5%;
}
.right {
	flex-direction: row-reverse;
}
.effect_wrapper {
	position: relative;
	width: 35%;
}
.project_pic {
	width: 100%;
	padding: 1px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.project_text {
	width: 45%;
	display: flex;
	flex-direction: column;
	font-size: 1em;
	margin: 0 2% 0 2%;
	line-height: 1;
	/* align-items: center; */
	justify-content: center;
}
.project_text h3 {
	margin-top: 0.5%;
	font-size: 2.2vw;
	line-height: 0.5;
}
.project_text p {
	margin: 0;
}
.align_left {
	text-align: left;
}
.align_right {
	text-align: right;
}
.overlay {
	position: absolute;
	transition: 0.5s ease;
	opacity: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	left: 0;
	right: 0;
	background-color: black;
	border: 1px solid white;
}
.effect_wrapper:hover .overlay {
	opacity: 0.7;
}
.overlay_text {
	color: white;
	width: 60%;
	font-size: 2vw;
	font-weight: normal;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
.overlay_text a {
	color: white !important;
	text-decoration: none;
}
.tech-stack {
	font-size: 0.9vw;
	color: #fdcd3b;
	font-weight: bold;
	letter-spacing: 0.07em;
}
.role {
	font-weight: bold;
	font-size: 0.9vw;
	color: white;
	margin-top: 0.6%;
	line-height: 1.2em;
}
.project_text ul {
	list-style-type: none;
	margin-top: 0.8%;
}
.project_text li {
	text-align: left;
	font-size: 1vw;
}
#to_top {
	padding-bottom: 1.5%;
	line-height: 1;
	font-weight: bold;
	font-size: 1.3vw;
}
#to_top a {
	color: white;
	text-decoration: none;
}
#to_top i {
	font-size: 2vw;
}
#to_top_mobile {
	display: none;
}
.mobile_links {
	display: none;
}

/* FOOTER */
footer {
	font-weight: bold;
	font-size: 2.5vmin;
	color: red;
	margin-bottom: 1%;
}
footer span {
	color: white;
}
#code_pic {
	width: 8%;
	border-radius: 5%;
}
/* #coding_box {
	width: 40%;
} */

/* MOBILE RESPONSIVE */
@media (max-width: 688px) {
	/* GLOBAL */
	section {
		height: auto !important;
	}
	h2 {
		font-size: 6vw !important;
	}
	h3 {
		font-size: 5vw !important;
	}
	p,
	ul,
	li,
	.tech-stack,
	.role {
		font-size: 3vw !important;
	}
	/* SPLASH HEADER */
	.intro h1 {
		font-size: 6vw !important;
	}
	.fa-angle-double-down {
		font-size: 8vw;
	}
	.arrow {
		display: none;
	}
	/* CONTACT BAR */
	#top {
		position: fixed;
		height: 10vh;
		font-size: 3vw;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	/* ABOUT ME */
	#about_me {
		height: auto;
		padding-top: 6%;
		padding-bottom: 3%;
	}
	#profile_pic {
		width: 50%;
		margin-bottom: 2%;
	}
	#about_text {
		width: 90%;
	}
	/* SKILLS */
	#skills_section img {
		width: 8vw;
	}
	.skills_container {
		padding: 0 5% 3% 5%;
		row-gap: 5%;
	}
	/* PROJECTS */
	.project {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.overlay {
		display: none;
	}
	.effect_wrapper {
		position: auto;
		width: 100%;
	}
	.project_pic {
		width: 80%;
		padding: 0;
		border-radius: 1%;
	}
	.effect_wrapper:hover .overlay,
	.overlay_text {
		visibility: hidden;
	}
	.project_text {
		width: 90%;
		margin-top: 5%;
		line-height: normal;
	}
	.mobile_links {
		display: block;
		color: white;
		font-size: 5vw;
		font-weight: bold;
		margin-bottom:3%;
	}
	.mobile_links a {
		color: white !important;
		text-decoration: none;
	}
	#to_top {
		display: none;
	}
	#to_top_mobile {
		display: block;
		padding-bottom: 1.5%;
		line-height: 1;
		font-weight: bold;
		font-size: 4vw;
	}
	#to_top_mobile a {
		color: white;
		text-decoration: none;
	}
	#to_top_mobile i {
		font-size: 6vw;
	}
	/* FOOTER */
	footer {
		font-size: 3vw;
		margin-bottom: 1%;
	}
	footer span {
		font-size: 3vw;
	}
	#code_pic {
		width: 30%;
		border-radius: 5%;
	}
}