@media (orientation:portrait){
	#HText{
		left: 50%;
		width: 100%;
		transform: translate(-50%);
	}
	
	#About{
		width: 90% !important;
	}
	
	#PrSection{
		display: inline-block !important;
		
		#PrExDescription{
			float: none !important;
			width: auto !important;
			display: inline !important;
		}
		
		#PrImage{
			float: right !important;
			margin: 10px;
		}
	}
}


main{
	margin-top: 0px;
}

header{
	height: 100vh !important;
	
	#Menu{
		height: 10vw;
	}
}

#PH{
	height: calc(100vh - max(6vw, 8vh));
	background-image: url('../Images/PortfolioTitle.png') !important;
	background-repeat: no-repeat !important;
	background-size: round(calc(100vw + 17.5vh), 1px) auto !important;
	background-position: bottom right !important;
}

@media(max-aspect-ratio: 4/3){
	#PH{
		background-size: cover !important;
	}
}

#HText{
	position: absolute;
	top: 5vh !important;
	right: 5vw !important;
	left: auto !important;
	width: 38vw !important;
	text-align: center;
	
	h1, span{
		background-color: rgb(1,0,34);
		border-radius: 1vw;
		padding: 1vw;
		width: fit-content;
		margin: auto;
		margin-bottom: 5px;
	}
}

img{
	border: 3px solid rgb(204,0,62);
	border-radius: 1px;
	
	&:hover{
		filter: brightness(65%);
	}
}

/* Letter display */
#LetterCont{
	margin: 0px;
	padding: 0px;
	height: fit-content;
	right: 5vw;
	position: relative;
	margin-bottom: 5vh;
	display: flex;
	align-items: center;
	transition: height 0.5s cubic-bezier(0, 0, 0, 1);
	
	section{
		background-color: rgb(59,0,42);
		margin: auto;
		aspect-ratio: 3/4;
		border-radius: 1px;
		filter: drop-shadow(0 10px 10px black);
		will-change: transform, z-index, filter;
		transition: transform 0.5s cubic-bezier(0, 0, 0, 1), z-index 0.5s cubic-bezier(0, 0, 0, 1), filter 0.2s cubic-bezier(0, 0, 0, 1); /* Don't transition left */
		position: absolute;
		left: 0%;
		display: inline-block;
		
		&:hover{
			filter: drop-shadow(0 10px 10px black) brightness(65%);
		}
	}
	
	#Letter1{ /* Back */
		transform: translate(calc(50vw - 50%), 0px) scale(20%);
		z-index: 10;
		
		&:hover{
			brightness(100%);
		}
	}
	
	#Letter2{ /* Left */
		transform: translate(calc(0vw - 50%), 0px) scale(60%);
		z-index: 20;
	}
	
	#Letter3{ /* Front */
		transform: translate(calc(50vw - 50%), 0px) scale(100%);
		z-index: 30;
		
		&:hover{
			filter: drop-shadow(0 10px 10px black) brightness(100%);
		}
	}
	
	#Letter4{ /* Right */
		transform: translate(calc(100vw - 50%), 0px) scale(60%);
		z-index: 20;
	}
	
	.letter{ /* Default */
		transform: translate(calc(50vw - 50%), 0px) scale(20%);
		z-index: -1;
		display: inline-block;
		
		&:hover{
			brightness(100%);
		}
		
		p{
			text-indent: 0px;
		}
	}
	
	.resume{
		h2{
			margin-bottom: 0px;
		}
		
		h2+h3{
			margin-top: 5px;
		}
		
		h3{
			margin-bottom: 0px;
			margin-left: 1vw;
			font-size: 1.4vw;
		}
		
		ul{
			margin-top: 5px;
			padding-left: 2.5vw;
		}
	}
}


/* PROGRAMMING EXPERIENCE */
#PrEx{
	padding: 150px 10vh; /* Y, X */
	background-color: rgb(204,0,62);
	margin: 0px;
	margin-bottom: 0vh;
	width: 100vw;
	position: relative;
	right: 5vw;
	
	
	h2{
		margin-left: 0vw;
		margin-top: 0vh;
	}
	
	#PrSection{
		width: 100%;
		display: inline-flex;
		flex-direction: row; /* HORIZONTAL */
		align-items: flex-start;
		margin: 0px;
		gap: 5%;
		align-items: stretch;
		
		#PrExDescription{
			border-radius: 10px;
			background-color: rgb(59,0,42);
			width: 40vw;
			text-indent: 1.25vw;
			margin: 0px;
			padding: 2.5vh;
			display: block;
			font-size: 1.25vw;
			
			height: fit-content;
		}
		
		#PrImage{
			width: 40vw;
			align-self: flex-end;
			border-color: rgb(1,0,34);
		}
	}
		
	#CurveCont1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;

		svg {
			position: relative;
			display: block;
			width: calc(180% + 1.3px);
			height: 200px;
			
			.shape-fill{
				fill: rgb(1,0,34);
			}
		}
	}
	
	#CurveCont2 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;
		transform: rotate(180deg);

		svg {
			position: relative;
			display: block;
			width: calc(180% + 1.3px);
			height: 200px;
			
			.shape-fill{
				fill: rgb(1,0,34);
			}
		}
	}
}
	
/* ARTISTIC EXPERIENCE */
#ArtEx{
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	h2{
		align-self: flex-end;
		margin-bottom: 0px;
	}
	
	#ArtImage{ /* Try 4:3 ratio */
		width: 70vw;
		margin: 2.5vh 2.5vw; /* TOP RIGHT BOTTOM LEFT */
	}
	
	ul{
		margin-top: 0px;
		li{
			display: inline;
			margin: 0vh 0.5vw;
		}
	}
}