:root {
	--main: #2a2a2a;
	--main_off: #313131;
	--accent_bright: #fb8122;
	--accent_shade: #e1e2e2;
	--shadow: 5px 5px 10px black;
}
body {
	margin: 0;
	padding: 0;
	font-family: monospace;
	font-size: 20px;
	line-height: 1.5;
	background-color: var(--main);
	color: #f4f4f4;
}

/*GLOBAL*/

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*-------------------------HEADER------------------------------*/

header a {
	text-decoration: none;
	color: #ffffff;
	text-transform: uppercase;
}

.nav-bar a {
	border: var(--main_off) solid 2px;
}
.nav-bar {
	display: flex;
	list-style: none;
	gap: 2rem;
	align-items: center;
	position: fixed;
	top: 0%;
	bottom: 0%;
	right: 0;
	left: 60%;
	flex-direction: column;
	background-color: var(--main_off);
	justify-content: center;
	z-index: 1000;

	transform: translateX(100%);
	transition: transform 350ms ease-in;
}
.nav-bar[data-visible="true"] {
	transform: translateX(0%);
	box-shadow: 10px 0px 50px 20px black;
}

.toggle {
	display: block;
	position: fixed;
	background-image: url("../img/icon_menu.png");
	background-color: var(--main_off);
	box-shadow: var(--shadow);
	border-radius: 50%;

	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-size: 100%;
	border: 0;
	height: 50px;
	width: 50px;
	top: 1%;
	right: 2%;
	z-index: 9999;
}

/*-------------------------HEADER:END------------------------------*/

/*-------------------------ABOUT------------------------------*/
.about {
	/* align-items: center; */
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	margin: 20vh 5vh 0vh 5vh;
	transition: margin ease-in-out 350ms;
}
.about h3 {
	text-align: center;
	color: var(--accent_bright);
	margin: 0;
	font-size: 2vh;
}

.about h1 {
	text-align: center;
	font-size: 5vw;
	line-height: 0;
}

.cv {
	text-align: center;
}
.socials {
	align-self: center;
	margin-top: 1vh;
}

.socials ul {
	display: flex;
}
.about img {
	height: 40px;
}
.about img:hover {
	height: 45px;
	transition: height 350ms ease-in-out;
}
.about > .container {
	border-top: #fb8122 solid 10px;
	width: 100%;
	margin: 0;
	text-align: center;
	line-height: 2;
}

.cv a {
	text-decoration: none;
	color: var(--accent_shade);
	background-color: var(--accent_bright);
	box-shadow: 5px 5px 5px black;
	padding: 2vh;
}

.cv a:hover {
	color: var(--accent_bright);
	background-color: var(--main);
	box-shadow: none;
	font-size: 1.2rem;
	border: var(--accent_bright) 1px solid;
	transition: font-size 350ms ease-in-out;
}

/*-------------------------ABOUT:END------------------------------*/

/*-------------------------SKILLS------------------------------*/
.skills {
	display: flex;
	flex-direction: column;
	padding: 0 5vh 5vh 5vh;
}
.skills > .heading {
	text-align: center;
	justify-self: center;
	padding-bottom: 5vh;
}
.skills h4 {
	font-size: 2.5vh;
}
.skill-boxes {
	gap: 4rem;
	justify-content: center;
}
.icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3rem;
}

.skills img {
	width: 90px;
	object-fit: contain;
	height: 90px;
	box-shadow: var(--shadow);
	border-radius: 50%;
	padding: 15%;
}
.skills img:hover {
	background-color: var(--main_off);
	box-shadow: none;
}

/*-------------------------SKILLS:END------------------------------*/

/*-------------------------PORTFOLIO------------------------------*/
.projects {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 5vh;
}

.projects > .heading {
	text-align: center;
}
.project-boxes {
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 2vh;

	overflow-x: auto;
	overscroll-behavior-inline: contain;

	scroll-snap-type: inline mandatory;
	scroll-padding-inline: 2%;

	scroll-behavior: smooth;
	padding-bottom: 5%;
	margin: 0 2vw 0 2vw;
}
.box {
	font-size: 2vh;

	color: white;
	background-color: var(--main_off);
	box-shadow: var(--shadow);
	padding: 5%;
	align-self: center;

	scroll-snap-align: start;
}
.box > a {
	background-color: var(--accent_bright);
	padding: 2%;
	color: black;
	text-decoration: none;
	box-shadow: var(--shadow);
}
.box > a:hover {
	color: var(--accent_bright);
	background-color: var(--main);
	box-shadow: none;
	font-size: 1rem;
	border: var(--accent_bright) 1px solid;
	transition: font-size 350ms ease-in-out;
}
/*-------------------------PORTFOLIO:END------------------------------*/

@media (min-width: 768px) {
	/*-------------------------HEADER------------------------------*/
	.toggle {
		display: none;
	}

	.nav-bar {
		justify-content: space-around;
		font-size: 1rem;
		inset: 0 0 0 0;
		background-color: var(--main_off);
		box-shadow: var(--shadow);
		transform: translateX(0%);
		flex-direction: row;
		position: fixed;
		padding: 0.5em 0 0.5em 0;
		margin: 0 1em 0 1em;
		height: fit-content;
	}
	.nav-bar a:hover {
		font-size: larger;
		transition: font-size ease-in 350ms;
	}
	/*-------------------------HEADER:END------------------------------*/

	/*-------------------------ABOUT------------------------------*/

	.about {
		min-height: auto;
		padding-top: 10vh;
		margin: 0vh 15vh 5vh 15vh;
	}
	.about h3 {
		text-align: start;
		max-width: 50%;
		font-size: 3vh;
	}

	.about h1 {
		text-align: start;
	}

	.cv h4 {
		margin: 0 0 2vh 0;
	}
	.cv,
	.socials {
		align-self: flex-end;
		text-align: end;
	}

	/*-------------------------ABOUT:END------------------------------*/

	/*-------------------------SKILLS------------------------------*/
	.skills {
		min-height: 100vh;
		padding-top: 2em;
	}

	.skill-boxes {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	/*-------------------------SKILLS:END------------------------------*/

	/*-------------------------PORTFOLIO------------------------------*/
	.projects {
		padding-top: 2em;
	}
	.project-boxes {
		grid-auto-columns: 50%;
	}
	/*-------------------------PORTFOLIO:END------------------------------*/
}