:root {
	color-scheme: dark light;

	--background : #e5e5e5;
	--background-alpha : #e5e5e5aa;
	--textcolor : #001f3f;
	--textHover : #003d7a;
	--shadow : 16px 16px 32px #a0a0a0, -16px -16px 32px #ffffff;
	--shadow-in : inset 8px 8px 16px #a0a0a0, inset -8px -8px 16px #ffffff;

	--borderadius : 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background : #001f3f;
		--background-alpha : #001f3faa;
		--textcolor : #f6f5f7;
		--textHover : #f6d5ca;
		--shadow : 16px 16px 32px #00162c, -16px -16px 32px #002852;
		--shadow-in : inset 8px 8px 16px #00162c, inset -8px -8px 16px #002852;
	}
}

/*#region override */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local(''),
		 url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
		 url('../fonts/open-sans-v34-latin-regular.woff') format('woff'),
		 url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype');
}

::-webkit-scrollbar-track {
	background-color: var(--background);
}
::-webkit-scrollbar {
	width: 12px;
	background-color: var(--background);
}
::-webkit-scrollbar-thumb {
	background-color: var(--textcolor);
}

html {
	box-sizing : border-box;
	scroll-behavior: smooth;
}
*, *:before, *:after {
	box-sizing: border-box;
}
textarea,input,button,select,input:-webkit-autofill::first-line{
	box-shadow: var(--shadow-in);
	background-color: var(--background);
	font-family:'Open sans',sans-serif;
	border: none;
	outline: none;
}
body {
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--textcolor);
	background-color: var(--background);
	font-family:'Open sans', sans-serif;
}

img{
	max-width:100%;
	height:auto;
	vertical-align:middle;
	aspect-ratio: 16/9;
}
iframe, video, audio {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	background-color: var(--background);
}
textarea {
	display: block;
	resize: none;
	width: 100%;
	max-width: 40em;
	height: 8em;
    padding: 1em;
}

hr {
	margin: 10px 0 20px 0;
}
i {
	display: flex !important;
	align-items: center;
	height: 100%;
}
a {
	text-decoration: none;
	color: var(--textcolor);
}
a:hover {
	text-decoration: underline;
	color: var(--textHover);
}
h1, h2, p {
	margin: 0;
}
p {
	padding: 1em;
}
footer, h3, h1 {
	text-align: center;
}

/*#endregion*/
/*#region utilities */

.flex {
	padding: 0 3em;
	display: flex;
	gap: 3em;
	justify-content: center;
	flex-wrap: wrap;
}
.flex-1 {
	flex: 1;
}

.container {
	box-shadow: var(--shadow);
	border-radius: var(--borderadius);
	padding: 1em;
	margin-bottom: 3em;
}
.photo {
	border-radius: var(--borderadius);
	aspect-ratio: 1/1;
}

/*#endregion*/
/*#region navbar */

nav {
	height: 3em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2em;
	box-shadow: var(--shadow);
	background-color: var(--background);
	position: fixed;
	z-index: 1;
	width: 100%;
}
nav > .logo > h3 {
	display: flex;
	gap: 1em;
}
nav > .nav-link {
	display: flex;
	gap: 1em;
}
nav > #cross {
	display : none;
	cursor : pointer;
}
nav > #cross div {
	width : 25px;
	height : 3px;
	background-color : var(--textcolor);
	margin : 5px;
	transition : all .3s ease;
}

@media screen and (max-width:768px) {
	body {
		overflow-x : hidden;
	}
	#cross {
		display : block !important;
	}
	.nav-link {
		position : absolute;
		height : 100vh;
		top: 48px;
	}
	.nav-active {
		background-color: var(--background);
		display: flex;
		flex-direction: column;
		right: 0;
		width: 75%;
		text-align: center;
		padding: 1em;
		height: auto;
	}
	.nav-link .item {
		display: none;
	}
	.nav-link.nav-active .item {
		display: block;
	}
}
.toggle .line1 {transform : rotate(-45deg) translate(-5px, 6px);}
.toggle .line2 {opacity : 0;}
.toggle .line3 {transform : rotate(45deg) translate(-5px, -6px);}

/*#endregion*/
/*#region main */

#Main {
	position : relative;
	top: 6em;
}

.sectionTitle {
	display : flex;
	width : 100%;
	align-items: center;
    justify-content: center;
	margin-bottom: 3em;
}
.sectionTitle h2 {
	display: flex;
	gap: 1em;
	align-items: center;
}
.sectionTitle span {
	flex : 1 auto;
	min-width : 10%;
	height : 1px;
	padding: 0 15px;
}
.bar {
	border-top : 2px solid var(--textcolor);
	height: 1px;
    display: block;
    top: 1px;
    width: 100%;
} 

#icolist {
	display: flex;
	gap: 2em;
	padding: 0 1em;
	align-items: center;
	justify-content: center;
	margin: 1em 0;
}

/*#endregion*/
/*#region grid */

.grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em;
	margin-bottom: 3em;
}
.grid-item {
	margin-bottom: 0;
	flex: 0 0 24em;
}
.grid.large .grid-item {
	flex: 0 0 32em;
}
.grid.small .grid-item{
	flex: 0 0 16em;
}
.grid-item .title {
	text-align: center;
}
.grid-item img {
	margin-bottom: 1em;
}
.grid-item > h3 > * {
	margin: 0 .5em;
}
.grid-item > h3 > img {
	width: 3em;
	aspect-ratio: 1/1;
}
.grid#SkillsContent > .grid-item {
	width: 100%;
}

/*#endregion*/
/*#region proejcts */

#demoreel > p {
	text-align: center;
	margin: 0.5em;
}

.project {
	padding: 0;
	cursor: pointer;
	transition: opacity .2s ease-in-out;
	user-select: none;
}
.project:hover {
	opacity: 65%;
}

#ModalContainer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background-color: var(--background-alpha);
	z-index: 100;
}
#ModalContainer.open {
	display: flex;
}
#Modal {
	background-color: var(--background);
	min-width: 24em;
}
#Modal .header {
	justify-content: space-between;
	padding: 0;
	margin: 0 0 1em 0;
}
#ModalClose:hover {
	cursor: pointer;
	color: var(--textHover);
	text-decoration: underline;
}
#ModalContent > *{
	margin: 1em 0;
}
#ModalContent > p {
	max-width: 720px;
	max-height: 7em;
	overflow: auto;
	border: 1px solid var(--textcolor);
	padding: .5em;
}

/*#endregion*/
/*#region contact */

.data-list .flex {
	gap: 1em;
	margin: 1em 0;
	padding: 0 2em;
	align-items: center;
	justify-content: unset;
}
.data-list i {
	display: flex;
	justify-content: center;
	width: 1em;
}

#mailZone > .flex {
	gap: 1em;
}
.input {
	margin: 1em;
	position: relative;
}
.input.full {
	width: 100%;
}
input {
	border: 0;
	height: 3em;
	padding: .5em;
	display: block;
}
label {
	text-decoration: underline;
}
input[type="submit"] {
	margin: 0 auto;
	cursor: pointer;
	width: 4em;
	font-size: large;
	z-index: 100;
	box-shadow: var(--shadow);
	border-radius: var(--borderadius);
}
input[type="submit"]:hover {
	text-decoration: underline;
	color: var(--textHover);
}
input[type="submit"]:active {
	box-shadow: var(--shadow-in);
}

/*#endregion*/
/*#region footer */

footer {
	box-shadow: var(--shadow);
	padding: 1em;
}

/*#endregion*/
/*#region Mobile */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	nav {
		padding: 0 .5em;
	}
	#icolist {
		padding: 0;
	}
	.flex {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	.data-list .flex {
		padding: 0;
	}
	.grid {
		grid-template-columns : repeat(auto-fill, 16em)
	}
	.grid.large {
		grid-template-columns : repeat(auto-fill, 16em)
	}
	#Modal {
		min-width: 16em;
	}
	.container {
		max-width: 16em;
	}
	#icolist {
		gap: 0;
		justify-content: space-evenly;
	}
	#Modal .header {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 1em;
	}
}

/*#endregion*/