:root {
	--depth: 500px;
	--turnLeft: 0.06turn;
	--turnRight: -0.06turn;
	--turn: var(--turnRight);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	overflow: hidden;
}

body {
	height: 100%;
	overflow-y: scroll;
  scroll-snap-type: y mandatory;
	background: hsl(0 0% 10%);
	perspective: 1000px;
	perspective-origin: 50% 35%;
}

/* stiky call to action*/

.stikyButton {
    position: fixed;
    z-index: 9999;
    bottom: 25px;
    right: 25px;
    border-radius: 50% ;
    border: 2px solid #2B9DF4;
    background-color:rgba(0, 0, 0, 0.77) ;
    color: #2B9DF4;
    width: 100px;
    height: 100px;
    transition: 0.5s;
	cursor: pointer;
}
.stikyButton:hover {
    transform: scale(1.5);
}

.building {
	transform-style: preserve-3d;
}

.room {
	position: relative;
	border: 4vmax solid hsl(0 0% 10%);
	height: 80vh;
	width: 100vw;
	scroll-snap-align: center;
	transform-style: preserve-3d;
}

.room + .room {
	border-top: 0;
}

.room::before,
.room::after {
	content: '';
	position: absolute;
	height: var(--depth);
	width: 100%;
	backface-visibility: hidden;
}

.room::before {
	background:
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		lightgray;
	transform: rotatex(-90deg) scale(1.001);
	transform-origin: center top;
}

.room::after {
	bottom: 0;
	background:
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		/* url(https://images.unsplash.com/photo-1555505019-8c3f1c4aba5f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3300&q=80) center / cover, */
		url(https://source.unsplash.com/400x400) center / cover,
		sandybrown;
	transform: rotatex(90deg);
	transform-origin: center bottom;
}

.room-walls {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, hsl(0 0% 90%) 2.5vh, transparent 0),
		radial-gradient(hsl(0 0% 0% / 30%), hsl(0 0% 0% / 50%)),
		/* url(https://images.unsplash.com/photo-1460501501851-d5946a18e552?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3300&q=80) center / cover, */
		url(https://source.unsplash.com/400x401) center / cover,
		darkgray;
	transform: translatez(calc(var(--depth) * -1));
	transform-style: preserve-3d;
}

.room-walls::before,
.room-walls::after {
	content: '';
	position: absolute;
	height: 100%;
	width: var(--depth);
}

.room-walls::before {
	right: 100%;
	background:
		linear-gradient(to top, hsl(0 0% 75%) 2.5vh, transparent 0),
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		/* url(https://images.unsplash.com/photo-1620153874520-aabdacf78006?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3200&q=80) center / cover, */
		url(https://source.unsplash.com/400x402) center / cover,
		gray;
	transform: rotatey(90deg);
	transform-origin: right center;
}

.room-walls::after {
	left: 100%;
	background:
		linear-gradient(to top, hsl(0 0% 75%) 2.5vh, transparent 0),
		radial-gradient(hsl(0 0% 100% / 10%), hsl(0 0% 0% / 10%)),
		/* url(https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2560&q=80) center / cover, */
		url(https://source.unsplash.com/400x403) center / cover,
		gray;
	transform: rotatey(-90deg);
	transform-origin: left center;
}

.room-content {
	display: grid;
	place-content: center;
	height: 100%;
	width: 100%;
	color: white;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: clamp(1em, 20vmin, 8em);
	font-weight: 200;
	text-align: center;
	text-shadow: 0 5px 10px hsl(0 0% 0% / 20%);
	transform: translatez(calc(var(--depth) / -2)) rotatey(var(--turn));
}

.room:nth-child(odd) > .room-content {
	--turn: var(--turnLeft);
}