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

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Advent Pro", sans-serif;
	background-color: #1b2430;
}

a {
	text-decoration: none;
	color: transparent;
}

.page {
	background-color: #1b2430;
	height: 100vh;
}

.delimitator-page {
	background-image: url("../img/group-second-page.png");
	background-attachment: fixed;
	background-color: #1c1c1c;
	height: 80vh;
	width: auto;
}

.accent-font {
	color: #f3c03d;
	font-weight: 700;
	cursor: pointer;
}

/* ^ FIRST PAGE */

.about-page {
	background-image: url("../img/city.png");
	background-position: bottom no-repeat;
	background-attachment: fixed;
}

/* ^ nav */

nav {
	display: flex;
	justify-content: center;
	gap: 18px;
	align-items: center;
	height: 15vh;
}

nav button {
	height: 60px;
	width: 200px;
	border-radius: 10px;
	font-family: "Advent Pro", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	border: 0;
}

nav button:hover {
	font-size: 1.5rem;
	transition: 0.3s;
	background-color: #1b2430;
	cursor: pointer;
}

nav button:first-child {
	color: #816797;
	transform: rotate(2deg);
	animation-name: rotate-1;
	animation-duration: 0.6s;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
}

nav button:first-child:hover {
	color: white;
}

nav button:nth-child(2) {
	color: #51557e;
	transform: rotate(-3.5deg);
	animation-name: rotate-2;
	animation-duration: 1s;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
}

nav button:nth-child(2):hover {
	color: white;
}

nav button:nth-child(3) {
	color: #f3c03d;
	transform: rotate(-4.5deg);
	animation-name: rotate-3;
	animation-duration: 0.8s;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
}

nav button:nth-child(3):hover {
	color: white;
}

/* ^ nav buttons animation */

@keyframes rotate-1 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(5deg);
	}
}

@keyframes rotate-2 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-2deg);
	}
}

@keyframes rotate-3 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-2deg);
	}
}

/* ^ info section on first page (about me) */

section {
	display: flex;
	justify-content: center;
	margin-top: 100px;
	height: 50vh;
	align-items: center;
}

.about-container {
	width: 30vw;
	color: #fefefe;
	font-size: 20px;
}

.profile-pic-section {
	width: 350px;
	height: 350px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid #fefefe;
	overflow: hidden;
	transition: 0.1s;
}

.profile-pic-section:hover {
	border: 2px solid #f3c03d;
	background-color: #51557e;
}

.profile-pic {
	height: 400px;
	width: auto;
	filter: grayscale();
}

.fa-brands {
	font-size: 2.5rem;
}

.fa-brands:hover {
	color: #fefefe;
	transition: 0.2s;
}

.fa-square-github {
	color: #816797;
}

.fa-linkedin {
	color: #51557e;
}

.fa-square-facebook {
	color: #f3c03d;
}

/* ^ SECOND PAGE */

.skills-page {
	background-color: #f3c03d;
	display: flex;
	justify-content: space-around;
	z-index: -2;
}

/* ^ skills section */

.skills-section {
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
	width: 40vw;
	background-color: #1b2430;
	color: #fefefe;
	font-size: 1.2rem;
}

.skills-section:hover {
	color: #f3c03d;
	transition: 0.5s;
}

.obj-image {
	height: 15vh;

	animation: move-obj 10s linear infinite;
}

.heading-2 {
	color: #816797;
	font-size: 2rem;
}

@keyframes move-obj {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ^ description section */

.description-section {
	width: 25vw;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	color: #51557e;
	font-size: 1.2rem;
	color: #1b2430;
	font-weight: 500;
	overflow: hidden;
}

/* ^ plane and plane animation */

.moving-plane {
	position: relative;
	animation-name: move-plane;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	top: 25px;
	height: 10vh;
	left: -100px;
	display: block;
}

@keyframes move-plane {
	0% {
		left: 0;
		opacity: 0;
	}

	25% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: 0.5;
	}

	100% {
		left: 80vw;
		opacity: 0;
	}
}

/* ^ THIRD PAGE */

.projects-page {
	display: flex;
	justify-content: center;
	background-color: #1c1c1c;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.project-section {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	/* align-items: center; */
	/* align-content: center; */
	flex-direction: column;
	height: auto;
	width: auto;
}

.project-section button {
	width: 100px;
	height: 30px;
	background-color: #f3c03d;
}

.project-ss {
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 68px;
	font-size: 1.2rem;
}

.about-app {
	color: #fefefe;
	margin: 1rem;
	background-color: #1b2430;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-self: center;

	align-content: flex-end;
	padding: 1rem;
	width: 30vw;
}

.project-img {
	width: 20vw;
	border-radius: 10px;
}

.currency-app-img {
	border: 1rem solid #1b2430;
}

.hangman-app-img {
	border: 1rem solid #fefefe;
}

.react-app-img {
	border: 1rem solid #f3c03d;
}

.project-button-container button {
	height: 40px;
	width: 150px;
	border-radius: 10px;
	border: 0;
	font-size: 1.5rem;
	font-family: "Advent Pro", sans-serif;
	margin-top: 1rem;
	cursor: pointer;
}

.project-button-container button:hover {
	background-color: #816797;
	color: #fefefe;
	transition: 0.3s;
}

.footer-page {
	height: auto;
	text-align: center;
	color: #fefefe;
	padding: 2rem;
}

.hamburger-menu {
	text-align: center;
	margin-top: 1rem;
}

.fa-bars {
	font-size: 2rem;
	color: #f3c03d;
	cursor: pointer;
}

@media only screen and (max-width: 600px) {
	nav {
		display: none;
	}
	.page {
		height: auto;
	}
	.about-page {
		background-image: none;
	}
	section {
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: auto;
		margin-bottom: 10vh;
	}
	.profile-pic-section {
		display: none;
	}
	.about-container {
		width: 80vw;
	}
	.delimitator-page {
		background-image: none;
		height: 30vh;
	}
	.skills-page {
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: auto;
	}
	.skills-section {
		margin: 0 auto;
		width: 80vw;
	}
	.description-section {
		margin: 0 auto;
		width: 80vw;
	}
	.moving-plane {
		display: none;
	}
	.open-tag-img {
		display: none;
	}
	.close-tag-img {
		display: none;
	}
	.project-ss {
		flex-direction: column;
		/* justify-content: center; */
	}
	.about-app {
		margin-bottom: 1rem;
		margin-left: 0;
	}
	.hamburger-menu-items {
		display: none;
		justify-content: center;
		flex-direction: column;
	}
	.project-img {
		width: 60vw;
	}
	.about-app {
		width: 60vw;
	}
}

@media only screen and (min-width: 601px) {
	.hamburger-menu {
		display: none;
	}
	.hamburger-menu-items {
		display: none;
	}
}

.hamburger-menu-items button {
	border: 0;
	background-color: transparent;
	color: #fefefe;
	font-size: 1rem;
	margin-top: 1rem;
	font-family: "Advent Pro", sans-serif;
	padding: 1rem;
	border-radius: 10px;
	cursor: pointer;
}

.hamburger-menu-items button:hover {
	background-color: #f3c03d;
	color: #1b2430;
	transition: 0.3s;
}