@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');

:root {
	--green: #007e00;
	--greenh: #009600;
	--gray: #b6b6b6;
	--grayl:#d3d3d3;
	--timeline: #969696;
	--timelinework: #adadad;
	--timelineback: linear-gradient(45deg, #202020aa 40%, #222326aa 40%, #222326aa 50%, #202020aa 50%, #202020aa 90%, #222326aa 90%, #222326aa 100%);
	--timelinebackb: linear-gradient(-45deg, #202020aa 40%, #222326aa 40%, #222326aa 50%, #202020aa 50%, #202020aa 90%, #222326aa 90%, #222326aa 100%);
	--timelinebacks: 35.36px 35.36px;
	--timelinestamp: 8%;
}

* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background: none;
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
	text-decoration: none;
}

body {
	background-color: #0F0F0F;
	overflow-x: hidden;
}

.only-js,
.js {
	display: none !important;
}

/* Header */

.header {
	position: fixed;
	left: 0;
	top: 0;
	width: 55px;
	height: 100vh;
	background-color: #181818;
	transition: all .15s ease-in-out;
	overflow: hidden;
	z-index: 10;
}

#expand {
	display: none;
	position: absolute;
	top: 15px;
	right: 15px;
	height: 25px;
	width: 25px;
	transition: all .2s ease-in-out;
	background-image: url("./assets/img/menu.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.header:hover {
	width: 200px;
}

.header .header-logo {
	display: block;
	width: 100%;
	text-align: center;
}

.header .header-logo .header-logo-img {
	width: 55px;
	height: auto;
}

.header .header-link {
	position: relative;
	height: 50px;
	width: 255px;
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	color: #afafaf;
	transform: translateZ(0) scale(1,1);
	transition: color .1s ease-in-out;
	border-top: 1px solid #2c2c2c;
}

.header .header-link:last-child {
	border-bottom: 1px solid #2c2c2c;
}

.header .header-link:hover {
	cursor: pointer;
	color: var(--green);
}

.header .header-link .header-icon {
	position: relative;
	display: table-cell;
	width: 55px;
	height: 36px;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
}

.header .header-link .header-text {
	position: relative;
	word-break: keep-all;
	display: table-cell;
	vertical-align: middle;
	font-size: 16px;
}

.header .header-socials {
	position: absolute;
	bottom: 15px;
	width: 100%;
	text-align: center;
}

.header .header-socials .header-social-icon {
	display: inline-block;
	font-size: 20px;
	color: #afafaf;
	padding: 5px;
	transition: color .1s ease-in-out;
}

.header .header-socials .header-social-icon.git:hover {
	color: #8f008f;
}
.header .header-socials .header-social-icon.in:hover {
	color: #0A65C0;
}
.header .header-socials .header-social-icon.yt:hover {
	color: #FF0101;
}

/* Content */

.content {
	position: relative;
	left: 50%;
	padding: 10px;
	width: 100vw;
	max-width: 1140px;
	height: auto;
	min-height: calc(200vh - 100px);
	transform: translate(-50%, 0%);
	z-index: 8;
}

.content::before {
	content: "scroll down";
	position: absolute;
	display: block;
	left: -20px;
	top: 80vh;
	padding-right: 20px;
	color: var(--gray);
	font-size: 14px;
	transform: rotate(90deg);
	animation: bounce;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-image: url("./assets/img/arrow.svg");
	background-size: 14px;
	background-repeat: no-repeat;
	background-position: 100%;
	z-index: 9;
}

.content::after {
	content: "scroll down";
	position: absolute;
	display: block;
	right: -20px;
	top: 80vh;
	padding-right: 20px;
	color: var(--gray);
	font-size: 14px;
	transform: rotate(90deg);
	animation: bounce;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-image: url("./assets/img/arrow.svg");
	background-size: 14px;
	background-repeat: no-repeat;
	background-position: 100%;
	z-index: 9;
}


@keyframes bounce {
	0% {
		top: 80vh;
	}
	50% {
		top: 78vh;
	}
	100% {
		top: 80vh;
	}
}


.content-div {
	margin-top: 50px;
}

.content-main {
	position: relative;
	text-align: center;
	z-index: inherit;
	height: 100vh;
}

/* .content-main::before {
	content: "";
	position: absolute;
	display: block;
	width: 50vh;
	height: 50vh;
	left: 0%;
	transform: translate(-30vw, 30vh) rotate(30deg);
	border: 2px solid var(--green);
}

.content-main::after {
	content: "";
	position: fixed;
	display: block;
	width: 55vh;
	height: 55vh;
	top: 0%;
	left: 100%;
	transform: translate(10vw, 27.5vh) rotate(-30deg);
	border: 2px solid var(--green);
} */

.content-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 64px;
	color: #fff;
}

.content-motto {
	display: block;
	margin-top: 10px;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 17px;
	color: var(--greenh);
}

.content-portrait {
	width: 700px;
	height: auto;
	z-index: 8;
}

.content-header {
	display: inline-block;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 30px;
	padding: 0 20px 5px 0;
	margin-bottom: 20px;
	color: #fff;
	border-bottom: 2px solid var(--green);
}

.content-skills .content-header {
	margin-top: 60px;
}

.content-text {
	display: block;
	color: var(--gray);
	font-size: 16px;
	line-height: 24px;
	text-align: justify;
}

.content-highlight {
	color: var(--grayl);
	font-weight: 500;
}

/* Progress Timeline */

.content-timeline {
	margin-top: 30px;
	position: relative;
	display: flex;
	border-bottom: 1px solid var(--timeline);
	height: auto;
	min-height: 150px;
	width: 60%;
}

.content-timeline::after {
	content: "";
	position: absolute;
	right: 1px;
	bottom: -5px;
	height: 9px;
	width: 9px;
	border-right: 1px solid var(--timeline);
	border-top: 1px solid var(--timeline);
	transform: rotate(45deg);
}

.content-timeline-stamp {
	position: absolute;
	bottom: -7px;
	height: 13px;
	border-left: 1px solid var(--timeline);
	left: var(--timelinestamp);
}

.content-timeline-stamp::before {
	content: "";
	display: block;
	position: relative;
	color: var(--timeline);
	font-size: 14px;
	margin-top: 15px;
}

.content-timeline-stamp:nth-child(1) {
	left: calc(var(--timelinestamp) * 0);
}

.content-timeline-stamp:nth-child(1)::before {
	content: "2016";
}

.content-timeline-stamp:nth-child(2) {
	left: calc(var(--timelinestamp) * 1);
}

.content-timeline-stamp:nth-child(2)::before {
	content: "2018";
}

.content-timeline-stamp:nth-child(3) {
	left: calc(var(--timelinestamp) * 2);
}

.content-timeline-stamp:nth-child(3)::before {
	content: "2019";
}

.content-timeline-stamp:nth-child(4) {
	left: calc(var(--timelinestamp) * 3);
}

.content-timeline-stamp:nth-child(4)::before {
	content: "2020";
}

.content-timeline-stamp:nth-child(5) {
	left: calc(var(--timelinestamp) * 4);
}

.content-timeline-stamp:nth-child(5)::before {
	content: "2021";
}

.content-timeline-stamp:nth-child(6) {
	left: calc(var(--timelinestamp) * 5);
}

.content-timeline-stamp:nth-child(6)::before {
	content: "2022";
}

.content-timeline-stamp:nth-child(7) {
	left: calc(var(--timelinestamp) * 10);
}

.content-timeline-stamp:nth-child(7)::before {
	content: "2023";
}

/* Timeline Progress */

.content-timeline-work {
	position: absolute;
	bottom: 0px;
	color: var(--timelinework);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
}

.content-timeline-work::after {
	left: 5px;
	display: block;
	position: relative;
	bottom: 25px;
}

.content-timeline-work.timeline-web {
	border-top: 3px solid #F7E018;
	left: calc(var(--timelinestamp) * 1);
	width: calc(var(--timelinestamp) * 10);
	height: 100%;
	bottom: 0px;
	background-image: var(--timelineback);
	background-size: var(--timelinebacks);
}

.content-timeline-work.timeline-web::after {
	content: "HTML5 - CSS3 - JavaScript - jQuery - PHP + MySQL";
}

.content-timeline-work.timeline-cs {
	border-top: 3px solid #A179DC;
	left: calc(var(--timelinestamp) * 3);
	width: calc(var(--timelinestamp) * 8);
	height: 70%;
	bottom: 0px;
	background-image: var(--timelinebackb);
	background-size: var(--timelinebacks);
}

.content-timeline-work.timeline-cs::after {
	content: "C#";
}

.content-timeline-work.timeline-cpp {
	border-top: 3px solid #60a0ff;
	left: calc(var(--timelinestamp) * 5);
	width: calc(var(--timelinestamp) * 3);
	height: 45%;
	bottom: 0px;
	background-image: var(--timelineback);
	background-size: var(--timelinebacks);
}

.content-timeline-work.timeline-cpp::after {
	content: "C++";
}

.content-timeline-work.timeline-lua {
	border-top: 3px solid #3cffff;
	left: calc(var(--timelinestamp) * 0);
	width: calc(var(--timelinestamp) * 4);
}

.content-timeline-work.timeline-lua::after {
	content: "Lua";
}

.content-timeline-work.timeline-java {
	border-top: 3px solid #F58219;
	left: calc(var(--timelinestamp) * 4);
	width: calc(var(--timelinestamp) * 1);
}

.content-timeline-work.timeline-java::after {
	content: "Java";
}

.content-timeline-work.timeline-spawn {
	border-top: 3px solid #7e95ff;
	left: calc(var(--timelinestamp) * 5);
	width: calc(var(--timelinestamp) * 2);
}

.content-timeline-work.timeline-spawn::after {
	content: "SourcePawn";
}

.content-timeline-work.timeline-python {
	border-top: 3px solid #FFDE4D;
	left: calc(var(--timelinestamp) * 7);
	width: calc(var(--timelinestamp) * 1.8);
}

.content-timeline-work.timeline-python::after {
	content: "Python";
}

.content-timeline-work.timeline-wp {
	border-top: 3px solid #ff3ef5;
	left: calc(var(--timelinestamp) * 8.8);
	width: calc(var(--timelinestamp) * 2.2);
}

.content-timeline-work.timeline-wp::after {
	content: "WordPress";
}

.content-timeline-work.timeline-node {
	border-top: 3px solid #60a0ff;
	left: calc(var(--timelinestamp) * 9);
	width: calc(var(--timelinestamp) * 2);
	height: 45%;
	bottom: 0px;
	background-image: var(--timelineback);
	background-size: var(--timelinebacks);
}

.content-timeline-work.timeline-node::after {
	content: "Node.js";
}

/* Skills */

.content-skill {
	position: relative;
	width: 100%;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .05);
	color: #fff;
	overflow: hidden;
	margin-bottom: 15px;
}

.skill-title {
	padding: 5px 10px;
	position: relative;
	display: inline-block;
	z-index: 7;
	background-color: rgba(0,0,0, .2);
}

.skill-percent {
	position: relative;
	padding: 5px 10px;
	float: right;
	z-index: 7;
	background-color: rgba(255,255,255, .1);
}

.skill-progress {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: linear-gradient(-45deg, #202020aa 40%, #222326aa 40%, #222326aa 50%, #202020aa 50%, #202020aa 90%, #222326aa 90%, #222326aa 100%);
	background-size: 35.36px 35.36px;
	z-index: 6;
	background-position-x: 0%;
	transition: width .005s ease-in-out;
	animation: progress;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border-radius: 0px 3px 3px 0px;
}

#web-progress {
	background-image: linear-gradient(-45deg, #602c70aa 40%, #9c4db4aa 40%, #9c4db4aa 50%, #602c70aa 50%, #602c70aa 90%, #9c4db4aa 90%, #9c4db4aa 100%);
	width: 75%;
}

#bs-progress {
	background-image: linear-gradient(-45deg, #6D16E4aa 40%, #9a35ffaa 40%, #9a35ffaa 50%, #6D16E4aa 50%, #6D16E4aa 90%, #9a35ffaa 90%, #9a35ffaa 100%);
	width: 75%;
}

#sql-progress {
	background-image: linear-gradient(-45deg, #2e702caa 40%, #4db45baa 40%, #4db45baa 50%, #2e702caa 50%, #2e702caa 90%, #4db45baa 90%, #4db45baa 100%);
	width: 85%;
}

#php-progress {
	background-image: linear-gradient(-45deg, #702c54aa 40%, #b44d8daa 40%, #b44d8daa 50%, #702c54aa 50%, #702c54aa 90%, #b44d8daa 90%, #b44d8daa 100%);
	width: 45%;
}

#wp-progress {
	background-image: linear-gradient(-45deg, #74422aaa 40%, #91614aaa 40%, #91614aaa 50%, #74422aaa 50%, #74422aaa 90%, #91614aaa 90%, #91614aaa 100%);
	width: 35%;
}

#lua-progress {
	background-image: linear-gradient(-45deg, #a85e28aa 40%, #d17c3faa 40%, #d17c3faa 50%, #a85e28aa 50%, #a85e28aa 90%, #d17c3faa 90%, #d17c3faa 100%);
	width: 90%;
}

#cs-progress {
	background-image: linear-gradient(-45deg, #36967eaa 40%, #51ceafaa 40%, #51ceafaa 50%, #36967eaa 50%, #36967eaa 90%, #51ceafaa 90%, #51ceafaa 100%);
	width: 45%;
}

#cpp-progress { 
	background-image: linear-gradient(-45deg, #37878aaa 40%, #4db1b4aa 40%, #4db1b4aa 50%, #37878aaa 50%, #37878aaa 90%, #4db1b4aa 90%, #4db1b4aa 100%);
	width: 35%;
}

#spawn-progress { 
	background-image: linear-gradient(-45deg, #97993aaa 40%, #bdbe4baa 40%, #bdbe4baa 50%, #97993aaa 50%, #97993aaa 90%, #bdbe4baa 90%, #bdbe4baa 100%);
	width: 35%;
}

#python-progress { 
	background-image: linear-gradient(-45deg, #993b3baa 40%, #be4b4baa 40%, #be4b4baa 50%, #993b3baa 50%, #993b3baa 90%, #be4b4baa 90%, #be4b4baa 100%);
	width: 25%;
}

#java-progress { 
	background-image: linear-gradient(-45deg, #488137aa 40%, #5ca147aa 40%, #5ca147aa 50%, #488137aa 50%, #488137aa 90%, #5ca147aa 90%, #5ca147aa 100%);
	width: 15%;
}

#design-progress { 
	background-image: linear-gradient(-45deg, #374e81aa 40%, #3d62b3aa 40%, #3d62b3aa 50%, #374e81aa 50%, #374e81aa 90%, #3d62b3aa 90%, #3d62b3aa 100%);
	width: 80%;
}

@keyframes progress {
	0% {
		background-position-x: 0%;
	}
	100% {
		background-position-x: 1000px;
	}
}

/* Projects */

.content-projects {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 20px);
	margin-left: -10px;
}

.project {
	position: relative;
	display: block;
	width: calc(33.3333333% - 20px);
	margin: 10px;
	height: 200px;
	border-radius: 4px;
	text-align: center;
	background-color: rgba(255, 255, 255, .05);
	background-image: url("./assets/img/sisi.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	transition: all .2s ease-in-out;
	overflow: hidden;
}

.project:hover {
	background-size: 120%;
}

#proj-sisi {
	background-image: url("./assets/img/sisi.jpg");
}

#proj-bobi {
	background-image: url("./assets/img/bobi.jpg");
}

#proj-swimgy {
	background-image: url("./assets/img/swimgy.jpg");
}

#proj-bestup {
	background-image: url("./assets/img/bestup.jpg");
}

#proj-dpp {
	background-image: url("./assets/img/dpp.jpg");
}

#proj-tylickidworek {
	background-image: url("./assets/img/tylickidworek.jpg");
}

#proj-blueside {
	background-image: url("./assets/img/blueside.jpg");
}

#proj-jethud {
	background-image: url("./assets/img/jethud.jpg");
}

#proj-mafiahud {
	background-image: url("./assets/img/mafiahud.jpg");
}

#proj-blackjack {
	background-image: url("./assets/img/blackjack.jpg");
}

.project-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 100%;
	vertical-align: center;
	opacity: 0;
	background-color: rgba(0,0,0,.8);
	transition: opacity .2s ease-in-out;
	border-radius: 4px;
}

.project:hover .project-inner {
	top: 0px;
	opacity: 1;
}

.project-inner-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.project-title {
	display: block;
	color: #fff;
	font-weight: 600;
	font-size: 18px;
}

.project-desc {
	display: block;
	color: #fff;
}

.project-link {
	display: inline-block;
	margin-top: 10px;
	color: #fff;
	font-weight: 600;
	padding: 5px 10px;
	border: 2px solid var(--greenh);
	border-radius: 4px;
	transition: background .2s ease-in-out;
}

.project-link:hover {
	background-color: var(--greenh);
}

/* Contact */

.contact-form {
	width: 50%;
	display: block;
}

.contact-form * {
	-webkit-appearance: none;
}

.contact-half,
.contact-full,
.contact-big,
.contact-submit {
	position: relative;
	background-color: #2A2A2A;
	padding: 20px 20px;
	font-size: 16px;
	resize: none;
	color: #fff;
	border-bottom: 2px solid transparent;
}

.contact-half:focus-within,
.contact-full:focus-within,
.contact-big:focus-within {
	border-bottom: 2px solid var(--green);
}

.contact-full,
.contact-big,
.contact-submit {
	margin-top: 10px;
	display: block;
}

.contact-half {
	display: inline-block;
	width: calc(50% - 5px);
	margin: 0;
}

.contact-half:nth-child(2) {
	margin-left: 5px;
}

.contact-full,
.contact-big {
	width: 100%;
}

.contact-big {
	resize: vertical;
	height: auto;
	min-height: 200px;
	margin-bottom: 10px;
}

#content_contact_captcha_gen {
	margin-left: 5px;
}

.contact-submit {
	color: var(--greenh);
	border: 2px solid var(--greenh);
	padding: 10px 20px;
	transition: all .2s ease-in-out;
	background: none;
	width: 100%;
}

.contact-submit:hover {
	cursor: pointer;
	background-color: var(--greenh);
	color: #fff;
}

/* Notify */

.notify {
	position: fixed;
	display: none;
	top: 50%;
	left: 50%;
	width: calc(100% - 20px);
	max-width: 512px;
	height: auto;
	background-color: #1b1b1b;
	border: 2px solid var(--green);
	z-index: 11;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 30px 20px;
}

.notify-text {
	display: block;
	color: #fff;
}

.notify-button {
	display: inline-block;
	background-color: #131313;
	border: 2px solid var(--green);
	color: #fff;
	font-weight: 600;
	font-size: 18px;
	padding: 10px 20px;
	margin-top: 20px;
	transition: background .2s ease-in-out;
}

.notify-button:hover {
	cursor: pointer;
	background-color: var(--green);
}

/* Footer */

.footer {
	position: relative;
	display: block;
	width: 100vw;
	height: 100px;
	margin-top: 100px;
	background-color: #181818;
	z-index: 9;
}

.footer .footer-content {
	position: absolute;
	padding: 10px;
	top: 50%;
	left: 50%;
	width: 100vw;
	max-width: 1140px;
	transform: translate(-50%, -50%);
	text-align: right;
	color: #afafaf;
}

.footer .footer-link {
	color: inherit;
	transition: all .2s ease-in-out;
}

.footer .footer-link:hover {
	color: var(--greenh);
}

/* Scroll Bar */

::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: rgb(17, 17, 17);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar {
	width: 10px;
	background-color: #000;
}

::-webkit-scrollbar-thumb {
	background-color: var(--green);
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--greenh);
}

/* Responsiveness */

@media only screen and (max-width: 1250px) {
	.content {
		padding: 10px 10px 10px 65px;
	}
	.content::before {
		left: 65px;
	}
	.project {
		background-size: cover;
	}
}

@media only screen and (max-width: 1024px) {
	.content-main::before,
	.content-main::after {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	.header {
		width: 100%;
		height: 55px;
	}
	.header:hover {
		width: 100%;
	}	
	.header.active {
		height: 100vh;
	}
	#expand {
		display: inline-block;
	}
	.header .header-logo .header-logo-img {
		width: auto;
		height: 55px;
	}
	.header .header-link {
		width: 100%;
	}
	.header .header-socials {
		position: fixed;
		opacity: 0;
		transition: opacity .1s ease-in-out;
	}
	.header.active .header-socials {
		opacity: 1;
	}
	.content-portrait {
		width: 500px;
	}
	.contact-form {
		width: 100%;
	}
	.content-timeline {
		width: 100%;
	}	
	.project {
		width: calc(50% - 20px);
		margin: 10px;
		height: 150px;
	}
	.content-timeline-stamp::before {
		font-size: 10px;
	}
	.content-timeline-work {
		font-size: 10px;
		word-wrap: break-word;
	}
	.content {
		padding: 10px;
		margin-top: 100px;
	}
	.content::before {
		left: -20px;
	}
	.footer .footer-content {
		text-align: center;
	}
	@keyframes bounce {
		0% {
			top: 70vh;
		}
		50% {
			top: 68vh;
		}
		100% {
			top: 70vh;
		}
	}
}

@media only screen and (max-width: 570px) {
	.content-portrait {
		width: 400px;
	}
}

@media only screen and (max-width: 470px) {
	.content-portrait {
		width: 300px;
	}
}

@media only screen and (max-width: 390px) {
	.content-timeline-work {
		font-size: 8px;
	}
}

@media only screen and (max-width: 370px) {
	.content-portrait {
		width: 200px;
	}
	.content-name {
		font-size: 50px;
	}
}