/*** Styles for Chapter 4 of Albert's story ***/
/*** Last updated: 31 January 2024 by Justin Herrin ***/


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

.screen-3 {
	background-image: url('../images/chapter4/bg-screen3.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
}
@media screen and (min-width: 1000px) {
	.screen-3 {
		background-position: bottom center;
	}
}

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

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

.screen-6 .faux-bg {
	background-image: url('../images/chapter4/bg-screen6.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	width: 100%;
	height: 100%;
}

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

.screen-9 {
	background-image: url('../images/chapter4/bg-screen9.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 37% top;
}
@media screen and (min-width: 1000px) {
	.screen-9 {
		background-position: top left;
	}
}

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


.oridian {
	position: absolute;
	top: 120px;
	right: -70px;
	width: 250px;
}
@media screen and (min-width: 1000px) {
	.oridian {
		top: 40px;
		right: 100px;
		width: 300px;
	}
}


.ee-signs {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.sign1 {
	position: absolute;
	top: 42%;
	right: 640px;
	scale: 1;
	opacity: 1;
	width: 220px;
}
.sign1 img {
	rotate: -20deg;
}
.sign2 {
	position: absolute;
	top: 33%;
	right: 180px;
	scale: 1;
	opacity: 1;
	width: 165px;
}
.sign2 img {
	rotate: 20deg;
}
.sign3 {
	position: absolute;
	top: 21%;
	right: 460px;
	scale: 1;
	opacity: 1;
	width: 120px;
}
.sign3 img {
	rotate: 10deg;
}
.sign4 {
	position: absolute;
	top: 18%;
	right: 200px;
	scale: 1;
	opacity: 1;
	width: 80px;
}
.sign4 img {
	rotate: -25deg;
}
.sign5 {
	position: absolute;
	top: 9%;
	right: 305px;
	scale: 1;
	opacity: 1;
	width: 65px;
}
.sign6 {
	position: absolute;
	top: 8%;
	right: 175px;
	scale: 1;
	opacity: 1;
	width: 40px;
}
.sign6 img {
	rotate: 5deg;
}