/*** Styles for Chapter 5 of Albert's story ***/
/*** Last updated: 1 February 2024 by Justin Herrin ***/

.screen-2 {
	background-image: url('../images/chapter5/bg-screen2.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}
@media screen and (min-width: 1000px) {
	.screen-2 {
		background-position: top right;
	}
}

.screen-3 {
	background-image: url('../images/chapter5/bg-screen3.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
}

.screen-4 {
	background-image: url('../images/chapter5/bg-screen4.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 21% top;
}
@media screen and (min-width: 1000px) {
	.screen-4 {
		background-position: top right;
	}
}

.screen-5 {
	background-image: url('../images/chapter5/bg-screen5.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
}


.door {
	position: absolute;
	right: -50px;
	bottom: 38%;
	width: 209px;
	height: 369px;
}
.door img {
	display: block;
}
.door-frame-wrapper {
	background-image: url('../images/chapter5/door-frame.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-bottom: 1px solid;
	clip-path: polygon(13% 0%, 88% 0%, 100% 6%, 100% 96%, 90% 100%, 10% 100%, 0% 95%, 0% 6%);
	overflow: hidden;
	z-index: 20;
}
.door-frame {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 50;
}
.dark-bg {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	clip-path: polygon(10% 0%, 90% 0%, 100% 5%, 100% 95%, 90% 100%, 10% 100%, 0% 95%, 0% 5%);
	background: #07174B;
	width: calc(100% - 20px);
	height: calc(100% - 10px);
	z-index: 20;
}
.door-left {
	position: absolute;
	left: 13px;
	top: 0;
	height: 100%;
	z-index: 30;
}
.door-right {
	position: absolute;
	right: 15px;
	top: 0;
	height: 100%;
	z-index: 30;
}
.door-left img,
.door-right img {
	height: 100%;
}
.albert {
	position: absolute;
	bottom: 0;
	left: 16%;
	transform-origin: right;
	width: 150px;
	scale: .6;
	opacity: 0;
	z-index: 10;
}
@media screen and (min-width: 1000px) {
	.door {
		right: 150px;
		top: 82px;
		bottom: unset;
		width: 290px;
		height: 512px;
	}
	.door-left {
		left: 15px;
	}
	.albert {
		left: 25%;
		width: 190px;
	}
}



.final-ponder {
	margin-top: 40px;
}

@media screen and (min-width: 1000px) {
	.final-ponder {
		margin-top: 100px;
	}
}