section{
	width: 100%;
	height: 100vh;
	margin:auto;
	position: relative;
	position: sticky;
top: 0;
background: var(--bg-main);
box-shadow: 1px -50px 57px var(--bg-main);


}

.sectionWrap{
	position: absolute;
	max-width: 66vw;

	left:0;
	padding: 1.25rem;
	top:0;
	margin-top: 20vh;
}

section .sectionWrap>h1{
	font-size: 1em;
font-weight: 500;
position: relative;

opacity: 0.4;
}

section .sectionWrap>h1::after{
	content: "";
	position: absolute;
	display: block;
	bottom:-10px;
	width: 0%;
	border-bottom: 1px solid;
	font-weight: 400;
	transition: width 1s ease-out;
}

section .sectionWrap h1.revealed::after {
  width: 100%;
}

section p{
	font-size: 2rem;
	font-weight: 400;
	margin-block: 1.5rem;
	opacity: 0;
	transition: opacity 1s ease ;
	transition-delay: 0.4s;
}

.delay{
	transition-delay: 1s!important;
}

section p.revealed{
	opacity: 1;
}

section .sectionWrap>ul{
	list-style: none;
	padding:0;
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	flex-wrap: wrap;
	
}

section .sectionWrap>ul>li{
 flex: 0 1 calc(33,333% - 1rem);

}

section .sectionWrap>ul>li{
	font-size: 2rem;
	font-weight: 400;
	margin: 0;
	opacity: 0;
	transition: 1s ease;
	transition-delay: 0.3s;
}

section .sectionWrap>ul>li.revealed{
opacity: 1;

}

section .sectionWrap>ul>li::after{
content: ',';
opacity: 1!important;
}

section .sectionWrap>ul>li:last-child::after{
content: '';
}


section .sectionWrap>ul>li>p{
	font-size: 1rem;
	font-weight: 500;
}

li{
	transition: opacity 0.3s ease;
}


  ul:hover li {
    opacity: 0.4!important;
    transition: opacity 0.3s ease!important;
  }

  ul li:hover {
    opacity: 1!important;
  }

footer{
	position: fixed;
	z-index: 700;
	background-color: none;
	width: 100vw;
	
	bottom:0;
display: flex;
flex-direction: column;

}

.footer-notch{
	margin-inline: auto;
	margin: 1.25rem;
	width: fit-content;

}

#footerArrow{
	transition: opacity 0.4s ease;

}
.footer-cont{
	border-top: none;
	max-height: 0px;
	width: 100%;
	transition: 0.4s ease;
	backdrop-filter: blur(30px);
}

.footer-cont.visible{
	min-height:130px ;
	max-height: 500px;
	border-top: 1px solid ;
}

#captionCont {
	font-weight: 300;
}


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

a::after{
	content: "↵";
}


footer>div>p {
	margin:0;
}
footer>div>p{
	margin-bottom: 4px;
}

footer>div>p:first-child {
	margin-bottom: 4px;
padding-bottom: 4px;
	border-bottom: 1px solid;
}


#aboutNav{
position: fixed;
top: 100px;
left: 0;
z-index: 1500;

margin-inline: 1.25rem;
color: var(--ui-color);

opacity: 0;
transition: 0.3s ease;
pointer-events: none;
}

#aboutNav.visible{
	opacity: 1;
}

#aboutNav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2rem;
}



#aboutNav ul li{
	opacity: 0.4;
	position: relative;
}

#aboutNav ul li.active{
	opacity: 1;
}

#aboutNav ul li::after{
content: "";
position: absolute;
bottom: -4px;
left: 0;
height: 1px;
width: 0%;
background-color: var(--ui-color);
transition: 0.4s ease;
}

#aboutNav ul li.active::after{

width: 100%;

}

#cc{
	opacity: 0;
	position: fixed;
	bottom:0;
	left: 0;

	z-index: 1300;

	font-size: 10px;

	padding: 1.25rem;

	text-transform: uppercase;
	transition: 0.3s ease;

}

#cc.visible{
opacity: 0.4;
}

.sectionImages{
	position: sticky;
width: 33vw;
height: 100%;;
background-position: center center;
background-size: cover;
float: right;
top:0;
z-index: 1900;
}
}