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

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

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

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

.screen-5 {
	background-image: url('../images/chapter2/bg-screen5.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 85% bottom;
}
@media screen and (min-width: 1000px) {
	.screen-5 {
		background-position: bottom right;
	}
}

.screen-7,
.screen-8 {
	background-image: url('../images/chapter2/bg-screen8.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom left;
	background-attachment: fixed;
}
@media screen and (min-width: 1000px) {
	.screen-7,
	.screen-8 {
		background-position: bottom right;
	}
}
@media screen and (min-width: 1300px) {
	.screen-7,
	.screen-8 {
		background-position: center center;
		background-size: auto;
	}
}

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