/* DEPOP */
:root {
	--orange: #EEAA45;
	--trans-orange: #eeaa4571;
	--light-blue: #B1D6E3;
	--blue: #92B0B8;
	--trans-blue: #92b0b878;
	--posty-green: #628A3D;
	--posty-trans-green: #628a3d81;
}



/* HERO */
.subtext-bold {
	color: var(--orange);
}

/* VINYL COVER */
.tiny-vinyl::before {
	content: "";
	width: 50px;
	height: 50px;
	background: url("casefiles/posty-logo.png") center/cover no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* SEE HIFI LINK */
.see {
	color: var(--posty-green);
	border: solid 1px var(--posty-green);
}

.jump {
	background-color: var(--posty-green);
	border: 1px solid var(--posty-green);
}


/* SECTION SPACING */
section {
	padding: var(--padding);
	margin-top: var(--margin);
}


/* GOAL */
#goal::before, #goal::after {
	border-color: var(--orange);
}

.crop-marks::before, .crop-marks::after {
	border-color: var(--orange);
}

.goal-bold {
	color: var(--orange);
}


.app-link {
	text-decoration: underline;
	color: var(--blue);
}


/* PROBLEM */
.discovery {
	background-color: var(--trans-blue);
	border: 1px solid var(--blue);
}

.problem {
	color: var(--black);
}

.pro-line {
	width: 100%;
	height: 1px;
	background-color: var(--blue);
	border: none;
	padding: 0;
}

.jtbd {
	border: solid 1px var(--orange);
	background-color: var(--trans-orange);
}

.jtbd-title {
	color: var(--orange);
}

.box-line {
	width: 100%;
	height: 1px;
	background-color: var(--orange);
	border: none;
	padding: 0;
}

.jtbd > p {
	text-align: center;
}


/* MEET POSTY */
.meet-posty {
	border: solid 1px var(--posty-green);
}

.meet-posty, .comp {
	border-radius: var(--border-radius);
	overflow: hidden;
}



/* RESEARCH */
.prelim {
	border: solid 1px var(--posty-green);
}

.icon {
	width: 15%;
}

.stat {
	color: var(--posty-green);
}

.label {
	background-color: var(--posty-green);
}

/* SLIDER */
.slides::-webkit-scrollbar-thumb {
	border: 1px solid var(--posty-green);
}

.slider > .a-tags > a {
	img {
		border: solid 1px var(--posty-green);
	}
}


/* HMW */
.hmw {
	border: solid 1px var(--blue);
	background-color: var(--trans-blue);
}

.hmw-title {
	color: var(--blue);
}

.hmw-line {
	background-color: var(--blue);
}


/* STEPS */
.steps {
	border-radius: var(--border-radius);
	padding: var(--padding);
}

#step-1 {
	background-color: var(--trans-orange);
	border: 1px solid var(--orange);
}

#step-2 {
	background-color: var(--posty-trans-green);
	border: 1px solid var(--posty-green);
}

#step-3 {
	background-color: var(--trans-blue);
	border: 1px solid var(--blue);
}

.steps-item {
	font-size: calc(var(--font-size)*1.2);
}

/* POLAROID */
.win {
	width: 40%;
}

/* LEARNINGS */
.learn {
	font-size: calc(var(--font-size)*1.5);
	font-family: var(--bolded);
	color: var(--orange);
	text-align: center;
	padding: calc(var(--padding)*1.4);
}

.crops {
	position: relative;
	margin-left: var(--margin);
	margin-right: var(--margin);
}

.crops::before, .crops::after {
	content: "";
	position: absolute;
	border-style: solid;
	width: 20px;
	height: 25px;
	border-color: var(--orange);
}

.crops::before {
	top: 0;
	left: 0;
	border-width: 1px 0 0 1px;
}

.crops::after {
	top: 0;
	right: 0;
	border-width: 1px 1px 0 0;
}

.marks::before, .marks::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 25px;
	border-style: solid;
	border-color: var(--orange);
}

.marks::before {
	bottom: 0;
	left: 0;
	border-width: 0 0 1px 1px;
	border-color: var(--orange);
}

.marks::after {
	bottom: 0;
	right: 0;
	border-width: 0 1px 1px 0;
	border-color: var(--orange);
}


.win-flex {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: center;
}

.win {
	width: 70%;
}


/* VIDEOS */
video {
	width: 20.5rem;
}

.pre-vid {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}


/* SCROLL PROGRESS BAR */
#scroll-progress {
	position: fixed;
	top: 0;
	width: 0%;
	height: 4px;
	background: var(--red);
	z-index: 10000;
}

/* PLAY NEXT */
.play-next {
	display: flex;
	gap: 0.5rem;
	align-items: end;
	border: solid 1px var(--black);
	border-radius: var(--border-radius);
	margin-left: calc(var(--margin)/1.5);
	margin-right: calc(var(--margin)/1.5);
	padding: var(--padding);
	margin-top: var(--margin);
}

.next {
	font-family: var(--bolded);
	font-size: calc(var(--font-size)*1.2);
}

.play-button {
	width: 8%;
}



/* 800px */
@media (min-width: 800px) {
	.main-content {
		padding: 0;
	}

	video {
		width: 36rem;
	}

	.play-next {
		max-width: 36rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(var(--margin)*2);
	}

	.play-button {
		width: 5%;
	}


	/* STEPS */
	.steps {
		display: flex;
		align-items: center;
	}

	.steps-flex {
		display: flex;
		flex-direction: column;
		gap: var(--gap);
	}

	.img-span {
		width: 40%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
	

	.story-imgs {
		display: flex;
		gap: var(--gap);

		img {
			width: 30%;
		}
	}



	.win-flex {
		display: flex;
		align-items: center;
		gap: var(--gap);
	}
}


/* 1200px */
@media (min-width: 1200px) {

	.nav > a {
		font-size: var(--font-size);
	}
	
	.case-subtext {
		width: 31rem;
		align-self: self-end;
	}

	.main-content {
		padding: 0;
	}

	video {
		width: 36rem;
	}

	.play-next {
		max-width: 36rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(var(--margin)*2);
	}

	.play-button {
		width: 5%;
	}


	/* STEPS */
	.steps {
		width: 50rem;
		justify-content: space-between;
		padding: calc(var(--padding)*2);
	}

	.steps-flex {
		width: 25rem;
	}

	.steps-item {
		font-size: calc(var(--font-size)*1.5);
	}

	.img-span {
		width: 30%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
	

	.story-imgs {
		display: flex;
		gap: var(--gap);

		img {
			width: 30%;
		}
	}


	.win-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--gap);
	}

	.win {
		width: 50%;
		align-self: center;
	}
}