/*----------Bio---------*/
main{overflow-x: hidden; position: relative;}


/*----------Topmost Div---------*/
.showcase, .desc-c, .insights-c, .abtpage-c{
	width: var(--bodywidth);
	position: relative;
	overflow: hidden;
}


/*----------Showcase---------*/
.showcase{
	height: 90vh;
	width: 100%;
	backdrop-filter: blur(10px);
}

.large-img-c{
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
	height: 35vw;
	justify-content: center;
	transform: translate(-101%, -50%);
}

.large-img{
	padding: 1rem;
	margin: 0.25rem;
	z-index: -2;
	margin-left: 200%;
	animation: slide-left 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	animation-delay: 0.5s;
	background-color: var(--cyan2);
}

.intro-txt-c{
	width: 40%;
	margin-left: 50%;
	padding-left: 2rem;
	height: 75%;
	color: white;
	border-left: 3px solid var(--cyan);
}

.header{
	background-image: url("/assets/img/scratch-brushed.gif");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 50%;
}

.shaded{text-shadow: 5px 5px 0px black;}


/*----------Description---------*/
.desc-c{
	background-color: black;
	overflow: hidden;
}

.desc-txt{
	color: white;
	width: 75%;
	margin: 2rem;
	position: relative;
}

.photo-c{margin: 2rem 5rem 2rem 5rem;}

.photo-frame{
	background-color: white;
	aspect-ratio: 6/7;
	margin: 1rem auto 1rem auto;
}

.photo{
	position: relative;
	width: 85%;
	padding-bottom: 15%;
}

/*----------Insights---------*/
.insight1, .insight2, .insight3{
	padding: 2rem; 
	flex-basis: 1/3%;
}

.insight1{
	background-color: black;
	border-bottom: 3px solid var(--cyan);
}

.insight2{
	color: black;
	background-color: var(--cyan);
	border-bottom: 3px solid var(--cyan);
}

.insight3{
	background-color: white;
	border-top: 3px solid var(--cyan);
}


/*----------About this page---------*/
.abtpage-c{background-color: white;}
.abtpage-txt{padding: 2rem;}


/*----------Fireflies---------*/
.ff{
    position: absolute;
    width: 3rem;
    height: 3rem;
	background-image: url('/assets/img/ff.png');
    transition: top 5s ease-in-out, left 5s ease-in-out;
	animation: ff-fade-in 1s ease-in-out 1s forwards;
	opacity: 0;
}


/*----------Animations---------*/
@keyframes slide-left {100% {margin-left: 0%;}}
@keyframes slide-right {100% {margin-left: 25%;}}
@keyframes ff-fade-in {100% {opacity: 0.3;}}


/*----------Responsive Design---------*/
/*----------Large---------*/
@media screen and (max-width: 1024px) {
	.showcase{
		flex-direction: column;
	}

	.large-img-c{
		position: relative;
		left: 0;
		top: 0;
		transform: none;
		height: 90vw;
		margin: 1rem auto 4rem auto;
	}

	.intro-txt-c{
		height: auto;
		width: var(--bodywidth);
		color: white;
		border-left: none;
		text-align: center;
		margin: auto 0 auto 0;
		padding: 0 0 2rem 0;
	}

	.header{height: 9rem;}
	.insights-c{flex-wrap: wrap;}
	.insight1, .insight2, .insight3{flex-basis: auto;}
	.insight1{border-top: 3px solid var(--cyan);}
	.insight3{border-bottom: 3px solid var(--cyan);}
	.desc-c{flex-wrap: wrap; }

	.desc-txt{
		width: 100%; 
		margin-bottom: 0px;
	}
}

/*----------Small---------*/
@media screen and (max-width: 640px) {
	html{font-size: 12px;}
	.content{margin: 20px;}
}