body{overflow-x: hidden;}

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

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

/* Contents of the showcase */
.vertical-separator{
	width: 5px;
	background-color: #0ef3ad;
	height: 80%;
}

.large-img-c, .intro-txt-c{
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
}

.large-img-c{
	overflow: hidden;
	height: 70vh;
	width: 40%;
	justify-content: center;
	transform: translate(-101%, -50%);
	background-color: #00000040;
	
}

.large-img{
	padding: 20px;
	height: 70%;
	z-index: -2;
	margin-left: 175%;
	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%;
	color: white;
	margin-left: 20.5%;
	padding-left: 20px;
	transform: translate(-50%, -50%);
}

.header{
	background-image: url("/assets/img/scratch-brushed.gif");
	background-repeat: no-repeat;
	background-size: 25vw 25vh;
	background-attachment:fixed;
	background-position: center;
	height: 25vh;
	width: 25vw;
	margin-bottom: 50px;
}

.font-flick{font-size: 5vw;}

.intro-txt, .caption {
	margin: 0px;
	text-shadow: 5px 5px 0px black;
}

.intro-txt{font-size: 22pt;}
.caption{font-size: 16pt;}

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

.desc-txt, .photo-c{
	color: white;
	width: 100%;
	margin: 50px;
	position: relative;
}

.photo-frame{
	background-color: white;
	width: 55vh;
	max-width: 70%;
	aspect-ratio: 6/7;
	margin: 20px auto 20px auto;
}

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

/* Insights */
.insight1, .insight2, .insight3{padding: 50px; flex-basis: 33%;}

.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: 50px;}


/* Fireflies */
.ff{
    position: absolute;
    width: 50px;
    height: 50px;
	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;}}


/* Responsiveness */
@media (max-width: 1315px) {
	/* Insights get wrapped and some borders for separation are added */
	.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);}
}

@media screen and (max-width: 1100px) {
	/* The photo gets wrapped below the text */
	.desc-c{flex-wrap: wrap; }

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