@font-face{
	src: url(./../fonts/title.ttf);
	font-family: title;
}

@font-face{
	src: url(./../fonts/short.ttf);
	font-family: short;
}

@font-face{
	src: url(./../fonts/long.otf);
	font-family: long;
}

:root{
	--nav-bar-top-color: #00325C;
	--nav-bar-bottom-color: #0D0C3100;
	--first-page-background: #0D0C31;
	--first-page-bottom-background: #00325C;
	--second-page-background: #0085A0;
	--second-page-bottom-background: #00B0B1;
	--third-page-background:#62DBBA ;
	--third-page-bottom-background: ;

	--first-page-font-color: #FAB057;
	--text-font-color: #EAFCFF;
	--second-page-title-color: #F89235;
}

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

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	cursor: url("./../img/cursor/cursor.png"),auto;
}

.global{
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	overflow-x: hidden;
}

.nav{
	position: fixed;
	width: 100vw;
	height: 6.5vw;
	background-image: linear-gradient(to bottom,var(--nav-bar-top-color),var(--nav-bar-bottom-color));
	display: flex;
	flex-direction: column;
	z-index: 1;
	align-items: center;
}

.navigation.titles .sign img{
	height: 75%;
	width: 20%;
	border-radius: 0% 100% 0% 100% / 70% 32% 68% 30%;
	object-fit: contain;
}

#homeicon,#infoicon,#findicon{
	height: 1vw;
	width: 1vw;
	filter: invert(100%);
	object-fit: cover;
	margin: 0.5vw;
}

.navigation.titles{
	display: flex;
	width: 100vw;
	transition: transform 5s ease-in;
	flex-direction: row;
	flex: 3 0 auto;
}

.navigation.titles div, .navigation.titles a{
	color: white;
	display: flex;
	font-size: 1.5vw;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 100ms linear;
	position: relative;
}

.navigation.titles div{
	flex: 1;
}

.navigation.titles a::after{
	content: "";
	position: absolute;
	height: 1px;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #FAB057;
	transform: scaleX(0);
	transition: transform 200ms ease-in;
}

.navigation.titles a:hover{
	transform: scale(1.5);
	text-shadow: 2px 2px black;
}

.navigation.titles a:hover::after{
	background-color: #FAB057;
	transform: scaleX(1);
}

.nav .dropdown.image{
	flex: 1;
	justify-content: space-between;
	transition: transform 250ms ease-in;
}
.nav .dropdown.image img{
	height: 1vw;
	width: 1vw;
}

.landing{
	height: 100vh;
	width: 100vw;
	background-image: linear-gradient(to bottom,var(--first-page-background),var(--first-page-bottom-background));
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: row;
	overflow: hidden;
	padding: 1vw;
}

#tag, .landing .name,.landing .short{
	padding: 0%;
}

#tag{
	color: var(--first-page-font-color);
	font-size:5vw;
}

.landing .name{
	width: 100%;
	color: white;
	font-family: title;
	font-size: 8vw;
}

.landing .short{
	color: white;
	font-size: 1.15vw;
	font-family: short;
}

.landing .socials{
	padding: 4vw;
	display: flex;
	justify-content: space-around;
	flex: 1;
	transition: scale(0);
}

.landing .socials img{
	height: 5vw;
	border-radius: 50%;
	object-fit: contain;
	transition: transform 50ms ease-in;
}

.landing .socials img:hover{
	transform: scale(1.5);
	box-shadow: 2px 2px #FAB057;
}

.landing .profile.pic img{
	height: 30vw;
	object-fit: contain;
	border-radius: 48% 52% 50% 50% / 24% 22% 78% 76%;
	padding: 1vw;
}


.wave1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave1 svg{
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 124px;
}

.wave1 .shape-fill{
    fill: var(--first-page-bottom-background);
}

.intro{
	position: relative;
	height: 100vh;
	scroll-snap-align: start;
	background-image: linear-gradient(to bottom,var(--second-page-background),var(--second-page-bottom-background));
}

.intro .about.me.title{
	position: relative;
	color: var(--second-page-title-color);
	top: 10vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3vw;
	flex-direction: column;
	gap: 2vw;
	font-family: short;
}

.intro .about.me.body{
	color: var(--text-font-color);
	font-weight: 500;
	font-size: 1vw;
	width: 75%;
	font-family: long;
}

.intro .projects{
	width: 100vw;
	display: flex;
	flex-direction: row;
	position: relative;
	flex: 1;
	top: 8vw;
	align-items: center;
	justify-content: center;
	padding: 1vw;
}

.projects .resume{
	color: var(--second-page-title-color);
	display: flex;
	flex-direction: column;
	gap: 1vw;
	font-family: short;
}

.projects .resume.email{
	display: flex;
	align-items: center;
}

 .projects .resume.email form{
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-items: center;
 	gap: 0.5vw;
 }

.projects input{
	width: 25vw;
	height: 2vw;
}

.projects label{
	color: var(--text-font-color);
	font-size: 1.5vw;
}

 .projects .resume.email button{
 	height: 2vw;
 	width: 5vw;
 	border-radius: 10% 10% 10% 10% / 25% 25% 25% 25%;
 }
 .projects .resume.email img{
 	height: 1vw;
 	width: 1vw;
 	object-fit: cover;
 }

.projects .resume_success{
	display: flex;
	position: absolute;
	background-color: green;
	border: 1px solid black;
	height: 10vw;
	width: 35vw;
	font-size: 1vw;
	justify-content: center;
	transition: transform 250ms ease-in;
	transform: scale(0);
}

.resume_success .left.edge{
	flex: 0.5;
}

.resume_success .notification.title{
	flex: 9;
	background-color: white;
	color: black;
	font-size: 2vw;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.resume_success .notification.title img{
	position: absolute;
	height: 2vw;
	width: 2vw;
	top: 1vw;
	right: 8vw;
	border-radius: 50%;
	object-fit: cover;
}

.resume_success .notification.message{
	color: black;
	font-size: 1vw;
}

.wave2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave2 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.wave2 .shape-fill {
    fill: var(--second-page-bottom-background);
}

.find{
	position: relative;
	height: 100vh;
	scroll-snap-align: start;
	background-color: var(--third-page-background);
}

.find .feedback.title{
	position: relative;
	color: #F89235;
	top: 10vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3vw;
	flex-direction: column;
	gap: 2vw;
}

.find .feedback.body{
	font-family: short;
	/*color: var(--text-font-color);*/
	color: black;
	/*background-image: linear-gradient(to right,rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0));*/
	font-weight: 500;
	font-size: 1vw;
	width: 75%;
}

.find .feedback.form{
	/*color: var(--text-font-color);*/
	color: black;
	height: 20vw;
	width: 25vw;
	font-size: 1vw;
	display: flex;
	flex-direction: column;
	gap: 0.1vw;
}

.feedback.form input{
	height: 2vw; 
	width: 25vw;
}

.feedback.form textarea{
	height: 10vw;
	width: 25vw;
}

.feedback.form button{
	position: relative;
	height: 2vw;
	width: 5vw;
	object-fit: cover;
	left: 10vw;
	border-radius: 10% 10% 10% 10% / 25% 25% 25% 25%;
}

.feedback.form img{
	height: 1vw;
	width: 1vw;
	object-fit: cover;
}

.find .feedback_success{
	font-family: short;
	display: flex;
	position: absolute;
	background-color: green;
	border: 1px solid black;
	height: 10vw;
	width: 35vw;
	bottom: 0;
	font-size: 1vw;
	justify-content: center;
	transition: transform 250ms ease-in;
	transform: scale(0);
}

.feedback_success .feedback.left.edge{
	flex: 0.5;
}

.feedback_success .feedback.notification.title{
	flex: 9;
	background-color: white;
	color: black;
	font-size: 2vw;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	top: 0;
}

.feedback_success .feedback.notification.title img{
	position: absolute;
	height: 2vw;
	width: 2vw;
	top: 1vw;
	right: 8vw;
	border-radius: 50%;
	object-fit: cover;
}

.feedback_success .feedback.notification.message{
	color: black;
	font-size: 1vw;
}