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

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

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

.screen-4 {
	background: #2475FF;
	background: linear-gradient(180deg, #2475FF 0%, #7D94FF 100%);
}

.screen-5 {
	background-image: url('../images/chapter1/bg-screen5.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 80%;
}
.compartment-wrapper {
	position: absolute;
	right: 10px;
	bottom: 40px;
	overflow: hidden;
	width: 320px;
	height: 200px;
}
.compartment-wrapper .compartment-drawer {
	background-image: url('../images/chapter1/screen-5-drawer.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 320px;
	height: 31px;
	position: absolute;
	bottom: 0;
	left: 0;
	transform-origin: center;
}
.compartment-wrapper .compartment-orb {
	position: absolute;
	bottom: -100%;
	left: 46%;
	transform: translateX(-50%);
	width: 210px;
}
.compartment-wrapper .compartment-orb img {
	display: block;
}
@media screen and (min-width: 1000px) {
	.screen-5 {
		background-position: bottom right;
	}
	.compartment-wrapper {
		right: 260px;
		bottom: 60px;
		width: 430px;
	}
	.compartment-wrapper .compartment-drawer {
		width: 430px;
		height: 51px;
	}
	.compartment-wrapper .compartment-orb {
		width: 350px;
	}
}


.screen-7 {
	background-image: url('../images/chapter1/bg-screen7.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}

.screen-8 {
	background: #6f96ff;
	background: linear-gradient(0deg, #6f96ff 0%, #a890ef 65%);
}
.screen-8-monitor {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 341px;
	height: 409px;
	background-image: url('../images/chapter1/screen-8-monitor.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
}
.screen-8-monitor__text {
	position: relative;
	width: 100%;
  height: 100%;
}
.screen-8-monitor__text div:first-child {
	position: absolute;
	top: 180px;
	right: 105px;
	width: 160px;
}
.screen-8-monitor__text div:last-child {
	position: absolute;
	top: 180px;
	right: -20px;
	transform: translateX(55%);
}
@media screen and (min-width: 1000px) {
	.screen-8-monitor {
		width: 765px;
		height: 919px;
	}
	.screen-8-monitor__text div:first-child {
		top: 430px;
		right: 275px;
		width: 320px;
	}
	.screen-8-monitor__text div:last-child {
		top: 430px;
		right: 0;
		transform: translateX(55%);
	}
}
.animated-text {
	position: relative;
}
.strike {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 0;
	height: 2px;
	background: #fff;
}


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



.hologram-wrapper {
	max-width: 550px;
	width: 80%;
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 0%);
}
.hologram-wrapper img {
	display: block;
	width: auto;
  max-height: 40%;
}
.hologram-wrapper .loading {
	position: absolute;
	top: 10px;
	left: 26px;
	max-height: unset;
	width: 80%;
}
.hologram-wrapper .error-small {
	position: absolute;
	top: -60px;
	left: -30px;
	scale: 1;
}
.hologram-wrapper .error-big {
	position: absolute;
	top: -60px;
	right: -5px;
	scale: 1;
}
.hologram-wrapper .error-error {
	position: absolute;
	top: 150px;
	left: -35px;
	scale: 1;
}
.hologram-wrapper .error-employee-1 {
	position: absolute;
	top: -28%;
	left: -6%;
	scale: 1;
}
.hologram-wrapper .error-employee-2 {
	position: absolute;
	top: -10%;
	right: -10%;
	scale: 1;
	width: 178px;
}
.hologram-wrapper .error-employee-3 {
	position: absolute;
	top: 30%;
	left: -10%;
	scale: 1;
	width: 164px;
}
@media screen and (min-width: 1000px) {
	.hologram-wrapper {
		width: unset;
		left: 100px;
		bottom: 50%;
		transform: translate(0%, 50%);
	}
	.hologram-wrapper .loading {
		top: 20px;
		left: 60px;
	}
}