@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");

html {
	background: #333333;
	color: #fff;
	font-family: Raleway, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	overflow: hidden
}

.avatar {
	width: 200px; /* Adjust width as needed */
	height: 200px;
	border-radius: 50%;
	box-shadow: 0 0 5px #c4a489; /* Adjust the color and size of the glow here */
	margin-bottom: 20px
}

body, html {
	height: 100%
}

h1 {
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem
}

p {
	word-spacing: .1rem
}

a {
	color: #c4a489;
	text-decoration: none
}

a:hover {
	color: #fff
}

.highlight-title {
	color: #c4a489;
	text-shadow: .25rem .25rem .25rem #c4a489
}

.highlight-link {
	box-shadow: inset 0 -.125rem 0 #c4a489;
	box-sizing: border-box;
	color: #c4a489;
	display: inline-block;
	padding: .125rem;
	transition: all .2s ease-in-out
}

.highlight-link:hover {
	box-shadow: inset 0 -2rem 0 0 #c4a489;
	color: #fff
}

.layout {
	margin: .5rem;
	max-width: 75em;
	padding: .5rem
}

.layout .card {
	background: linear-gradient(145deg, hsla(0, 0%, 45%, .15) 15%, #333333 80%);
	border-radius: 2rem;
	margin: 3rem 0;
	padding: 1rem 2rem
}

.layout .card .title {
	text-align: center;
	position: relative
}

.layout .card .subtitle {
	text-align: center
}

.layout .card .description {
	text-align: justify
}

.neumorphism-button {
	background: linear-gradient(145deg, hsla(240, 2%, 40%, .15) 15%, rgba(33, 33, 33, .4) 80%);
	box-shadow: -4px -3px 2px 0 hsla(0, 0%, 98%, .13), 4px 4px 2px 0 rgba(0, 0, 0, .4)
}

.neumorphism-card {
	box-shadow: inset 2px 2px 4px #000, inset -2px -2px 4px #000
}

.neumorphism-card-big {
	box-shadow: 5px 5px 4px #c4a489, -5px -5px 4px #c4a489
}

#preloader {
	-ms-flex-align: center;
	align-items: center;
	background: #333333;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
	-ms-flex-pack: center;
	justify-content: center;
	left: 0;
	margin: .5rem;
	padding: .5rem;
	position: absolute;
	right: 0;
	z-index: 999
}

#preloader .load {
	height: 6rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 6rem
}

#preloader .load hr {
	animation: a 2s ease infinite;
	border: 0;
	height: 40%;
	margin: 0;
	position: absolute;
	width: 40%
}

#preloader .load :first-child {
	animation-delay: -1.5s;
	background: #fff
}

#preloader .load :nth-child(2) {
	animation-delay: -1s;
	background: #c4a489
}

#preloader .load :nth-child(3) {
	animation-delay: -.5s;
	background: #fff
}

#preloader .load :last-child {
	background: #c4a489
}

@keyframes a {
	0%, to {
		transform: translate(0)
	}

	25% {
		transform: translate(160%)
	}

	50% {
		transform: translate(160%, 160%)
	}

	75% {
		transform: translateY(160%)
	}
}

.footer {
	background: #333333;
	color: #fff;
	margin: .5rem;
	padding: 1rem;
	text-align: center
}

.footer a {
	color: #c4a489
}

#landing, .footer a:focus, .footer a:hover {
	background: #333333;
	color: #fff
}

#landing {
	display: -ms-flexbox;
	display: flex;
	height: 100%;
	text-align: center;
	align-items: center
}

#landing, .landing-title {
	margin: .5rem;
	padding: .5rem
}

.landing-title {
	left: 0;
	position: absolute;
	right: 0;
	top: 20%
}

.landing-icons {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center
}

.landing-icons .social-link {
	color: #fff;
	position: relative;
	height: 3rem;
	line-height: 3rem;
	margin: .25rem;
	width: 3rem
}

.landing-icons .social-link .circle {
	animation: c 1s ease-in-out forwards;
	fill: none;
	stroke-dasharray: 40;
	transition: all .2s ease-in-out
}

.landing-icons .social-link .social {
	font-size: 1.5rem;
	position: absolute;
	top: 0;
	transition: all .5s ease-in-out;
	width: 100%
}

.landing-icons .social-link .social-svg {
	fill: #fff
}

.landing-icons .social-link .label {
	display: none
}

.landing-icons .social-link:hover {
	cursor: pointer
}

.landing-icons .social-link:hover .circle {
	animation: b 1s ease-in-out forwards, d 1s linear forwards;
	fill: #fff;
	fill-opacity: 1
}

.landing-icons .social-link:hover .social-svg {
	fill: #000
}

.landing-icons .social-link:hover .label {
	display: unset !important;
	position: relative;
	top: -2rem
}

.landing-icons .email:hover .circle {
	animation: b 1s ease-in-out forwards, e 1s linear forwards
}

.landing-icons .email:hover .social-svg {
	fill: #e4a909
}

.landing-icons .linkedin:hover .circle {
	animation: b 1s ease-in-out forwards, f 1s linear forwards
}

.landing-icons .linkedin:hover .social-svg {
	fill: #007bb6
}

.landing-icons .twitter:hover .circle {
	animation: b 1s ease-in-out forwards, g 1s linear forwards
}

.landing-icons .twitter:hover .social-svg {
	fill: #1da1f2
}

@keyframes b {
	to {
		stroke-dasharray: 510;
		stroke-width: .5rem
	}
}

@keyframes c {
	0% {
		stroke: #fff;
		stroke-dasharray: 510;
		stroke-width: .5rem
	}

	to {
		stroke: #fff;
		stroke-dasharray: 83;
		stroke-width: .5rem
	}
}

@keyframes d {
	to {
		stroke: #000
	}
}

@keyframes e {
	to {
		stroke: #c4a489
	}
}

@keyframes f {
	to {
		stroke: #007bb6
	}
}

@keyframes g {
	to {
		stroke: #1da1f2
	}
}

#skills {
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: center;
	justify-content: center
}

#skills div {
	padding: .2rem;
	transition: opacity .5s
}

#skills div[skill-type=language] {
	color: #15ce6b
}

#skills div[skill-type=framework] {
	color: #69e9a5
}

#skills div[skill-type=tool] {
	color: #d8f0e3
}

#skills div[skill-weight="1"] {
	font-size: .75rem;
	line-height: .25rem
}

#skills div[skill-weight="2"] {
	font-size: 1.25rem;
	line-height: .75rem
}

#skills div[skill-weight="3"] {
	font-size: 1.75rem;
	line-height: 1.25rem
}

#skills div[skill-weight="4"] {
	font-size: 2.25rem;
	line-height: 1.75rem
}

#skills div[skill-weight="5"] {
	font-size: 2.75rem;
	line-height: 2.25rem
}

#skills .filter-button, #skills input[type=radio] {
	display: none
}

.timeline-wrapper .timeline {
	list-style-type: none;
	padding: 0;
	position: relative
}

.timeline-wrapper .timeline:before {
	background: linear-gradient(180deg, #f3f3f3 0, #d5d5d5 8%, #d5d5d5 92%, #f3f3f3);
	content: " ";
	height: 100%;
	left: 50%;
	margin-left: -.0675rem;
	position: absolute;
	width: .125rem;
	z-index: -1
}

.timeline-wrapper .timeline li {
	padding: 1rem 0
}

.timeline-wrapper .hexagon {
	background: #c4a489;
	height: .5rem;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	right: 0;
	top: -.8rem;
	width: 1rem
}

.timeline-wrapper .hexagon:after, .timeline-wrapper .hexagon:before {
	border-left: 2rem solid transparent;
	border-right: 2rem solid transparent;
	border-left-width: .5rem;
	border-right-width: .5rem;
	content: "";
	left: 0;
	position: absolute
}

.timeline-wrapper .hexagon:before {
	border-bottom: .25rem solid #c4a489;
	top: -.25rem
}

.timeline-wrapper .hexagon:after {
	border-top: .25rem solid #c4a489;
	bottom: -.25rem
}

.timeline-wrapper .flag-wrapper {
	position: relative;
	text-align: center
}

.timeline-wrapper .flag {
	background: #333333;
	border-radius: .5rem;
	font-weight: 600;
	padding: .25rem .5rem
}

.timeline-wrapper .flag span {
	position: relative;
	transition: .4s
}

.timeline-wrapper .flag span:after {
	content: "\226B";
	color: #c4a489;
	position: absolute;
	opacity: 0;
	right: -1rem;
	transition: .4s
}

.timeline-wrapper .flag:hover span {
	letter-spacing: .05rem;
	padding-right: 1.25rem
}

.timeline-wrapper .flag:hover span:after {
	opacity: 1;
	right: 0
}

.timeline-wrapper .time-wrapper {
	color: #fff;
	display: block;
	line-height: .5rem;
	margin-top: .3rem
}

.timeline-wrapper .time {
	background: #333333;
	border-radius: .5rem;
	display: inline-block;
	padding: .6rem
}

.timeline-wrapper .desc {
	background: #333333;
	border-radius: 1rem;
	margin: 1em 0 0;
	padding: .75em;
	text-align: center
}

.project {
	display: flex;
	border-radius: 1rem;
	margin: 1rem 0;
	padding: .5rem 1rem
}

.visual-aid {
	display: flex; /* Make the visual-aid container a flex container */
	align-items: center; /* Center items vertically */
	flex: 0 0 auto; /* Let the visual aid occupy only the necessary space */
}

.project-image {
	width: 125px; /* Adjust width as needed */
	height: 125px; /* Adjust height as needed */
	border-radius: 10px; /* Adjust border radius for rounded corners */
	margin-right: 20px; /* Adjust margin between image and text */
	margin-left: 10px;
}

.project-details {
	flex: 1; /* Expand to fill remaining space */
}

.project .name-link-wrapper {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.project .name-link-wrapper .links {
	font-size: 1.5rem;
	margin: 1rem .5rem
}

.project-desc {
	line-height: 1rem
}

.project-stars-forks {
	fill: #fff;
	font-family: Josefin Sans, sans-serif
}

.tag-wrapper {
	margin: 1rem 0 0
}

.tag {
	border-radius: .5rem;
	display: inline-block;
	margin-bottom: .25rem;
	padding: .5rem
}

.contact-icons {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center
}

.contact-icons .social-link {
	position: relative;
	height: 3rem;
	line-height: 3rem;
	margin: .25rem;
	text-align: center;
	width: 3rem
}

.contact-icons .social-link .social {
	font-size: 1.5rem
}

.contact-icons .social-link .social-svg {
	fill: #c4a489
}

.contact-icons .social-link:hover {
	cursor: pointer;
	animation: h 1s infinite alternate
}

.contact-icons .social-link:hover .social-svg {
	fill: #fff
}

.contact-icons .black:hover .social-svg {
	fill: #000
}

.contact-icons .linkedin:hover .social-svg {
	fill: #007bb6
}

.contact-icons .twitter:hover .social-svg {
	fill: #1da1f2
}

@media only screen and (min-width:48em) {
	.layout {
		margin: .5rem auto;
		padding: 2rem
	}

	.layout .card .description, .layout .card .subtitle {
		font-size: 1.25rem
	}

	.landing-title h1 {
		font-size: 3rem
	}

	.landing-icons .social-link {
		width: 4rem;
		height: 4rem;
		line-height: 4rem
	}

	.landing-icons .social-link .social {
		font-size: 2rem
	}

	#skills div[skill-weight="1"] {
		font-size: 1rem;
		line-height: 0
	}

	#skills div[skill-weight="2"] {
		font-size: 2rem;
		line-height: 1rem
	}

	#skills div[skill-weight="3"] {
		font-size: 3rem;
		line-height: 2rem
	}

	#skills div[skill-weight="4"] {
		font-size: 4rem;
		line-height: 3rem
	}

	#skills div[skill-weight="5"] {
		font-size: 5rem;
		line-height: 4rem
	}

	#skills .filter-button {
		border-radius: .5rem;
		cursor: pointer;
		display: unset;
		margin: 0 .5rem 1rem;
		padding: .5rem .25rem;
		text-align: center;
		width: 21%
	}

	#skills .filter-button:hover {
		letter-spacing: .25rem
	}

	#skills input[type=radio]:checked+.filter-button {
		color: #c4a489;
		font-weight: 600;
		background: linear-gradient(150deg, hsla(0, 0%, 8%, .4) 10%, hsla(0, 0%, 45%, .15) 80%);
		box-shadow: 1px 1px 2px 0 hsla(0, 0%, 82%, .4), -1px -1px 2px rgba(0, 0, 0, .4), inset 3px 3px 2px 0 rgba(0, 0, 0, .4), inset -1px -2px 2px hsla(0, 0%, 82%, .4)
	}

	#skills input[id=framework]:checked~div[skill-type=language], #skills input[id=framework]:checked~div[skill-type=tool], #skills input[id=language]:checked~div[skill-type=framework], #skills input[id=language]:checked~div[skill-type=tool], #skills input[id=tool]:checked~div[skill-type=framework], #skills input[id=tool]:checked~div[skill-type=language] {
		height: 0;
		margin: 0;
		opacity: 0;
		padding: 0;
		width: 0
	}

	.timeline-wrapper .timeline {
		margin: 0 auto;
		width: 39.25rem
	}

	.timeline-wrapper .timeline li:after {
		clear: both;
		content: "";
		display: block
	}

	.timeline-wrapper .direction-l {
		float: left;
		text-align: right;
		width: 18.5rem
	}

	.timeline-wrapper .direction-l .hexagon {
		left: auto;
		right: -1.6rem;
		top: .4rem
	}

	.timeline-wrapper .direction-l .flag-wrapper {
		display: inline-block;
		text-align: right
	}

	.timeline-wrapper .direction-l .time-wrapper {
		float: left;
		margin-top: -.1rem
	}

	.timeline-wrapper .direction-l .desc {
		text-align: right
	}

	.timeline-wrapper .direction-r {
		float: right;
		text-align: left;
		width: 18.5rem
	}

	.timeline-wrapper .direction-r .hexagon {
		left: -1.6rem;
		right: auto;
		top: .4rem
	}

	.timeline-wrapper .direction-r .flag-wrapper {
		display: inline-block;
		text-align: left
	}

	.timeline-wrapper .direction-r .time-wrapper {
		float: right;
		margin-top: -.1rem
	}

	.timeline-wrapper .direction-r .desc {
		text-align: left
	}

	.projects-wrapper {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: justify;
		justify-content: space-between
	}

	.projects-wrapper>* {
		width: 44%
	}

	.contact-icons .social-link {
		width: 4rem;
		height: 4rem;
		line-height: 4rem
	}

	.contact-icons .social-link .social {
		font-size: 2rem
	}
}

@media only screen and (min-width:62em) {
	.layout {
		padding: 3rem
	}

	.layout .card {
		padding: 1rem 3rem
	}

	#skills .filter-button {
		width: 21.5%
	}

	.timeline-wrapper .timeline {
		width: 49rem
	}

	.timeline-wrapper .direction-l, .timeline-wrapper .direction-r {
		width: 23.35rem
	}

	.projects-wrapper>* {
		width: 45%
	}
}

@media only screen and (min-width:75em) {
	.layout {
		padding: 5rem
	}

	#skills .filter-button {
		width: 22%
	}

	.timeline-wrapper .timeline {
		width: 58rem
	}

	.timeline-wrapper .direction-l, .timeline-wrapper .direction-r {
		width: 27.9rem
	}

	.projects-wrapper>* {
		width: 46%
	}
}

@keyframes h {
	0% {
		bottom: 0
	}

	50% {
		bottom: .5rem
	}

	to {
		bottom: 0
	}
}