:root {
	--white: #fff;
	--black: #10141C;
	--black-transparent: rgba(0 0 0 / 5%);
	--gray: #F2F2F2;
	--gray-transparent: rgba(242 242 242 / 50%);
	--dark-blue: #3024CE;
	--light-blue: #97A8FF;
	--font: "Helvetica Neue", Arial, sans-serif;
}

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

html, body {
	width: 100%;
	height: 100%;
	font-family: var(--font);
	background: var(--white);
	scroll-behavior: smooth;
}

body.no-overflow {
	overflow: hidden;
}

h1 {
	font-size: 300px;
	font-weight: 400;
	color: var(--black-transparent);
	position: absolute;
	left: 100px;
	user-select: none;
}

h2 {
	font-size: 200px;
	font-weight: 400;
}

h3 {
	font-size: 100px;
	font-weight: 400;
}

h4 {
	font-size: 50px;
	font-weight: 400;
	z-index: 2;
}


p {
	font-size: 20px;
}

a {
/* 		text-decoration: underline; */
/* 		text-underline-offset: 20%; */
	color: var(--dark-blue);
	width: fit-content;
	text-decoration: none;
}

a:hover {
	font-style: italic;
}

section {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 100px;
	position: relative;
}

section:not(.landing) > h4 {
	margin-top: 200px;
}

section.landing {
	height: 70%;
}

section.about {
	height: 70%;
}

section.projects {
	gap: 100px;
}

nav {
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	padding: 20px 100px 0 100px;		
	position: fixed;
	z-index: 3;
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	nav {
		background-color: rgba(255, 255, 255, 0.5);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
	}
}

nav .inner {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20px;
	align-items: center;
	border-bottom: 1px solid var(--black);
}

nav img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

button {
	border: none;
	background: none;
}

nav .hamburger {
	display: flex;
	flex-direction: column;
	gap: 10px;		
	width: 50px;
	height: auto;
	cursor: pointer;
}

nav .hamburger .line {
	width: 100%;
	height: 3px;
	background: var(--black);
}

.nav-page {
	background: var(--black);
	width: 100%;
	height: 100%;
	display: none;
	overflow: hidden;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	z-index: 5;
}

.nav-page.visible {
	display: flex;
}

nav.invisible {
	display: none;
}

.nav-page nav .inner, .nav-page footer .inner {
	border-color: var(--white);
}

.nav-page footer .inner .message, .nav-page footer .inner .social-media a > svg path, .nav-page footer .inner .social-media ion-icon {
	color: var(--white);
	fill: var(--white);
}

.nav-page footer .inner .social-media a > svg:hover path, .nav-page footer .inner .social-media ion-icon:hover {
	color: var(--light-blue);
	fill: var(--light-blue);
}

.nav-page nav {
	background: transparent;
	position: revert;
}

.nav-page nav .hamburger .line {
	background: var(--white);
	position: relative;
}

.nav-page nav .hamburger .line.top {
	transform: rotate(45deg);
	top: 6px;
}

.nav-page nav .hamburger .line.bottom {
	transform: rotate(-45deg);
	bottom: 6px;		
}

.nav-page .links {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 0 100px;
}

.nav-page .links a {
	font-size: 80px;
	color: var(--white);
}


.projects .container {
	display: flex;
	gap: 50px;
	flex-direction: column;
}

.projects .container .row {
	display: flex;
	gap: 50px;
}

.projects .container .project {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	background: var(--gray);
	width: 100%;
	height: calc((100vw - 50px) - 50vw - 75px);
	cursor: pointer;
	padding: 20px;
}

.projects .container .project:hover {
	outline: 2px solid var(--dark-blue);
}

.projects .container .project img {
	width: 100%;
/* 		height: 100%; */
}

.sayhi {
	gap: 200px;
	padding-top: 200px;
}

.sayhi .links {
display: flex;
flex-direction: column;
gap: 50px;
}

.sayhi a {
	font-size: 100px;
	z-index: 2;
}

footer {
	width: 100%;
	padding: 0 100px 20px; 
}

footer .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--black);
}

footer .inner .message {
	display: flex;
	align-items: center;
	gap: 5px;
}

footer .inner .social-media {
	display: flex;
	gap: 40px;
	align-items: center;
}

footer .inner .social-media > svg, footer .inner .social-media ion-icon {
	width: 40px;
	height: 40px;
	color: var(--black);
	cursor: pointer;
}


footer .inner .social-media a > svg path {
	fill: var(--black);
}

footer .inner .social-media ion-icon:hover, footer .inner .social-media a > svg:hover path {
	color: var(--dark-blue);
	fill: var(--dark-blue);
}

@media only screen and (max-width: 1100px) {
h1 {
	font-size: 25vw;
}

h2 {
	font-size: 20vw;
}

h4 {
	font-size: 30px;
}

.projects .row {
	flex-direction: column;
}

.projects .container .project {
	width: calc(100vw - 200px);
	height: calc(100vw - 200px);
}

.sayhi a {
	font-size: 8.5vw;
}

.sayhi {
	gap: 50px;	
}
}

@media only screen and (max-width: 600px) {
section:not(.landing) > h4 {
	margin-top: 100px;
}

section {
	height: auto !important;
	padding: 100px 20px !important;
}

section.landing {
	gap: 10px;
}

nav, footer {
	padding: 20px;
}

.nav-page .links {
	padding: 0 20px;
	gap: 20px;
}

.nav-page .links a {
	font-size: 60px;
}

h1 {
	left: 20px;
}

.projects .container .project {
	width: 100%;
	height: calc(100vw - 40px);
}

footer .inner {
	gap: 20px;
	flex-direction: column;
}

footer .inner .message ion-icon {
	transform: rotate(90deg);
}
}

::selection {
background: var(--black);
color: var(--white);
}

.nav-page ::selection {
background: var(--white);
color: var(--black);
}

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

::-webkit-scrollbar-track {
background: var(--white);
}

::-webkit-scrollbar-thumb {
background: var(--black);
border-radius: 20px;
}

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