/* General classes */
*{
	margin:0;
	padding:0;
}

body{
	background-color:#FFFFF0;
	padding:2vw;
	font-size:2.8vh;
}

.menu:hover{
	background-color:#066F6F;
	border-radius:50%;
	border:1px solid #fff;
	color:#fffff0;
}

/* Nav bar */
nav{
	width:13%;
	height:100vh;
	padding:1vw;
	background-color:#044343;
	border:1px solid #fff;
	border-radius:5px;
	color:#fffff0;
	position:fixed;
	top:0;
	left:0;
}

.signature-img{
	width:100%;
	margin:auto;
	margin-bottom:2vh;
}
nav p, header h1{
	font-weight:bold;
	padding:1vw;
	transition-property:border-bottom, border-radius, background-color, color, letter-spacing;
	transition-duration:0.9s;
}

nav p:hover{
	color:#F3E5AB;
	background-color:#066F6F;
	border-radius:5px;
	border-bottom:2px solid #F3E5AB;
	letter-spacing:2px;
}

.selected{
	color:#F3E5AB;
	background-color:#066F6F;
	border-radius:5px;
	border-bottom:2px solid #F3E5AB;
	letter-spacing:2px;
}
/* Main Section */
main{
	width:85%;
	margin-left:15%;
}

.main{
	display:flex;
	justify-content:space-evenly;
	margin-top:2vh;
}

header{
	width:fit-content;
	border-radius:5px;
	color:#fffff0;
	margin:auto;
	margin-bottom:2vh;
	background-color:#044343;
	border:1px solid #fff;
	text-align:center;
	transition-property:width, color, background-color, border-bottom, box-shadow, letter-spacing;
	transition-duration:2.7s;
}

header:hover{
	width:50%;
	background-color:#066F6F;
	border-radius:5px;
	color:#F3E5AB;
	border-bottom:2px solid #F3E5AB;
	box-shadow:-7px 5px 5px #062E2E;
	letter-spacing:2px;
	
}
/* column design */
.column{
	width:33%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1vw;
	margin:0 1vw;
}

.Photo-card{
	margin:0vw;
	transition-property:padding, background-color, border, border-radius, box-shadow;
	transition-duration:1.2s;
}

.Photo-card:hover{
	padding:0.7vw;
	background-color:#066F6F;
	border-radius:5px;
	border:1px solid #044343;
	box-shadow:-7px 5px 5px #062E2E;
	text-align:right;
}

.Photo-card:hover .favorite{
	display:inline-block;
	
}
.favorite{
	display:none;
	color:#F7F5F5;
	font-size:3vw;
	z-index:3;
	text-align:right;
	transition:color;
	transition-duration:0.7s;
}

.favorite:hover{
	color:#F33A6A;
}

.favorite2{
	margin-top:0%;
}
.img{
	width:100%;
	border:1px solid #062E2E;
	border-radius:5px;
	transition-property:border, filter;
	transition-duration:1s;
}

.img:hover{
	border:1.5px solid white;
	filter:brightness(110%) saturate(110%);
}

footer{
	text-align:center;
	margin-top:5vh;
}

@media (max-width:700px){
	nav{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-evenly;
		position:static;
		width:100%;
		height:fit-content;
	}
	nav p{
		margin:1vh 5vw;
		height:fit-content;
	}
	main{
		margin-left:0;
		width:100vw;
	}
	header{
		margin-top:3vh;
	}
	header:hover{
		width:80%;
	}
	.Photo-card:hover{
		margin:2vw;
	}
	.favorite{
		font-size:3vh;
	}
}