.portfolio_modal 
{
	border: 2px solid #000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95vw;
	height: 95vh;
	background-color: rgba(0, 0, 0, 0.7); /* Must be semi-transparent */
	backdrop-filter: blur(6px);           /* <--- This is the magic */
	-webkit-backdrop-filter: blur(6px);   /* Safari support */
	z-index: 9999;
	display: none;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.portfolio_modal.visible 
{
	display: flex;
	opacity: 1;
}

.portfolio_modal.fade-out 
{
	opacity: 0;
}

.ul_portfolio 
{
  /*list-style: square; */
  list-style: none;
  list-style-position: inside;
  margin: 0px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px; 
  margin-left: 15px;
}

.ul_portfolio li 
{
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.25) 0%,
		rgba(255, 255, 255, 0.1) 80%,
		rgba(255, 255, 255, 0.03) 100%
	  );
	padding: 12px 16px;
	border-radius: 0px;
	font-weight: 300;
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 1);
	line-height: 1.6;
	border-left: 1px solid rgba(236, 155, 0, 0.5); 
	transition: background 0.3s ease;
}

.ul_portfolio li:hover 
{
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 35%,
    rgba(255, 255, 255, 0) 50%
  );
}

.spn_close_modal 
{
	font-size: 2.1rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 12px 16px;
	color: #fdb527;
	cursor: pointer;
	opacity: 0.8;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10000;
	transition: opacity 0.2s ease;
}

.spn_close_modal:hover 
{
	opacity: 1;
}


.spn_nav_left, 
.spn_nav_right 
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.2rem;
	color: #fdb527;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease;
	z-index: 10000;
}

.spn_nav_left:hover, 
.spn_nav_right:hover 
{
	opacity: 1;
}

.spn_nav_left 
{
	left: 16px; /* matches padding-left of close icon */
}

.spn_nav_right 
{
	right: 16px; /* matches padding-right of close icon */
}


#portfolioImageLoader {
	
	width: 93%;
	height: 93%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

#portfolioImageLoader img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0.3;
	filter: grayscale(100%) blur(3px);
	transition: opacity 1.8s ease, filter 1.2s ease;
}

#portfolioImageLoader img.loaded {
	opacity: 1;
	filter: grayscale(0%) blur(0px);
}


.portfolio_image_wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
}

.portfolio_image_caption {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 6px 12px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #f1f1f1;
	font-size: 0.85rem;
	font-family: 'Courier New', monospace;
	border-radius: 6px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	opacity: 0.9;
	white-space: nowrap;
	pointer-events: none;
}

.text_note_smaller
{
	
	font-size:0.9rem;
	font-style:italic;
}

.text_note_smaller_ni
{
	
	font-size:0.8rem;
}