* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	font-size: 62.5%;
	scroll-behavior: smooth
}

body {
	background-color: #fff;
	font-family: Poppins, sans-serif;
	position: relative
}

.container {
	margin: 0 auto;
	max-width: 107rem;
	padding: 0 4rem
}

* {
	scrollbar-color: #8e8e8e #fff;
	scrollbar-width: thin
}

::-webkit-scrollbar {
	width: 8px
}

::-webkit-scrollbar-track {
	background-color: #fff;
	border-radius: 20px
}

::-webkit-scrollbar-track:active,
::-webkit-scrollbar-track:hover {
	background-color: #fff
}

::-webkit-scrollbar-thumb {
	background-color: #8e8e8e;
	border-radius: 20px
}

::-webkit-scrollbar-thumb:hover {
	background-color: #878787
}

::-webkit-scrollbar-thumb:active {
	background-color: #8e8e8e
}

.mobile-menu {
	cursor: pointer;
	display: none;
	font-size: 2.3rem
}

.mobile-menu:hover {
	color: #147efb;
	transition: all .3s
}

@media (max-width:900px) {
	.mobile-menu {
		display: flex
	}
}

.closed-menu {
	left: -100% !important
}

.open-menu {
	left: 0 !important
}

.mobile-nav {
	align-items: center;
	background-color: #fff;
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	transition: all .3s ease-in-out;
	width: 100%;
	z-index: 300
}

.mobile-nav span {
	cursor: pointer;
	font-size: 3.3rem;
	position: absolute;
	right: 4rem;
	top: 2rem
}

.mobile-nav span:hover {
	color: #147efb;
	transition: all .3s
}

.mobile-nav ul {
	display: flex;
	flex-direction: column;
	font-size: 2.3rem;
	gap: 4rem;
	list-style: none
}

.mobile-nav ul a {
	color: #000;
	font-weight: 500;
	text-decoration: none
}

.mobile-nav ul a:hover {
	color: #147efb;
	transition: all .3s
}

nav {
	align-items: center;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .09);
	display: flex;
	font-size: 1.7rem;
	height: auto;
	justify-content: space-between;
	left: 0;
	padding: 25px 40px 25px 50px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 200
}

@media (max-width:400px) {
	nav {
		padding: 25px 30px
	}
}

nav ul {
	display: flex;
	gap: 2rem;
	list-style: none
}

nav ul a {
	color: #2d2e32;
	font-weight: 600;
	text-decoration: none;
	transition: all .23s
}

@media (max-width:900px) {
	nav ul a {
		display: none
	}
}

nav ul a:hover {
	color: #147efb
}

.logo {
	color: #2d2e32;
	cursor: pointer
}

.hero {
	background-color: #f9f9f9;
	display: flex;
	flex-direction: column;
	height: 100vh;
	position: relative;
	width: 100%
}

@media (max-width:900px) {
	.hero {
		height: auto;
		padding: 11rem 0
	}
}

.hero-main {
	align-items: center;
	display: flex;
	gap: 10rem;
	justify-content: center;
	position: relative
}

@media (max-width:900px) {
	.hero-main {
		flex-direction: column-reverse;
		gap: 3rem;
		height: auto;
		text-align: center
	}
}

.content {
	align-items: center;
	display: flex;
	gap: 10rem;
	height: 65rem;
	justify-content: center;
	position: relative
}

@media (max-width:900px) {
	.content {
		flex-direction: column;
		gap: 3rem;
		height: auto;
		text-align: center
	}
}

@media (min-width:1600px) {
	.content {
		margin-top: 6rem
	}
}

@media (min-width:1900px) {
	.content {
		margin-top: 10rem
	}
}

.hero-text {
	display: flex;
	flex-direction: column;
	max-width: 50rem;
	position: relative
}

.hero-text h1 {
	color: #2d2e32;
	font-size: 5.5rem;
	line-height: 1.2;
	margin-bottom: 2rem;
	margin-top: 2rem
}

@media (max-width:500px) {
	.hero-text h1 {
		font-size: 4rem
	}
}

.hero-text p {
	color: #555;
	font-family: Mulish, sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.6
}

@media (max-width:900px) {
	.hero-text p {
		margin-bottom: 5rem
	}
}

.hero-text span {
	cursor: pointer;
	display: flex;
	gap: 1.3rem;
	margin: 2.5rem 0
}

.hero-text span a {
	color: #2d2e32;
	font-size: 3rem
}

@media (max-width:900px) {
	.hero-text span {
		gap: 1.6rem;
		justify-content: center;
		margin-bottom: 4rem;
		margin-top: -2rem
	}
}

.hero-text span a {
	transition: all .2s
}

.hero-text span a:hover {
	color: #147efb
}

.hero-text img {
	height: 6rem;
	position: absolute;
	right: 13rem;
	top: 8.7rem;
	width: 6rem
}

@media (max-width:900px) {
	.hero-text img {
		right: 3rem
	}
}

@media (max-width:500px) {
	.hero-text img {
		height: 4.5rem;
		right: 4rem;
		top: 6.4rem;
		width: 4.5rem
	}
}

@media (max-width:400px) {
	.hero-text img {
		right: 3rem
	}
}

@media (max-width:380px) {
	.hero-text img {
		right: 3rem
	}
}

@media (max-width:375px) {
	.hero-text img {
		right: 1.7rem
	}
}

.hero-img {
	-webkit-animation: morph 8s ease-in-out infinite;
	animation: morph 8s ease-in-out infinite;
	background-image: url(../images/pfp_webp.f334283842f7b24cafd1.webp);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 3px solid #2d2e32;
	border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
	height: 35rem;
	position: relative;
	transition: all 1s ease-in-out;
	width: 35rem
}

@media (max-width:500px) {
	.hero-img {
		height: 28rem;
		width: 28rem
	}
}

@-webkit-keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
	}

	50% {
		border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
	}

	to {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
	}
}

@keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
	}

	50% {
		border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
	}

	to {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
	}
}

.skills {
	align-items: center;
	bottom: 0;
	color: #767676;
	display: flex;
	font-size: 1.7rem;
	left: 0;
	position: absolute
}

@media (max-width:900px) {
	.skills {
		flex-direction: column;
		position: static
	}
}

.skills p {
	border-right: 2px solid rgba(45, 46, 50, .5);
	color: #2d2e32;
	font-family: Mulish, sans-serif;
	font-weight: 600;
	margin-right: 7rem;
	padding-right: 2rem
}

@media (max-width:900px) {
	.skills p {
		border-bottom: 2px solid rgba(45, 46, 50, .5);
		border-right: none;
		margin-bottom: 3rem;
		margin-right: 0;
		padding-bottom: 1rem;
		padding-right: 0
	}
}

.skills ul {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	list-style: none
}

@media (max-width:900px) {
	.skills ul {
		justify-content: center
	}
}

.skills ul li {
	cursor: pointer
}

.skills ul li img {
	height: 5rem;
	transition: all .3s ease-in-out;
	width: 11rem
}

.skills ul li img:hover {
	-webkit-transform: translateY(-1rem);
	transform: translateY(-1rem)
}

.about {
	background-color: #fff;
	padding: 15rem 0
}

@media (max-width:1020px) {
	.about {
		padding: 8rem 0
	}
}

.about-content {
	align-items: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center
}

@media (max-width:1020px) {
	.about-content {
		grid-template-columns: 1fr;
		text-align: center
	}
}

.text-side {
	padding-right: 1.5rem
}

@media (max-width:1020px) {
	.text-side {
		margin: 0 auto;
		max-width: 54rem
	}
}

@media (max-width:400px) {
	.text-side {
		padding-right: 0
	}
}

.text-side span {
	-webkit-text-decoration: underline #147efb;
	text-decoration: underline #147efb
}

.text-side h3 {
	color: #147efb;
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase
}

.text-side h4 {
	color: #2d2e32;
	font-family: Poppins, sans-serif;
	font-size: 2.5rem;
	line-height: 1.4;
	margin-bottom: 2rem
}

.text-side p {
	color: #767676;
	font-family: Mulish, sans-serif;
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.5
}

.img-side {
	position: relative
}

.img-side span {
	background-color: #fff;
	border-radius: 50%;
	bottom: -33px;
	height: 19rem;
	position: absolute;
	right: 33px;
	width: 19rem
}

@media (max-width:1020px) {
	.img-side span {
		bottom: -3px;
		height: 17rem;
		right: 190px;
		width: 17rem
	}
}

@media (max-width:880px) {
	.img-side span {
		bottom: -3px;
		right: 100px
	}
}

@media (max-width:750px) {
	.img-side span {
		display: none
	}
}

.img-side span img {
	-webkit-animation: rotate 9s linear infinite;
	animation: rotate 9s linear infinite;
	width: 19rem
}

@media (max-width:1020px) {
	.img-side span img {
		width: 17rem
	}
}

@-webkit-keyframes rotate {
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@keyframes rotate {
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

.img-side__main-img {
	border-radius: 1.7rem;
	height: 35rem;
	width: 41rem
}

@media (max-width:1020px) {
	.img-side__main-img {
		margin-bottom: 3.5rem
	}
}

@media (max-width:460px) {
	.img-side__main-img {
		height: auto;
		width: 90%
	}
}

.work-emoji {
	bottom: 35px;
	position: absolute;
	right: 98px;
	width: 6rem !important;
	z-index: 10
}

@media (max-width:1020px) {
	.work-emoji {
		bottom: 25px;
		right: 245px
	}
}

@media (max-width:880px) {
	.work-emoji {
		bottom: 57px;
		right: 156px
	}
}

@media (max-width:750px) {
	.work-emoji {
		display: none
	}
}

.project {
	background-color: #f9f9f9;
	padding: 15rem 0
}

@media (max-width:1020px) {
	.project {
		padding: 8rem 0
	}
}

.project-content {
	display: flex;
	flex-direction: column
}

@media (max-width:600px) {
	.project-content {
		text-align: center
	}
}

.project-content p {
	color: #147efb;
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase
}

.project-content h3 {
	color: #2d2e32;
	font-size: 2.5rem;
	margin-bottom: 6rem
}

.projects-grid {
	grid-gap: 5rem;
	display: grid;
	gap: 5rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	height: auto;
	width: 100%
}

.projects-grid .pro {
	background-color: #fff;
	border-radius: 1.7rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	display: flex
}

.projects-grid .pro__1 {
	flex-direction: row;
	gap: 8rem;
	height: 40rem;
	padding: 2rem
}

@media (max-width:1020px) {
	.projects-grid .pro__1 {
		flex-direction: column !important;
		gap: 3rem;
		height: 75rem;
		margin: 0 auto;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content
	}
}

@media (max-width:400px) {
	.projects-grid .pro__1 {
		width: 100%
	}
}

.projects-grid .pro__img {
	background-color: hsla(0, 0%, 46%, .2);
	border-radius: 1.7rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	height: auto;
	overflow: hidden;
	width: 53rem
}

@media (max-width:650px) {
	.projects-grid .pro__img {
		width: 100%
	}
}

.projects-grid .pro__img img {
	height: auto;
	width: 100%
}

.projects-grid .pro__text {
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: center;
	text-align: center;
	width: 30rem
}

@media (max-width:1020px) {
	.projects-grid .pro__text {
		margin: 0 auto
	}
}

@media (max-width:400px) {
	.projects-grid .pro__text {
		width: 100%
	}
}

.projects-grid .pro__text img {
	position: absolute;
	right: -19px;
	top: -2px;
	width: 7rem
}

.projects-grid .pro__text h3 {
	align-items: center;
	color: #2d2e32;
	display: flex;
	font-size: 1.7rem;
	gap: .2rem;
	justify-content: center;
	margin-bottom: 2rem;
	position: relative;
	text-transform: uppercase
}

.projects-grid .pro__text p {
	color: #767676;
	font-size: 1.7rem;
	font-weight: 500;
	text-align: center;
	text-transform: none
}

.stack {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 1rem
}

.stack p {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	color: #000 !important;
	font-family: Mulish, sans-serif !important;
	font-weight: 600 !important;
	padding: 1rem 1.3rem
}

.links {
	gap: 1rem;
	justify-content: space-evenly;
	margin-top: 3rem
}

.links,
.links a {
	align-items: center;
	display: flex
}

.links a {
	color: #2d2e32;
	font-size: 1.7rem;
	font-weight: 500;
	gap: 5px;
	text-decoration: none
}

.links a i {
	font-size: 2.8rem
}

.links a .link-icon {
	font-size: 2rem !important
}

.links a img {
	width: 3.5rem
}

.links a:hover {
	color: #147efb;
	transition: all .3s
}

.reversed-proj {
	flex-direction: row-reverse !important
}

@media (max-width:460px) {
	.container {
		padding: 0 1.7rem
	}
}

.new-projects {
	color: #2d2e32;
	font-size: 2.6rem;
	text-align: center
}

.date-class {
	color: hsla(0, 5%, 8%, .773);
	font-size: 1.4rem;
	margin-left: .2rem
}

.contact {
	background-color: #fff;
	padding: 11rem 0
}

@media (max-width:1020px) {
	.contact {
		padding: 8rem 0
	}
}

.contact__content {
	display: flex;
	flex-direction: column
}

@media (max-width:750px) {
	.contact__title {
		text-align: center
	}
}

.contact__title p {
	color: #147efb;
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase
}

.contact__title h3 {
	color: #2d2e32;
	font-size: 2.5rem
}

.contact__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8rem;
	margin-top: 6rem
}

@media (max-width:750px) {
	.contact__icons {
		flex-direction: column;
		gap: 5rem;
		justify-content: center;
		text-align: center
	}
}

.contact__icon-box {
	align-items: center;
	display: flex;
	gap: 1.5rem
}

@media (max-width:750px) {
	.contact__icon-box {
		flex-direction: column
	}
}

.contact__icon-box span {
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	color: #147efb;
	display: flex;
	height: 5rem;
	justify-content: center;
	width: 5rem
}

.contact__info {
	display: flex;
	flex-direction: column;
	gap: .5rem
}

.contact__info h3 {
	color: #2d2e32;
	font-size: 1.7rem
}

.contact__info a,
.contact__info p {
	color: #767676;
	cursor: pointer;
	font-size: 1.7rem;
	text-decoration: none
}

.contact__info a:hover,
.contact__info p:hover {
	color: #147efb;
	transition: all .3s
}

footer {
	background-color: #2d2e32;
	padding: 5rem 0;
	width: 100%
}

footer h3 {
	color: #fff;
	font-size: 1.7rem
}

.footerc {
	align-items: center;
	display: flex;
	justify-content: space-between
}

@media (max-width:550px) {
	.footerc {
		flex-wrap: wrap;
		gap: 2rem;
		justify-content: center;
		text-align: center
	}
}

.footerc__socials {
	align-items: center;
	display: flex;
	gap: 2rem;
	justify-content: center;
	margin-top: 1rem
}

.footerc__socials a {
	color: #fff;
	font-size: 2.3rem
}

.footerc__socials a:hover {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	transition: all .2s ease-in-out
}

/*# sourceMappingURL=main.51b3af34.css.map*/