纯css实现纪念碑谷2游戏动画效果代码
代码语言：html
所属分类：动画
代码描述：纯css实现纪念碑谷2游戏动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100vh; width: 100vw;
min-height: 60vw;
padding: 0; margin: 0;
background: black;
--animation: 90s infinite;
}
body::after {
content: '';
position: absolute;
display: block;
top: 0; left: 50%;
width: 454px; height: 798px;
transform: translateX(-50%);
animation: frame var(--animation) ease;
}
.frame {
position: relative;
width: 454px; height: 798px;
margin: auto;
background: #3D2E36;
overflow: hidden;
}
.scene {
position: relative;
font-size: 4px;
perspective: 100000px;
animation: scene var(--animation) linear;
}
.scene *, .scene *:before, .scene *:after {
content: '';
position: absolute;
transform-style: preserve-3d;
transform-origin: 0 0 0;
}
.cover {
position: absolute;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
mix-blend-mode: hard-light;
font-family: "Prompt", sans-serif;
color: white;
z-index: 999;
animation: cover var(--animation) ease;
}
.cover::before {
content: "│││";
width: 296px; height: 48px;
border-bottom: 2px solid white;
font-size: 22px;
text-align: center;
letter-spacing: -15px;
line-height: 16px;
}
.cover h1 {
margin: 40px 0 26px;
font-size: 58px;
font-weight: 500;
text-transform: uppercase;
line-height: 67px;
}
.cover h2 {
width: 296px;
margin: 36px 0 84px;
font-weight: 200;
font-size: 21px;
text-transform: uppercase;
text-align: center;
line-height: 24px;
letter-spacing: -1px;
}
.cover h3 {
width: 296px;
margin: 0;
font-weight: 200;
font-size: 15px;
line-height: 6px;
text-align: center;
background: linear-gradient(0deg, white, white) 0px 2px / 105px 2px no-repeat, linear-gradient(0deg, white, white) 191px 2px / 105px 2px no-repeat;
}
.cover .cover__button {
position: relative;
width: 42px; height: 42px;
border-radius: 99em;
box-shadow: inset 0 0 0 4px white;
transform-origin: center center;
animation: coverButton var(--animation) ease;
}
.cover .cover__button::before {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 50px; height: 50px;
border-radius: 99em;
box-shadow: 0 0 0 2px white;
}
.cover .cover__button::after {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 50px; height: 50px;
border-radius: 999em;
box-shadow: 0 0 0 1px white;
transform-origin: center center;
animation: coverButtonShadow var(--animation) ease;
}
.building-1 {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(25em, 176em) rotateX(55deg) rotateZ(-45deg);
transform-style: preserve-3d;
--left-default-light: #FF676A;
--left-default-dark: #E34848;
--left-accent-light: #FFD4A3;
--left-accent-dark: #EDB88C;
--top-default-light: #FF8D7F;
--top-default-dark: #F36E5A;
--top-accent-light: #FFF8F5;
--top-accent-dark: #FCD3D7;
--right-default-light: #904872;
--right-default-dark: #6F305B;
--right-accent-light: #E6A79C;
--right-accent-dark: #C88884;
--left-window-inner: #461336;
--left-window-v: #66274C;
--right-window-v: #973B5D;
--right-window-inner: #742849;
--left-window-h: #9B3C4D;
--right-window-h: #A14C6D;
}
.building-1::before {
width: 100%; height: 39em;
background: var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
.building-1 > div:nth-child(1) {
height: 8em; width: 1em;
background: var(--top-default-light);
transform: translateY(-8em) translateZ(8em);
}
.building-1 > div:nth-child(1)::before {
width: 62em; height: 23em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.5em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 62em 0em, 62em 23em, 23em 23em, 23em 8em, 15em 8em, 15em 0em, 7em 0em, 7em 8em, 0em 8em);
transform: rotateY(90deg) translateX(-15em);
}
.building-1 > div:nth-child(1)::after {
width: 8em; height: 8em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(-90deg);
}
.building-1 > div:nth-child(2) {
height: 62em; width: 15em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
transform: translate(15em, -39em) translateZ(-47em) rotateX(-90deg);
transform-origin: bottom left;
}
.building-1 > div:nth-child(2)::before {
height: 23em; width: 15em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.75em 2em/3em 2em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 23em, 0em 23em, 0em 15em, 1em 15em, 1em 7em, 0em 7em);
transform: translate(-15em, -8em) translateZ(-23em);
}
.building-1 > div:nth-child(2)::after {
height: 70em; width: 23em;
background: linear-gradient(var(--left-default-dark), var(--left-default-dark)) 1.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 8.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 12em 10em/1.5em 2em no-repeat, var(--left-default-light);
clip-path: polygon(0em 8em, 0em 70em, 23em 70em, 23em 0em, 22em 0em, 22em 1em, 21em 1em, 21em 2em, 20em 2em, 20em 3em, 19em 3em, 19em 4em, 18em 4em, 18em 5em, 17em 5em, 17em 6em, 16em 6em, 16em 7em, 15em 7em, 15em 8em);
transform: translateY(-8em) rotateY(90deg);
}
.building-1 > div:nth-child(3) {
height: 8em; width: 95em;
background: linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 1em/95em 0.3em no-repeat, linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 7em/95em 0.3em no-repeat, var(--top-default-light);
transform: translateY(-8em) translateZ(23em);
}
.building-1 > div:nth-child(3)::before {
height: 15em; width: 15em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 8em 0em, 8em 4em, 9.2em 5.9em, 11.3em 7em, 15em 7em, 15em 15em, 0em 15em);
transform: translate(15em, 16em) translateZ(-8em);
}
.building-1 > div:nth-child(3)::after {
height: 30em; width: 72em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 72em 0em, 72em 28em, 46em 28em, 46em 18em, 45em 15em, 44em 13em, 43em 11.7em, 42em 10.6em, 41em 9.8em, 40em 9.1em, 39em 8.6em, 37em 8em, 35em 8em, 31em 8.3em, 30em 8.5em, 29em 8.9em, 27em 10.1em, 26em 11.1em, 25em 12.3em, 24em 13.7em, 23.4em 15.5em, 23em 30em, 0em 30em);
transform: translate(23em, 8em) rotateX(-90deg);
}
.building-1 > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateX(15em) translateZ(23em);
}
.building-1 > div:nth-child(4)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(4)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(15em, 3em) translateZ(20em);
}
.building-1 > div:nth-child(5)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(5)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(6) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(15em, 6em) translateZ(17em);
}
.building-1 > div:nth-child(6)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(6)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
.building-1 > div:nth-child(7) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 1em) translateZ(22em) rotateX(90deg);
}
.building-1 > div:nth-child(7)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(7)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(8) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 4em) translateZ(19em) rotateX(90deg);
}
.building-1 > div:nth-child(8)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(8)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-4em) translateZ(-4em);
}
.building-1 > div:nth-child(9) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 7em) translateZ(16em) rotateX(90deg);
}
.building-1 > div:nth-child(9)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translate(-14em, 7em) translateZ(8em);
}
.building-1 > div:nth-child(9)::after {
width: 6em; height: 3em;
background: var(--left-default-light);
transform: translate(-14em, 7em) translateZ(8em) rotateY(-90deg);
}
.building-1 > div:nth-child(10) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(1em, -7em) translateZ(26em);
}
.building-1 > div:nth-child(10)::before {
width: 22.9em; height: 24em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 23em 0em, 23em 16.3em, 12em 16.3em, 12em 16.3em, 12em 16.3em, 13em 15.6em, 14em 15em, 15em 13em, 15em 11em, 14em 9.3em, 13em 8.6em, 12em 7.8em, 0em 7.8em);
transform: translate(67.9em, 7.3em) translateZ(-25.9em);
}
.building-1 > div:nth-child(10)::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(82em, 15.4em) translateZ(-35em);
}
.building-1 > div:nth-child(11) {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(82em, 8.4em) translateZ(-10em);
}
.building-1 > div:nth-child(11)::before {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(11)::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(12) {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(79em, 8.4em) translateZ(-13em);
}
.building-1 > div:nth-child(12)::before {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(12)::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(13) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(82em, 8.3em) translateZ(-10.0em) rotateY(90deg);
}
.building-1 > div:nth-child(13)::before {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
.building-1 > div:nth-child(13)::after {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
.building-1 > div:nth-child(14) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(81em, 8.3em) translateZ(-12em) rotateY(-90deg);
}
.building-1 > div:nth-child(14)::before {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
.building-1 > div:nth-child(14)::after {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
.building-1 > div:nth-child(15) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(78em, 8.3em) translateZ(-15em) rotateY(-90deg);
}
.building-1 > div:nth-child(15)::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
.building-1 > div:nth-child(15)::after {
width: 80em; height: 56em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 80em 0em, 80em 8em, 75em 8em, 67em 8.2em, 67em 16.1em, 51em 16.1em, 51em 24.1em, 50em 24.1em, 50em 25.1em, 49em 25.1em, 49em 26.1em, 48em 26.1em, 48em 27.1em, 47em 27.1em, 47em 28.1em, 46em 28.1em, 46em 29.1em, 45em 29.1em, 45em 30.1em, 44em 30.1em, 44em 31.1em, 43em 31.1em, 43em 32.1em, 42em 32.1em, 42em 33em, 41em 33em, 41em 34em, 40em 34em, 40em 35em, 39em 35em, 39em 36em, 38em 36em, 38em 37em, 37em 37em, 37em 38em, 36em 38em, 36em 39em, 35em 39em, 35em 55.1em, 0em 55.1em);
transform: translate(-52em, -16.4em) translateZ(9em);
}
.building-1 > div:nth-child(16) {
width: 8em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
transform: translate(69em, 8em) translateZ(-16em);
}
.building-1 > div:nth-child(16)::before {
width: 16em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(14.4em) translateY(1em) translateZ(8.5em);
}
.building-1 > div:nth-child(16)::after {
width: 22em; height: 19.5em;
background: linear-gradient(90deg, var(--right-default-light) 50%, var(--left-default-light));
transform: translateY(0em) translateZ(-3.5em) rotateX(90deg);
}
.building-1 > div:nth-child(17) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 16em) translateZ(-17em);
}
.building-1 > div:nth-child(17)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(17)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(18) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 19em) translateZ(-20em);
}
.building-1 > div:nth-child(18)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(18)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(19) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 22em) translateZ(-23em);
}
.building-1 > div:nth-child(19)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(19)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(20) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 25em) translateZ(-26em);
}
.building-1 > div:nth-child(20)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(20)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(21) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 28em) translateZ(-29em);
}
.building-1 > div:nth-child(21)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(21)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(22) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 16em) translateZ(-17em) rotateX(90deg);
}
.building-1 > div:nth-child(22)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(22)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(23) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 19em) translateZ(-20em) rotateX(90deg);
}
.building-1 > div:nth-child(23)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(23)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(24) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 22em) translateZ(-23em) rotateX(90deg);
}
.building-1 > div:nth-child(24)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(24)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(25) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 25em) translateZ(-26em) rotateX(90deg);
}
.building-1 > div:nth-child(25)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(25)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(26) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 28em) translateZ(-29em) rotateX(90deg);
}
.building-1 > div:nth-child(26)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(26)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(27) {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
transform: translate(69em, 31em) translateZ(-32em);
}
.building-1 > div:nth-child(27)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
.building-1 > div:nth-child(27)::after {
width: 19.5em; height: 16em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 16em 2.5em/2em 3em repeat-y, var(--left-default-light);
transform: translateX(8em) rotateY(-90deg);
}
.building-1 > div:nth-child(28) {
width: 31.2em; height: 24em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 29.4em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 27.7em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 25.9em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 24.2em 3em/1.7em 3em repeat-y, var(--left-default-light);
transform: translateX(92em) translateZ(-0.2em) rotateY(-90deg);
}
.building-1 > div:nth-child(28)::before {
width: 86em; height: 47em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 47em, 56em 47em, 56em 46em, 57em 46em, 57em 45em, 58em 45em, 58em 44em, 59em 44em, 59em 43em, 60em 43em, 60em 42em, 61em 42em, 61em 41em, 62em 41em, 62em 40em, 63em 40em, 63em 24em, 90em 24em, 90em 0em);
transform: translate(-71em, 16em) translateZ(-32em) rotateX(90deg);
}
.building-1 > div:nth-child(28)::after {
width: 54.5em; height: 24em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 24em, 35em 24em, 35em 16em, 54.5em 16em, 54.5em 0em);
transform: translate(-67em, 47em) translateZ(-1em) rotateX(90deg);
}
.building-1 > div:nth-child(29) {
width: 16em; height: 16em;
background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
transform: translate(77em, 31em) translateZ(-12.5em);
}
.building-1 > div:nth-child(29)::before {
width: 12em; height: 12em;
background: var(--top-default-light);
transform: translate(2em, 2em) translateZ(4em);
}
.building-1 > div:nth-child(29)::after {
width: 4em; height: 12em;
background: var(--left-default-light);
transform: translate(2em, 2em) rotateY(-90deg);
}
.building-1 > div:nth-child(30) {
width: 12em; height: 4em;
background: var(--right-default-light);
transform: translate(79em, 45em) translateZ(-12.5em) rotateX(90deg);
}
.building-1 > div:nth-child(30)::before {
width: 26em; height: 1em;
background: var(--right-default-light);
transform: translate(12em, 35.5em) translateZ(20em);
}
.building-1 > div:nth-child(30)::after {
width: 26em; height: 1em;
background: var(--left-default-light);
transform: translate(12em, 35.5em) translateZ(46em) rotateY(90deg);
}
.building-1 > div:nth-child(31) {
width: 26em; height: 26em;
background: var(--top-default-light);
transform: translate(91em, -1em) translateZ(24em);
}
.building-1 > div:nth-child(31)::before {
width: 24em; height: 7em;
background: var(--right-default-light);
transform: translate(1em, 25em) translateZ(0em) rotateX(90deg);
}
.building-1 > div:nth-child(31)::after {
width: 20em; height: 6em;
background: var(--right-default-light);
transform: translate(3em, 23em) translateZ(5em) rotateX(90deg);
}
.building-1 > div:nth-child(32) {
width: 24em; height: 24em;
background: var(--top-default-light);
transform: translateX(92em) translateZ(31em);
}
.building-1 > div:nth-child(32)::before {
width: 24em; height: 24em;
background: var(--top-default-light);
transform: translateZ(3em);
}
.building-1 > div:nth-child(32)::after {
width: 20em; height: 20em;
background: var(--top-default-light);
transform: translate(2em, 2em) translateZ(4em);
}
.building-1 > div:nth-child(33) {
width: 4em; height: 20em;
background: var(--left-default-light);
transform: translate(94em, 2em) translateZ(31em) rotateY(-90deg);
}
.building-1 > div:nth-child(33)::before {
width: 1em; height: 24em;
background: var(--left-default-light);
transform: translate(2em, -2em) translateZ(2em);
}
.building-1 > div:nth-child(33)::after {
width: 1em; height: 24em;
background: var(--right-default-light);
transform: translate(2em, 22em) translateZ(-22em) rotateX(90deg);
}
.building-1 > div:nth-child(34) {
width: 65em; height: 2em;
background: var(--left-default-dark);
transform: translate(3em, -5em) translateZ(9em) rotateY(-90deg);
}
.building-1 > div:nth-child(34)::before {
width: 65em; height: 4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translate(1em, -1em) translateZ(1em);
}
.building-1 > div:nth-child(34)::after {
width: 65em; height: 4em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translate(1em, 3em) translateZ(1em) rotateX(-90deg);
}
.building-1 > div:nth-child(35) {
width: 2em; height: 65em;
background: linear-gradient(180deg, var(--right-default-dark) 96%, transparent 0%);
transform: translate(3em, -3em) translateZ(10em) rotateX(90deg);
}
.building-1 > div:nth-child(35)::before {
width: 1em; height: 65em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(2em);
}
.building-1 > div:nth-child(35)::after {
width: 1em; height: 65em;
background: var(--left-default-light);
transform: translateX(2em) rotateY(90deg);
}
.building-1 > div:nth-child(36) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -7em) translateZ(26em);
}
.building-1 > div:nth-child(36)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
.building-1 > div:nth-child(36)::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(37) {
width: 27em; height: 2em;
background: var(--left-default-dark);
transform: translate(89em, -5em) translateZ(26em) rotateY(-90deg);
}
.building-1 > div:nth-child(37)::before {
width: 27em; height: 4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translateY(-1em) translateZ(1em);
}
.building-1 > div:nth-child(37)::after {
width: 27em; height: 4em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translateY(3em) translateZ(1em) rotateX(-90deg);
}
.building-1 > div:nth-child(38) {
width: 2em; height: 27em;
background: var(--right-default-dark);
transform: translate(89em, -3em) translateZ(26em) rotateX(90deg);
}
.building-1 > div:nth-child(38)::before {
width: 1em; height: 27em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(2em);
}
.building-1 > div:nth-child(38)::after {
width: 1em; height: 27em;
background: var(--left-default-light);
transform: translateX(2em) rotateY(90deg);
}
.building-1 > div:nth-child(39) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -7em) translateZ(57em);
}
.building-1 > div:nth-child(39)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
.building-1 > div:nth-child(39)::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(40) {
width: 6em; height: 40em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
transform: translate(87em, -41em) translateZ(60em);
}
.building-1 > div:nth-child(40)::before {
width: 6em; height: 2em;
background: var(--right-default-light);
transform: translateY(40em) translateZ(-2em) rotateX(90deg);
}
.building-1 > div:nth-child(40)::after {
width: 2em; height: 40em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(41) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(79em, -85em) translateZ(19em);
}
.building-1 > div:nth-child(41)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
.building-1 > div:nth-child(41)::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(42) {
width: 53em; height: 6em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
transform: translate(79em, -85em) translateZ(22em);
}
.building-1 > div:nth-child(42)::before {
width: 53em; height: 2em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-2em) rotateX(90deg);
}
.building-1 > div:nth-child(42)::after {
width: 2em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(43) {
transform: translateY(15em) translateZ(55em);
}
.building-1 > div:nth-child(43)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(18em, 8em) translateZ(-50em) rotateX(-90deg);
}
.building-1 > div:nth-child(43)::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(26em, 8em) translateZ(-50em) rotateX(-90deg);
}
.building-1 > div:nth-child(44) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(11em, 15em) translateZ(-6em) rotateX(-90deg);
}
.building-1 > div:nth-child(44)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(-8em);
}
.building-1 > div:nth-child(44)::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(69em, 20em) translateZ(32em);
}
.building-1 > div:nth-child(45) {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(88em, 47em) translateZ(-27em) rotateX(-90deg);
}
.building-1 > div:nth-child(45)::before {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(30em, -35em) translateZ(-31em);
}
.building-1 > div:nth-child(45)::after {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(15em, -35em) translateZ(-31em);
}
.building-1 > div:nth-child(46) {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(110.5em, 16em) translateZ(8em) rotateX(-90deg);
}
.building-1 > div:nth-child(46)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-v);
border-left: 3px solid #A42037;
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-111em, 14em) translateZ(-6em) rotateY(-90deg);
}
.building-1 > div:nth-child(46)::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-v);
border-left: 3px solid #A42037;
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-111em, 14em) translateZ(-14em) rotateY(-90deg);
}
.building-1 > div:nth-child(47) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translate(68em, 34em) translateZ(-37em) rotateY(90deg);
}
.building-1 > div:nth-child(47)::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(6em);
}
.building-1 > div:nth-child(47)::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(-8em);
}
.building-1 > div:nth-child(48) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translate(91em, 14em) translateZ(17em) rotateY(90deg);
}
.building-1 > div:nth-child(48)::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(-8em);
}
.building-1 > div:nth-child(48)::after {
border-top: 5em solid transparent;
border-bottom: 5em solid transparent;
border-right: 10em solid var(--left-accent-light);
transform: translate(17.1em, 19.2em) translateZ(-5.9em) rotateY(30deg);
}
.building-1 > div:nth-child(49) {
width: 18em; height: 18em;
background: var(--top-accent-light);
transform: translate(95em, 3em) translateZ(36em);
}
.building-1 > div:nth-child(49)::before {
border-right: 5em solid transparent;
border-left: 5em solid transparent;
border-bottom: 10em solid var(--right-accent-light);
transform: translate(-15em, 36em) translateZ(-36em) rotateX(-60deg);
}
.building-1 > div:nth-child(49)::after {
width: 1em; height: 18em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(50) {
width: 15em; height: 15em;
transform: translate(96em, 4em) translateZ(36em);
}
.building-1 > div:nth-child(50)::before {
border-bottom: 8em solid transparent;
border-top: 8em solid transparent;
border-left: 16em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
.building-1 > div:nth-child(50)::after {
border-right: 8em solid transparent;
border-left: 8em solid transparent;
border-top: 16em solid var(--right-accent-light);
transform: translate(0em, 16em) rotateX(120deg);
}
.building-1 > div:nth-child(51) {
width: 18em; height: 1em;
background: var(--right-accent-light);
transform: translate(95em, 21em) translateZ(36em) rotateX(-90deg);
}
.building-1 > div:nth-child(52) {
width: 3em; height: 3em;
transform: translate(103em, 10em) translateZ(53em);
}
.building-1 > div:nth-child(52)::before {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--left-accent-light);
transform: rotateZ(90deg) rotateX(-240deg);
}
.building-1 > div:nth-child(52)::after {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--right-accent-light);
transform: translateY(3em) rotateX(120deg);
}
.building-1 > div:nth-child(52) > div:nth-child(1)::before {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--left-accent-dark);
transform: rotateZ(90deg) rotateX(-120deg);
}
.building-1 > div:nth-child(52) > div:nth-child(1)::after {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--right-accent-dark);
transform: translateY(3em) rotateX(240deg);
}
.building-1 > div:nth-child(53) {
width: 65em; height: 2em;
background: var(--left-default-dark);
transform: translate(85.7em, -88em) translateZ(-53em) rotateY(-90deg);
}
.building-1 > div:nth-child(53)::before {
width: 65em; height: 4.4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.1em, 0em 3.1em, 0em 4.1em, 65em 4.1em, 65em 0em);
transform: translateY(-0.8em) translateZ(1.23em);
}
.building-1 > div:nth-child(53)::after {
width: 65em; height: 4.5em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.0em, 0em 3.0em, 0em 4.0em, 65em 4.1em, 65em 0em);
transform: translateY(3em) translateZ(1em) rotateX(-90deg);
}
.building-1 > div:nth-child(54) {
width: 1em; height: 65em;
background: var(--right-default-dark);
transform: translate(81.7em, -80.9em) translateZ(-49em) rotateX(90deg);
}
.building-1 > div:nth-child(54)::before {
width: 0.9em; height: 65em;
background: var(--right-default-light);
transform: translateX(-2em) translateZ(2em);
}
.building-1 > div:nth-child(54)::after {
width: 1.1em; height: 65em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(90deg);
}
.building-1 > div:nth-child(55) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -46em) translateZ(75em);
}
.building-1 > div:nth-child(55)::before {
width: 6em; height: 15em;
background: var(--right-default-light);
transform: translateY(6em) rotateX(-90deg);
}
.building-1 > div:nth-child(55)::after {
width: 15em; height: 6em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 1em, 4em 1em, 3em 1.2em, 2em 1.7em, 1em 2.8em, 1em 3.6em, 2em 4.7em, 3em 5em, 15em 5em, 15em 6em, 0em 6em);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(56) {
width: 4em; height: 4em;
background: var(--top-default-light);
transform: translate(88em, -45em) translateZ(76em);
}
.building-1 > div:nth-child(56)::before {
width: 1em; height: 4em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(56)::after {
width: 4em; height: 1em;
background: var(--right-default-light);
transform: translateY(4em) rotateX(-90deg);
}
.building-1 > div:nth-child(57) {
width: 4em; height: 14em;
background: linear-gradient(90deg, #6C507C, #2B2258);
transform: translate(87em, -45em) translateZ(74em) rotateX(-90deg);
}
.building-1 > div:nth-child(57)::before {
border-bottom: 1em solid transparent;
border-top: 1em solid transparent;
border-left: 2em solid var(--left-accent-light);
transform: translate(2em, -2em) translateZ(1em) rotateX(90deg) rotateY(-60deg);
}
.building-1 > div:nth-child(57)::after {
border-right: 1em solid transparent;
border-left: 1em solid transparent;
border-top: 2em solid var(--right-accent-light);
transform: translate(2em, -2em) translateZ(3em) rotateX(-150deg);
}
.building-1 > .mooving-part-1 {
width: 8em; height: 24em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 3px var(--top-accent-light), inset 0 0 0 5px var(--top-accent-dark);
transform: translate(71em, -52em) translateZ(23em);
animation: b1Mp1 var(--animation) linear;
}
.building-1 > .mooving-part-1::before {
width: 16em; height: 24em;
background: linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 9em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 10.8em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 12.6em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 14.3em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 16.1em 3em/1.7em 3em repeat-y, var(--left-accent-light);
clip-path: polygon(0em 0em, 0em 24em, 8em 24em, 8em 0em, 9em 0em, 9em 24em, 17em 24em, 17em 0em);
transform: rotateY(90deg);
}
.building-1 > .mooving-part-1::after {
width: 8em; height: 24em;
background: var(--top-accent-dark);
transform: translateZ(-9em);
}
.building-1 > .mooving-part-1 > div:nth-child(1) {
width: 2em; height: 2em;
background: var(--right-accent-dark);
transform: translateY(7em) translateZ(-17em) rotateX(-90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(1)::before {
width: 24em; height: 2em;
background: var(--left-accent-light);
clip-path: polygon(0em 0em, 0em 2em, 8em 2em, 8em 0em, 9em 0em, 9em 2em, 16em 2em, 16em 0em, 17em 0em, 17em 2em, 26em 2em, 26em 0em);
transform: translateZ(17em) rotateY(90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(1)::after {
width: 2em; height: 2em;
background: var(--right-accent-dark);
transform: translateZ(8em);
}
.building-1 > .mooving-part-1 > div:nth-child(2) {
width: 8em; height: 2em;
background: var(--right-accent-light);
transform: translateY(24em) translateZ(-17em) rotateX(-90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(2)::before {
width: 8em; height: 16em;
background: linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 9em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 10.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 12.1em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 13.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 15.1em/3em 1.5em repeat-x, var(--right-accent-light);
clip-path: polygon(0em 0em, 0em 8em, 8em 8em, 8em 9em, 0em 9em, 0em 16em, 8em 16em, 8em 0em);
transform: translateY(-17em);
}
.building-1 > .mooving-part-1 > div:nth-child(2)::after {
width: 8em; height: 24em;
background: var(--top-accent-dark);
transform: rotateX(-90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(3) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 6em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(3)::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(3)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(4) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 14em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(4)::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(4)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(5) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 22em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(5)::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(5)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 {
width: 24em; height: 8em;
background: var(--top-accent-light);
box-shadow: inset 0 3px var(--top-accent-light), inset 0 -3px var(--top-accent-light), inset 0 4px var(--top-accent-dark), inset 0 -4px var(--top-accent-dark);
transform: translate(30em, 15em) translateZ(-18em);
animation: b1Mp2 var(--animation) linear;
}
.building-1 > .mooving-part-2::before {
width: 24em; height: 62em;
background: linear-gradient(0deg, transparent 63%, var(--right-accent-light) 63%, var(--right-accent-light) 88%, transparent 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
transform: translateY(8em) rotateX(-90deg);
}
.building-1 > .mooving-part-2 > div:nth-child(1) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-6em);
animation: b1Mp2TopPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(1)::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(1)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(2) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-13.5em);
animation: b1Mp2TopPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(2)::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(2)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(3) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-21em);
animation: b1Mp2TopPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(3)::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(3)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
.building-1 > .rocks::before {
width: 10em; height: 10em;
background: linear-gradient(45deg, #42313C 50%, transparent 0%);
transform: translateY(-8em) translateZ(-31em) rotateX(-45deg) rotateY(-190deg);
}
.building-1 > .rocks::after {
width: 10em; height: 10em;
background: linear-gradient(-134deg, #2E222F 51%, transparent 0%);
transform: translateY(-8em) translateZ(-30em) rotateX(-23deg) rotateY(-233deg) rotateZ(-14deg);
}
.building-1 > .rocks > div:nth-child(1) {
width: 6em; height: 8em;
background: #604854;
transform: translateY(-2em) translateZ(-32em) rotateX(-3deg) rotateY(160deg) rotateZ(-2deg);
}
.building-1 > .rocks > div:nth-child(1)::before {
width: 7em; height: 9em;
background: linear-gradient(195deg, transparent 19%, #553E4A 0%, #553E4A 92%, transparent 0%);
transform: translateX(6em) rotateY(-41deg);
}
.building-1 > .rocks > div:nth-child(1)::after {
width: 11em; height: 8em;
background: linear-gradient(41deg, #453344 76%, transparent 0%);
transform: translateY(8em) rotateX(76deg);
}
.building-1 > .rocks > div:nth-child(2) {
width: 7em; height: 7em;
background: linear-gradient(215deg, #473444 70%, transparent 0%);
transform: translate(-7em, 10em) translateZ(-32em) rotateX(-20deg) rotateZ(10deg);
}
.building-1 > .rocks > div:nth-child(2)::before {
width: 10em; height: 6em;
background: linear-gradient(195deg, #3B2735 70%, transparent 0%);
transform: rotateY(90deg);
}
.building-1 > .rocks > div:nth-child(2)::after {
width: 7.7em; height: 10em;
background: linear-gradient(7deg, #2C2230 91%, transparent 0%);
transform: translateY(3.4em) rotateX(-75deg) rotateY(-27deg);
}
.building-1 > .rocks > div:nth-child(3) {
width: 19em; height: 14em;
background: linear-gradient(145deg, #44313C 46%, transparent 0%);
transform: translate(15em, 15em) translateZ(-38em) rotateX(-47deg) rotateY(180deg);
}
.building-1 > .rocks > div:nth-child(3)::before {
width: 6em; height: 19em;
background: linear-gradient(113deg, transparent 7%, #684D5A 8%, #684D5A 55%, transparent 0%);
transform: translate(-40em, 10em) translateZ(-2em) rotateX(-46deg);
}
.building-1 > .rocks > div:nth-child(3)::after {
width: 10em; height: 7em;
background: linear-gradient(175deg, #623D4C 50%, transparent 0%);
transform: translate(-34em, 10em) translateZ(-2em) rotateX(-53deg) rotateY(-70deg);
}
.building-1 > .rocks > div:nth-child(4) {
width: 16.2em; height: 11em;
background: linear-gradient(123deg, #573F4B 70%, transparent 0%);
transform: translate(49em, 26em) translateZ(-44em) rotateX(-30deg) rotateY(-8deg) rotateZ(48deg);
}
.building-1 > .rocks > div:nth-child(4)::before {
width: 11em; height: 13em;
background: linear-gradient(136deg, #3F2A31 53%, transparent 0%), linear-gradient(141deg, #3F2A31 57%, transparent 0%);
transform: translateX(16.2em) rotateX(-20deg) rotateY(-60deg) rotateZ(52deg);
}
.building-1 > .rocks > div:nth-child(4)::after {
width: 4em; height: 17em;
background: linear-gradient(78deg, transparent 31%, #5A4551 31%, #5A4551 44%, transparent 0%), linear-gradient(72deg, transparent 23%, #5A4551 23%, #5A4551 38%, transparent 0%);
transform: translate(19em, 11em) translateZ(11em) rotateY(40deg) rotateZ(58deg);
}
.building-1 > .rocks > div:nth-child(5) {
width: 5em; height: 9em;
background: linear-gradient(143deg, #4F3945 57%, transparent 0%) 0em 6em / 5em 3em no-repeat, linear-gradient(125deg, #4F3945 30%, transparent 0%), linear-gradient(76deg, #4F3945 65%, transparent 0%) 0em 0em / 6em 6em no-repeat;
transform: translate(46em, 55.5em) translateZ(-39em) rotateX(-62deg) rotateY(-20deg) rotateZ(86deg);
}
.building-1 > .rocks > div:nth-child(6) {
width: 35em; height: 34em;
background: #3d2f36;
transform: translate(20em, 23em) translateZ(-47em) rotateX(-90deg);
}
.building-2 {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg);
transform-style: preserve-3d;
animation: secondBuilding var(--animation);
--left-default-light: #F94B68;
--left-default-dark: #E23A53;
--left-accent-light: #FFD4A2;
--left-accent-dark: #F1C097;
--top-default-light: #FE817C;
--top-default-dark: #FF6D68;
--top-accent-light: #ffefdc;
--top-accent-dark: #f9d1c1;
--right-default-light: #AC2F5A;
--right-default-dark: #9E1945;
--right-accent-light: #C18D90;
--right-accent-dark: #B57578;
--left-window-inner: #6F082D;
--left-window-v: #BF3B5B;
--left-window-h: #D0556E;
--right-window-inner: #720A30;
--right-window-v: #9B294A;
--right-window-h: #B64F71;
}
.building-2::before {
width: 100%; height: 19em;
background: var(--right-default-light);
transform: translateY(15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.building-2::after {
width: 330em; height: 301em;
background: radial-gradient(#a7a2a7, transparent 73%) 128em 133em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 128em 270em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 8em 150em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 38em 230em/60em 16em no-repeat, radial-gradient(#ada6ad, transparent 73%) 138em 210em/80em 22em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 248em 0em/58em 70em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 0em 0em/160em 140em no-repeat, linear-gradient(26deg, #979298 40%, #c2b0b2 100%);
transform: translate(142em, -150em) translateZ(-160em) rotateX(90deg) rotateY(90deg) rotateZ(0deg);
}
.building-2 > div:nth-child(1) {
width: 19em; height: 15em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(1)::before {
width: 46em; height: 7em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 0.8em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(-46em, 8em) translateZ(15em);
}
.building-2 > div:nth-child(1)::after {
width: 62em; height: 54em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.4em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 62em 0em, 62em 33em, 9em 33em, 9em 38em, 62em 38em, 62em 54em, 0em 54em);
transform: translate(-68em, -24em) translateZ(31em);
}
.building-2 > div:nth-child(2) {
width: 25em; height: 7em;
background: var(--top-default-light);
box-shadow: inset -10.6em 0em var(--top-default-light), inset 0em 0em 0em 1.1em var(--top-default-light), inset 0em 0em 0em 1.5em var(--top-default-dark), inset -11em 0em var(--top-default-dark);
transform: translate(15em, 8em) translateZ(46em);
}
.building-2 > div:nth-child(2)::before {
width: 16em; height: 65em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 1.4em/3em 2em repeat-x, var(--right-default-light);
transform: translateY(7em) rotateX(-90deg);
}
.building-2 > div:nth-child(2)::after {
width: 8em; height: 54em;
background: var(--top-default-light);
transform: translate(16em, -32em) translateZ(22em);
}
.building-2 > div:nth-child(3) {
width: 8em; height: 53.4em;
background: var(--right-default-light);
transform: translate(31em, 30em) translateZ(68em) rotateX(-90deg);
}
.building-2 > div:nth-child(3)::before {
width: 15em; height: 48em;
background: conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
box-shadow: inset 0 16em var(--right-default-light), inset 0 -15.5em var(--right-default-light);
clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
transform: translate(-15em, 13em) translateZ(-30em);
}
.building-2 > div:nth-child(3)::after {
width: 15em; height: 48em;
background: conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
box-shadow: inset 0 16em var(--left-default-light), inset 0 -15.5em var(--left-default-light);
clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
transform: translate(-15em, 13em) translateZ(-30em) rotateY(90deg);
}
.building-2 > div:nth-child(4) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(16em, -15em) translateZ(53em);
}
.building-2 > div:nth-child(4)::before {
width: 15em; height: 15em;
background: var(--top-default-light);
clip-path: polygon(3em 0em, 15em 0em, 15em 15em, 0em 15em, 0em 0em, 3em 0em, 3em 1em, 1em 1em, 1em 3em, 0em 3em, 0em 5em, 1em 5em, 1em 10em, 0em 10em, 0em 12em, 1em 12em, 1em 14em, 3em 14em, 3em 15em, 5em 15em, 5em 14em, 10em 14em, 10em 15em, 12em 15em, 12em 14em, 14em 14em, 14em 12em, 15em 12em, 15em 10em, 14em 10em, 14em 5em, 15em 5em, 15em 3em, 14em 3em, 14em 1em, 12em 1em, 12em 0em, 10em 0em, 10em 1em, 5em 1em, 5em 0em);
transform: translateZ(2em);
}
.building-2 > div:nth-child(4)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateY(3em) rotateX(90deg);
}
.building-2 > div:nth-child(5) {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 14em 0em var(--right-default-light);
transform: translate(15em, -4em) translateZ(54em) rotateX(90deg);
}
.building-2 > div:nth-child(5)::before {
width: 1em; height: 2em;
background: var(--left-default-light);
box-shadow: -14em 0em var(--left-default-light);
transform: translateX(5em) translateZ(-4em) rotateY(90deg);
}
.building-2 > div:nth-child(5)::after {
width: 1em; height: 2em;
background: var(--left-default-light);
transform: translateX(12em) translateZ(-4em) rotateY(90deg);
}
.building-2 > div:nth-child(6) {
width: 13em; height: 13em;
transform: translate(17em, -14em) translateZ(53em);
}
.building-2 > div:nth-child(6)::before {
width: 13.5em; height: 13em;
background: var(--top-accent-light);
clip-path: polygon(0em 0em, 13.5em 6.5em, 0em 13em);
transform: rotateY(-61deg);
}
.building-2 > div:nth-child(6)::after {
bottom: 0;
height: 13.5em; width: 13em;
background: var(--top-accent-dark);
clip-path: polygon(0em 13.5em, 6.5em 0em, 13em 13.5em);
transform-origin: bottom center;
transform: rotateX(-61deg);
}
.building-2 > div:nth-child(7) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(3em, 15em) translateZ(-4em) rotateX(-90deg);
}
.building-2 > div:nth-child(7)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(7em);
}
.building-2 > div:nth-child(7)::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-v);
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(-3em) translateZ(-5em) rotateY(-90deg);
}
.building-2 > div:nth-child(8) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-h);
border-top: 3px solid var(--left-window-v);
border-radius: 0 2em 2em 0;
transform: translateY(2em) translateZ(-11em) rotateY(-90deg);
}
.building-2 > div:nth-child(8)::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(52em, -9em) translateZ(-16em);
}
.building-2 > div:nth-child(8)::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(52em, -16em) translateZ(-16em);
}
.building-2 > div:nth-child(9) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(19em) translateZ(48em) rotateX(-90deg);
}
.building-2 > div:nth-child(9)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(7em);
}
.building-2 > div:nth-child(9)::after {
width: 3em; height: 2em;
background: var(--right-default-light);
box-shadow: 7em 0em var(--right-default-light), 2em 0em var(--right-default-light);
transform: translate(11em, -7em) translateZ(-10em) rotateY(-90deg);
}
.building-2 > div:nth-child(10) {
width: 6em; height: 13em;
background: linear-gradient(90deg, #B83C63 10%, #792249 10%, #541538 100%);
transform: translate(31em, 9em) translateZ(59em) rotateX(-90deg);
}
.building-2 > div:nth-child(10)::before {
width: 26em; height: 30em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 16em, 26em 16em, 26em 19em, 15em 30em, 8em 30em, 8em 7em, 0em 7em);
transform: translateY(44em) translateZ(21em) rotateX(90deg);
}
.building-2 > div:nth-child(10)::after {
width: 7em; height: 25em;
background: var(--right-default-light);
transform: translate(8em, 44em) translateZ(51em);
}
.building-2 > div:nth-child(11) {
width: 7em; height: 20em;
background: var(--right-default-light);
transform: translate(32em, 37em) translateZ(15em) rotateX(-90deg);
}
.building-2 > div:nth-child(11)::before {
width: 23em; height: 25em;
background: var(--left-default-light);
transform: translateX(7em) rotateY(-90deg);
}
.building-2 > div:nth-child(11)::after {
width: 45em; height: 61em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 9em 1em, 9em 2em, 10em 2em, 10em 3em, 11em 3em, 11em 4em, 12em 4em, 12em 5em, 13em 5em, 13em 6em, 14em 6em, 14em 7em, 23em 7em, 23em 8em, 24em 8em, 24em 9em, 25em 9em, 25em 10em, 26em 10em, 26em 11em, 27em 11em, 27em 12em, 28em 12em, 28em 13em, 29em 13em, 29em 14em, 30em 14em, 30em 15em, 31em 15em, 31em 16em, 32em 16em, 32em 17em, 33em 17em, 33em 18em, 34em 18em, 34em 19em, 35em 19em, 35em 20em, 36em 20em, 36em 21em, 37em 21em, 37em 22em, 45em 28em, 45em 61em, 22em 61em, 22em 23em, 16em 23em, 16em 61em, 0em 61em);
transform: translate(14em, -38em) translateZ(-7em) rotateY(-90deg);
}
.building-2 > div:nth-child(12) {
width: 11em; height: 11em;
transform: translate(2em, 2em);
}
.building-2 > div:nth-child(12)::before {
width: 11em; height: 11em;
box-sizing: border-box;
border-bottom: 5.5em solid transparent;
border-top: 5.5em solid transparent;
border-left: 11em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(12)::after {
width: 11em; height: 11em;
box-sizing: border-box;
border-left: 5.5em solid transparent;
border-right: 5.5em solid transparent;
border-bottom: 11em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(13) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(23em, 40em) translateZ(8em);
}
.building-2 > div:nth-child(13)::before {
width: 15em; height: 25em;
background: linear-gradient(180deg, transparent 24%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
.building-2 > div:nth-child(13)::after {
width: 25em; height: 15em;
background: linear-gradient(90deg, transparent 24%, var(--left-default-light) 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(14) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(23em, 42em) translateZ(-7em) rotateY(-90deg);
}
.building-2 > div:nth-child(14)::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-1em, 7em);
}
.building-2 > div:nth-child(14)::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--right-window-inner);
border-bottom: 3px solid var(--right-window-v);
border-left: 3px solid var(--right-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(13em) translateZ(-3em) rotateX(-90deg);
}
.building-2 > div:nth-child(15) {
width: 13em; height: 13em;
transform: translate(24em, 41em) translateZ(8em);
}
.building-2 > div:nth-child(15)::before {
border-top: 6.5em solid transparent;
border-bottom: 6.5em solid transparent;
border-left: 13em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(15)::after {
border-right: 6.5em solid transparent;
border-left: 6.5em solid transparent;
border-bottom: 13em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(16) {
width: 7em; height: 8em;
background: var(--right-default-light);
transform: translate(-45em, 83em) translateZ(-50em) rotateX(-90deg);
}
.building-2 > div:nth-child(16)::before {
width: 14em; height: 14em;
clip-path: polygon(0em 0em, 0em 14em, 14em 14em, 14em 7em, 7em 7em, 7em 0em);
background-image: linear-gradient(312deg, var(--top-default-light) 2.7em, transparent 0em) -1.5em -1.5em/7em 7em, linear-gradient(132deg, var(--top-default-light) 2.7em, transparent 0em) 1.9em 1.5em/7em 7em, linear-gradient(312deg, var(--top-default-dark) 3.4em, transparent 0em) -1em -1em/7em 7em, linear-gradient(132deg, var(--top-default-dark) 3.4em, transparent 0em) 1.4em 1em/7em 7em;
background-color: var(--top-default-light);
transform: rotateX(-90deg);
}
.building-2 > div:nth-child(16)::after {
width: 14em; height: 8em;
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(17) {
width: 6em; height: 6em;
transform: translate(-30em, 69em) translateZ(-35em);
}
.building-2 > div:nth-child(17)::before {
border-top: 3em solid transparent;
border-bottom: 3em solid transparent;
border-left: 6em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(17)::after {
border-right: 3em solid transparent;
border-left: 3em solid transparent;
border-bottom: 6em solid var(--right-accent-light);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(18) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-31em, 71em) translateZ(-46em) rotateY(-90deg);
z-index: 1;
}
.building-2 > div:nth-child(18)::before {
width: 20em; height: 8em;
background: var(--right-default-dark);
transform: translate(-5em, -27em) rotateX(-90deg);
}
.building-2 > div:nth-child(18)::after {
width: 22em; height: 14em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 18em 0em/2em 2em repeat-y, var(--left-default-light);
transform: translate(-19em, 9em) translateZ(-14em);
}
.building-2 > div:nth-child(19) {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0em 7.5em 0 1.7em var(--top-default-light), inset 0em 0em 0 1.7em var(--top-default-light), inset 0em 0em 0 2em var(--top-default-dark), inset 0em 7.5em 0 2em var(--top-default-dark);
transform: translate(46em, 22em) translateZ(53em);
}
.building-2 > div:nth-child(19)::before {
width: 8em; height: 9em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
transform: translateY(22em) translateZ(-7em);
}
.building-2 > div:nth-child(19)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(21em) translateZ(-6em);
}
.building-2 > div:nth-child(20) {
width: 15.3em; height: 22em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.2em 2em/2.5em 2em repeat-x, var(--right-default-light);
transform: translate(-17.3em, 95em) translateZ(-42em) rotateX(-90deg);
}
.building-2 > div:nth-child(20)::before {
width: 15.3em; height: 14em;
background: var(--top-default-light);
transform: rotateX(-90deg);
}
.building-2 > div:nth-child(20)::after {
width: 15em; height: 34em;
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0em 1.5em/2em 2em repeat-x, var(--left-default-light);
transform: translate(23.3em, -15em) rotateY(90deg);
}
.building-2 > div:nth-child(21) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 38em) translateZ(52em);
}
.building-2 > div:nth-child(21)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(21)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(22) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 41em) translateZ(49em);
}
.building-2 > div:nth-child(22)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(22)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateZ(1em) rotateX(-90deg);
}
.building-2 > div:nth-child(23) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 38em) translateZ(53em) rotateX(-90deg);
}
.building-2 > div:nth-child(23)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(23)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(24) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 42em) translateZ(49em) rotateX(-90deg);
}
.building-2 > div:nth-child(24)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(24)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(25) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 53em) translateZ(46em) rotateX(-90deg);
}
.building-2 > div:nth-child(25)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(25)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(26) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 56em) translateZ(43em) rotateX(-90deg);
}
.building-2 > div:nth-child(26)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(26)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(27) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 59em) translateZ(40em) rotateX(-90deg);
}
.building-2 > div:nth-child(27)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(27)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(28) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 62em) translateZ(37em) rotateX(-90deg);
}
.building-2 > div:nth-child(28)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(28)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(29) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(46em, 65em) translateZ(34em) rotateX(-90deg);
}
.building-2 > div:nth-child(29)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(29)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(30) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 53em) translateZ(45em);
}
.building-2 > div:nth-child(30)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(30)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(31) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 56em) translateZ(42em);
}
.building-2 > div:nth-child(31)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(31)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(32) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 59em) translateZ(39em);
}
.building-2 > div:nth-child(32)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(32)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(33) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 62em) translateZ(36em);
}
.building-2 > div:nth-child(33)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(33)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(34) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(46em, 65em) translateZ(33em);
}
.building-2 > div:nth-child(34)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(34)::after {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(-10em) translateZ(-5em) rotateY(-90deg);
}
.building-2 > div:nth-child(35) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(46em, 41em) translateZ(27em) rotateY(-90deg);
}
.building-2 > div:nth-child(35)::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-1em, -8em);
}
.building-2 > div:nth-child(35)::after {
width: 15em; height: 6em;
background: linear-gradient(0deg, #3e212f, transparent), linear-gradient(90deg, #6d324c 10%, transparent 0%) -2em 0em/6em 3em repeat-x, linear-gradient(90deg, #733a55 10%, #814364 0%) 0em 0em/1em 6em repeat-x;
transform: translate(-12.8em, 4.3em) translateZ(0em) rotateX(-90deg);
animation: b2Door1 var(--animation);
}
.building-2 > div:nth-child(36) {
width: 19em; height: 16em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(40em, -9em) translateZ(57em) rotateY(-90deg);
}
.building-2 > div:nth-child(36)::before {
width: 19em; height: 16em;
background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 15em 1.8em/2em 3.5em repeat-y, var(--right-default-light);
transform: translateY(16em) rotateX(-90deg);
}
.building-2 > div:nth-child(36)::after {
width: 16em; height: 16em;
background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
transform: translateX(19em) rotateY(90deg);;
}
.building-2 > div:nth-child(37) {
width: 16em; height: 12em;
background: var(--left-default-light);
transform: translate(41em, -7em) translateZ(62em) rotateY(-90deg);
}
.building-2 > div:nth-child(37)::before {
width: 16em; height: 12em;
background: var(--right-default-light);
transform: translateY(12em) rotateX(-90deg);
}
.building-2 > div:nth-child(37)::after {
width: 12em; height: 12em;
background: var(--top-default-light);
transform: translateX(16em) rotateY(90deg);
}
.building-2 > div:nth-child(38) {
width: 8em; height: 8em;
transform: translate(43em, -5em) translateZ(78em);
}
.building-2 > div:nth-child(38)::before {
box-sizing: border-box;
border-bottom: 4em solid transparent;
border-top: 4em solid transparent;
border-left: 8em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(38)::after {
box-sizing: border-box;
border-left: 4em solid transparent;
border-right: 4em solid transparent;
border-bottom: 8em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(39) {
width: 16em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
transform: translate(39em, -24em) translateZ(75em);
}
.building-2 > div:nth-child(39)::before {
width: 16em; height: 21em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.9em 1.8em/3.5em 2em repeat-x, var(--right-default-light);
transform: translateY(8em)rotateX(-90deg);
}
.building-2 > div:nth-child(39)::after {
width: 38em; height: 15em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 16.4em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 0em 7em, 15em 7em, 15em 15em, 38em 15em, 38em 0em);
transform: translateY(-7em) translateZ(15em) rotateY(90deg);
}
.building-2 > div:nth-child(40) {
width: 7em; height: 7em;
background: var(--top-default-light);
transform: translate(39em, -31em) translateZ(90em);
}
.building-2 > div:nth-child(40)::before {
width: 7em; height: 15em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 7em 0em, 7em 15em, 6em 15em, 6em 3em, 1em 3em, 1em 15em, 0em 15em);
transform: translateY(7em) rotateX(-90deg);
}
.building-2 > div:nth-child(40)::after {
width: 18em; height: 6em;
background: linear-gradient(0deg, #FF6081 8%, #BB3C54 8%, #852146);
transform: translate(6em, 1em) translateZ(-3em) rotateY(90deg);
}
.building-2 > div:nth-child(41) {
width: 5em; height: 5em;
background: var(--top-default-light);
transform: translate(40em, -30em) translateZ(91em);
}
.building-2 > div:nth-child(41)::before {
width: 5em; height: 2em;
background: var(--right-default-light);
transform: translateY(5em) rotateX(-90deg);
}
.building-2 > div:nth-child(41)::after {
width: 2em; height: 5em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(42) {
width: 4em; height: 4em;
transform: translate(40.5em, -29.5em) translateZ(91em);
}
.building-2 > div:nth-child(42)::before {
box-sizing: border-box;
border-bottom: 2em solid transparent;
border-top: 2em solid transparent;
border-left: 4em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(42)::after {
box-sizing: border-box;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
border-bottom: 4em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(43) {
width: 6em; height: 2em;
background: var(--left-window-inner);
border-top: 0.5em solid var(--left-window-v);
border-left: 0.5em solid var(--left-window-h);
border-radius: 0 2em 2em 0;
box-sizing: border-box;
transform: translate(39em, -29em) translateZ(76em) rotateY(-90deg);
}
.building-2 > div:nth-child(43)::before {
width: 33em; height: 16em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 13em 2.7em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(-37.5em, 49.5em) translateZ(-50em);
}
.building-2 > div:nth-child(43)::after {
width: 48em; height: 16em;
background: linear-gradient(var(--right-default-dark) 50%, transparent 0%) 28em -0.5em/2em 3.5em repeat-y, var(--right-default-light);
transform: translate(-52.5em, 65.5em) translateZ(-66em) rotateX(90deg);
}
.building-2 > div:nth-child(44) {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translate(88em, 20em) translateZ(73em);
}
.building-2 > div:nth-child(44)::before {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
.building-2 > div:nth-child(44)::after {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(45) {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translate(88em, 20em) translateZ(75em);
}
.building-2 > div:nth-child(45)::before {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
.building-2 > div:nth-child(45)::after {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(46) {
width: 16em; height: 16em;
background: var(--top-default-light);
transform: translate(89em, 21em) translateZ(76em);
}
.building-2 > div:nth-child(46)::before {
width: 14em; height: 14em;
background: var(--top-default-light);
transform: translate(1em, 1em) translateZ(1em);
}
.building-2 > div:nth-child(46)::after {
width: 1em; height: 14em;
background: var(--left-default-light);
transform: translate(1em, 1em) rotateY(-90deg);
}
.building-2 > div:nth-child(47) {
width: 14em; height: 1em;
background: var(--right-default-light);
transform: translate(90em, 36em) translateZ(77em) rotateX(-90deg);
}
.building-2 > div:nth-child(47)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(2em, 7em) translateZ(1em);
}
.building-2 > div:nth-child(47)::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(10em, 7em) translateZ(1em);
}
.building-2 > div:nth-child(48) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(89em, 32em) translateZ(64em) rotateY(-90deg);
}
.building-2 > div:nth-child(48)::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(-1em, -9em);
}
.building-2 > div:nth-child(48)::after {
width: 33em; height: 8em;
background: var(--right-default-light);
transform: translate(-72.6em, 42.2em) translateZ(43em) rotateX(-90deg);
}
.building-2 > div:nth-child(49) {
width: 12em; height: 12em;
transform: translate(91em, 23em) translateZ(77em);
}
.building-2 > div:nth-child(49)::before {
border-top: 6em solid transparent;
border-bottom: 6em solid transparent;
border-left: 12em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(49)::after {
border-right: 6em solid transparent;
border-left: 6em solid transparent;
border-bottom: 12em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(50) {
width: 8em; height: 23em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.7em var(--top-default-light), inset 0 0 0 2em var(--top-default-dark);
transform: translate(-31em, 38em) translateZ(-21em);
}
.building-2 > div:nth-child(50)::before {
width: 8em; height: 29em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
transform: translateY(23em) rotateX(-90deg);
}
.building-2 > div:nth-child(50)::after {
width: 23em; height: 29em;
clip-path: polygon(0em 0em, 0em 29em, 7em 29em, 7em 9em, 15em 9em, 15em 29em, 23em 29em, 23em 0em);
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
transform: rotateX(-90deg) rotateY(-90deg);
}
.building-2 > div:nth-child(51) {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: translate(-31em, 68em) translateZ(-35em);
}
.building-2 > div:nth-child(51)::before {
width: 16em; height: 23em;
clip-path: polygon(8em 0em, 8em 15em, 0em 15em, 0em 23em, 16em 23em, 16em 0em);
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
transform: translate(-8em, 8em) rotateX(-90deg);
}
.building-2 > div:nth-child(51)::after {
width: 8em; height: 17em;
background: linear-gradient(90deg, var(--left-default-dark) 50%, transparent 0%) 0.9em 1.5em/2.5em 2em repeat-x, var(--left-default-light);
transform: rotateX(-90deg) rotateY(-90deg);
}
.building-2 > div:nth-child(52) {
width: 10em; height: 10em;
transform: translate(-15em, 83em) translateZ(-42em);
}
.building-2 > div:nth-child(52)::before {
border-top: 5em solid transparent;
border-bottom: 5em solid transparent;
border-left: 10em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(52)::after {
border-right: 5em solid transparent;
border-left: 5em solid transparent;
border-bottom: 10em solid var(--right-accent-light);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(53) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(6em, 80em) translateZ(-27em);
}
.building-2 > div:nth-child(53)::before {
width: 15em; height: 34em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 1.5em/2.5em 2em repeat-x, var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
.building-2 > div:nth-child(53)::after {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(3em) translateZ(-19em) rotateY(-90deg);
}
.building-2 > div:nth-child(54) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-left: 3px solid var(--left-window-h);
border-radius: 0 2em 2em 0;
transform: translate(6em, 90em) translateZ(-46em) rotateY(-90deg);
}
.building-2 > div:nth-child(54)::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--right-window-inner);
border-bottom: 3px solid var(--right-window-v);
border-left: 3px solid var(--right-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(5em) translateZ(-2em) rotateX(-90deg);
}
.building-2 > div:nth-child(54)::after {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--right-window-inner);
border-bottom: 3px solid var(--right-window-v);
border-left: 3px solid var(--right-window-h);
border-radius: 0 2em 2em 0;
transform: translateY(5em) translateZ(-8em) rotateX(-90deg);
}
.building-2 > div:nth-child(55) {
width: 11em; height: 11em;
transform: translate(8em, 82em) translateZ(-27em);
}
.building-2 > div:nth-child(55)::before {
border-top: 5.5em solid transparent;
border-bottom: 5.5em solid transparent;
border-left: 11em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
.building-2 > div:nth-child(55)::after {
border-right: 5.5em solid transparent;
border-left: 5.5em solid transparent;
border-bottom: 11em solid var(--right-accent-light);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > div:nth-child(56) {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: translate(-9em, 109em) translateZ(-58em);
}
.building-2 > div:nth-child(56)::before {
width: 4em; height: 8em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(56)::after {
width: 8em; height: 4em;
background: var(--right-default-light);
transform: translateY(8em) rotateX(-90deg);
}
.building-2 > div:nth-child(57) {
width: 2em; height: 3em;
background: var(--left-default-light);
box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
transform: translate(109em, 67em) translateZ(31em) rotateY(-90deg);
}
.building-2 > div:nth-child(57)::before {
width: 11em; height: 22em;
clip-path: polygon(0em 0em, 10em 0em, 11em 2em, 11em 3em, 9em 6em, 8em 8em, 8em 22em, 0em 22em);
background: var(--top-default-light);
transform: translateZ(-1em) rotateY(-90deg);
}
.building-2 > div:nth-child(57)::after {
width: 1em; height: 3em;
background: var(--top-default-light);
box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
}
.building-2 > div:nth-child(58) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 89em) translateZ(30em);
}
.building-2 > div:nth-child(58)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(58)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(59) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 92em) translateZ(27em);
}
.building-2 > div:nth-child(59)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(59)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(60) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 95em) translateZ(24em);
}
.building-2 > div:nth-child(60)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
.building-2 > div:nth-child(60)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(-1em) rotateX(90deg);
}
.building-2 > div:nth-child(61) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 94em) translateZ(25em) rotateX(90deg);
}
.building-2 > div:nth-child(61)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(61)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(62) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 91em) translateZ(28em) rotateX(90deg);
}
.building-2 > div:nth-child(62)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(62)::after {
width: 8em; height: 3em;
clip-path: polygon(0em 0em, 8em 0em, 8em 3em, 7em 3em, 7em 1em, 0em 1em);
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(63) {
width: 2em; height: 3em;
background: var(--left-default-light);
box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
transform: translate(109em, 96em) translateZ(23em) rotateY(-90deg);
}
.building-2 > div:nth-child(63)::before {
width: 8em; height: 22em;
background: var(--top-default-light);
transform: translateZ(-1em) rotateY(-90deg);
}
.building-2 > div:nth-child(63)::after {
width: 1em; height: 3em;
background: var(--top-default-light);
box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
}
.building-2 > div:nth-child(64) {
width: 2em; height: 3em;
background: var(--left-default-light);
box-shadow: 0em 5em var(--left-default-light), 0em 7em var(--left-default-light), 0em 12em var(--left-default-light), 0em 14em var(--left-default-light), 0em 19em var(--left-default-light);
transform: translate(109em, 118em) rotateY(-90deg);
}
.building-2 > div:nth-child(64)::before {
width: 8em; height: 22em;
background: var(--top-default-light);
transform: translateZ(-1em) rotateY(-90deg);
}
.building-2 > div:nth-child(64)::after {
width: 1em; height: 3em;
background: var(--top-default-light);
box-shadow: 0em 5em var(--top-default-light), 0em 7em var(--top-default-light), 0em 12em var(--top-default-light), 0em 14em var(--top-default-light), 0em 19em var(--top-default-light);
transform: translateX(2em) translateZ(-1em) rotateY(-90deg);
}
.building-2 > div:nth-child(65) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(109em, 99em) translateZ(23em) rotateX(90deg);
}
.building-2 > div:nth-child(65)::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-7em);
}
.building-2 > div:nth-child(65)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-14em);
}
.building-2 > div:nth-child(66) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(109em, 70em) translateZ(31em) rotateX(90deg);
}
.building-2 > div:nth-child(66)::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-7em);
}
.building-2 > div:nth-child(66)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-14em);
}
.building-2 > div:nth-child(67) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(111em, 121em) translateZ(-2em) rotateX(90deg);
}
.building-2 > div:nth-child(67)::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-7em);
}
.building-2 > div:nth-child(67)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(-14em);
}
.building-2 > div:nth-child(68) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 140em) translateZ(-1em);
}
.building-2 > div:nth-child(68)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(68)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(69) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 143em) translateZ(-4em);
}
.building-2 > div:nth-child(69)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(69)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(70) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 146em) translateZ(-7em);
}
.building-2 > div:nth-child(70)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(70)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(71) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 149em) translateZ(-10em);
}
.building-2 > div:nth-child(71)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(71)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(72) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(102em, 152em) translateZ(-13em);
}
.building-2 > div:nth-child(72)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > div:nth-child(72)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > div:nth-child(73) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 152em) translateZ(-13em) rotateX(90deg);
}
.building-2 > div:nth-child(73)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-2 > div:nth-child(73)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-2 > div:nth-child(74) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 155em) translateZ(-16em) rotateX(90deg);
}
.building-2 > div:nth-child(74)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(4em) translateZ(4em);
}
.building-2 > div:nth-child(74)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(5em) translateZ(5em);
}
.building-2 > div:nth-child(75) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 149em) translateZ(-10em) rotateX(90deg);
}
.building-2 > div:nth-child(75)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(75)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(76) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 146em) translateZ(-7em) rotateX(90deg);
}
.building-2 > div:nth-child(76)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(76)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(77) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 143em) translateZ(-4em) rotateX(90deg);
}
.building-2 > div:nth-child(77)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > div:nth-child(77)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > div:nth-child(78) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(102em, 140em) translateZ(-1em) rotateX(90deg);
}
.building-2 > div:nth-child(78)::before {
width: 8em; height: 25em;
clip-path: polygon(0em 0em, 8em 0em, 8em 1em, 2em 1em, 2em 2em, 6em 2em, 6em 1em, 6em 3em, 2em 3em, 2em 4em, 6em 4em, 6em 3em, 6em 5em, 2em 5em, 2em 6em, 6em 6em, 6em 5em, 6em 7em, 2em 7em, 2em 8em, 6em 8em, 6em 7em, 6em 9em, 2em 9em, 2em 10em, 6em 10em, 6em 9em, 6em 11em, 2em 11em, 2em 12em, 6em 12em, 6em 11em, 6em 13em, 2em 13em, 2em 14em, 6em 14em, 6em 13em, 6em 15em, 2em 15em, 2em 16em, 6em 16em, 6em 15em, 6em 17em, 2em 17em, 2em 18em, 6em 18em, 6em 17em, 6em 19em, 2em 19em, 2em 20em, 6em 20em, 6em 19em, 6em 21em, 2em 21em, 2em 22em, 6em 22em, 6em 21em, 6em 23em, 6em 1em, 8em 1em, 8em 25em, 7em 25em, 7em 23em, 0em 23em);
background: var(--right-default-light);
transform: translateY(1em) translateZ(22em);
}
.building-2 > div:nth-child(78)::after {
width: 1em; height: 23em;
background: var(--left-default-light);
transform: translate(6em, 1em) translateZ(22em) rotateY(-90deg);
}
.building-2 > div:nth-child(79) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(1em);
}
.building-2 > div:nth-child(79)::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
.building-2 > div:nth-child(79)::after {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(4em);
}
.building-2 > div:nth-child(80) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(7em);
}
.building-2 > div:nth-child(80)::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
.building-2 > div:nth-child(80)::after {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(4em);
}
.building-2 > div:nth-child(81) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(13em);
}
.building-2 > div:nth-child(81)::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
.building-2 > div:nth-child(81)::after {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(4em);
}
.building-2 > div:nth-child(82) {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translate(104em, 116em) translateZ(19em);
}
.building-2 > div:nth-child(82)::before {
width: 4em; height: 2em;
background: var(--left-default-dark);
transform: translateZ(2em);
}
.building-2 > div:nth-child(82)::after {
width: 86em; height: 102em;
clip-path: polygon(47em 112em, 47em 88em, 46em 88em, 46em 87em, 45em 87em, 45em 86em, 44em 86em, 44em 85em, 43em 85em, 43em 84em, 42em 84em, 42em 83em, 41em 83em, 41em 82em, 40em 82em, 40em 81em, 39em 81em, 39em 80em, 38em 80em, 38em 79em, 37em 79em, 37em 78em, 36em 78em, 36em 77em, 35em 77em, 35em 76em, 34em 76em, 34em 75em, 33em 75em, 33em 74em, 32em 74em, 32em 73em, 31em 73em, 31em 51em, 8em 51em, 8em 29em, 7em 29em, 7em 28em, 6em 28em, 6em 27em, 5em 27em, 5em 26em, 4em 26em, 4em 25em, 3em 25em, 3em 24em, 2em 24em, 2em 23em, 1em 23em, 1em 22em, 0em 22em, 0em 0em, 86em 0em, 86em 71em, 55em 71em, 55em 94em, 86em 94em, 86em 112em);
background: var(--left-default-light);
transform: translate(-2em, -49em) translateZ(12em) rotateY(90deg);
}
.building-2 > div:nth-child(83) {
width: 8em; height: 14em;
background: var(--top-default-light);
transform: translate(102em, 155em) translateZ(-16em);
}
.building-2 > div:nth-child(83)::before {
width: 8em; height: 39em;
background: var(--right-default-light);
transform: translateY(14em) rotateX(-90deg);
}
.building-2 > div:nth-child(83)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(7em, -34em) translateZ(18em) rotateX(-90deg);
}
.building-2 > div:nth-child(84) {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translate(109em, 128em) translateZ(2em) rotateX(-90deg);
}
.building-2 > div:nth-child(84)::before {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(7em);
}
.building-2 > div:nth-child(84)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateZ(12em);
}
.building-2 > div:nth-child(85) {
width: 5em; height: 31em;
background: var(--right-default-dark);
transform: translate(102em, 138em) translateZ(-24em) rotateX(-90deg);
}
.building-2 > div:nth-child(85)::before {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-v);
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translateY(-13em) translateZ(-2em) rotateY(-90deg);
}
.building-2 > div:nth-child(85)::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--left-window-inner);
border-left: 3px solid var(--left-window-v);
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translateY(-3em) translateZ(26em) rotateY(-90deg);
}
.building-2 > .mooving-part-1 {
width: 8em; height: 15em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
animation: b2Mp1 var(--animation) linear;
}
.building-2 > .mooving-part-1::before {
width: 70em; height: 15em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
.building-2 > .mooving-part-1::after {
width: 8em; height: 70em;
background: var(--right-accent-light);
transform: translateY(15em)rotateX(-90deg);
}
.building-2 > .mooving-part-1 > div:nth-child(1) {
width: 1em; height: 5em;
transform: translate(-1em, 5em) translateZ(-2em);
animation: b2Mp1TopPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(1)::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp1RightPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(1)::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp1LeftPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(2) {
width: 1em; height: 5em;
transform: translate(-1em, 5em) translateZ(-10em);
animation: b2Mp1TopPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(2)::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp1RightPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(2)::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp1LeftPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(3) {
width: 1em; height: 5em;
transform: translateX(-1em) translateY(5em) translateZ(-18em);
animation: b2Mp1TopPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(3)::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp1RightPart var(--animation) ease;
}
.building-2 > .mooving-part-1 > div:nth-child(3)::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp1LeftPart var(--animation) ease;
}
.building-2 > .mooving-part-2 {
width: 17em; height: 7em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
animation: b2Mp2 var(--animation) linear;
}
.building-2 > .mooving-part-2::before {
width: 60em; height: 7em;
background: linear-gradient(90deg, transparent 22.5%, var(--left-accent-light) 0%), conic-gradient(var(--left-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-accent-dark) 180deg, var(--left-accent-dark) 270deg, transparent 270deg) 1.5em 0em/3em 3em repeat, var(--left-accent-light);
transform: rotateY(90deg);
}
.building-2 > .mooving-part-2::after {
width: 17em; height: 60em;
background: linear-gradient(180deg, transparent 22.5%, var(--right-accent-light) 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
transform: translateY(7em) rotateX(-90deg);
}
.building-2 > .mooving-part-3 {
width: 15em; height: 7em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
animation: b2Mp3 var(--animation) linear;
}
.building-2 > .mooving-part-3::before {
width: 15em; height: 7em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > .mooving-part-3::after {
width: 15em; height: 60em;
background: linear-gradient(90deg, transparent 50%, var(--right-default-dark) 0%) 1.5em 1.7em/3.3em 2.1em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 60em, 14em 60em, 14em 9em, 8em 9em, 8em 60em, 0em 60em);
transform: translateY(7em) rotateX(-90deg);
}
.building-2 > .mooving-part-3 > div {
width: 15em; height: 7em;
background: linear-gradient(0deg, #E75776 8%, var(--right-default-dark) 8%, #771B3E 100%);
transform: translateX(14em) translateZ(-7em) rotateY(90deg);
}
.building-2 > .mooving-part-4 {
width: 8em; height: 23em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 1em var(--top-accent-light), inset 0 0 0 1.2em var(--top-accent-dark);
animation: b2Mp4 var(--animation) linear;
}
.building-2 > .mooving-part-4::before {
width: 7em; height: 23em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
.building-2 > .mooving-part-4::after {
width: 8em; height: 7em;
background: var(--right-accent-light);
transform: translateY(23em) rotateX(-90deg);
}
.building-2 > .mooving-part-4 > div:nth-child(1) {
width: 1em; height: 5em;
transform: translate(-1em, 2em) translateZ(-1em);
animation: b2Mp4TopPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(1)::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp4RightPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(1)::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp4LeftPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(2) {
width: 1em; height: 5em;
transform: translate(-1em, 9em) translateZ(-1em);
animation: b2Mp4TopPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(2)::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp4RightPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(2)::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp4LeftPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(3) {
width: 1em; height: 5em;
transform: translate(-1em, 16em) translateZ(-1em);
animation: b2Mp4TopPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(3)::before {
width: 1em; height: 5em;
transform: translateY(5em) rotateX(-90deg);
animation: b2Mp4RightPart var(--animation) ease;
}
.building-2 > .mooving-part-4 > div:nth-child(3)::after {
width: 5em; height: 5em;
box-sizing: border-box;
transform: rotateY(90deg);
animation: b2Mp4LeftPart var(--animation) ease;
}
.building-2 > .mooving-part-5 {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
animation: b2Mp5 var(--animation) linear;
}
.building-2 > .mooving-part-5::before {
width: 44em; height: 31em;
clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
background: var(--right-default-light);
transform: translate(8em, -15em) translateZ(8em) rotateY(90deg);
}
.building-2 > .mooving-part-5::after {
width: 44em; height: 31em;
clip-path: polygon(0em 0em, 0em 9em, 1em 9em, 1em 10em, 2em 10em, 2em 11em, 3em 11em, 3em 12em, 4em 12em, 4em 13em, 5em 13em, 5em 14em, 6em 14em, 6em 15em, 7em 15em, 7em 16em, 8em 16em, 8em 31em, 44em 31em, 44em 0em);
background: var(--left-default-light);
transform: translateY(-15em) translateZ(8em) rotateY(90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(1) {
width: 8em; height: 36em;
background: var(--right-default-light);
transform: translateY(16em) rotateX(-90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(1)::before {
width: 23em; height: 9em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 1.1em var(--top-default-light), inset 0 0 0 1.5em var(--top-default-dark);
transform: translateY(-8em) translateZ(-31em) rotateX(90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(1)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(-7em) translateZ(-22em) rotateX(90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(2) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(-5em) translateZ(6em);
}
.building-2 > .mooving-part-5 > div:nth-child(2)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > .mooving-part-5 > div:nth-child(2)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > .mooving-part-5 > div:nth-child(3) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(-2em) translateZ(3em);
}
.building-2 > .mooving-part-5 > div:nth-child(3)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > .mooving-part-5 > div:nth-child(3)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > .mooving-part-5 > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) rotateX(90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(4)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > .mooving-part-5 > div:nth-child(4)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > .mooving-part-5 > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(3em) rotateX(90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(5)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(1em) translateZ(1em);
}
.building-2 > .mooving-part-5 > div:nth-child(5)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(2em) translateZ(2em);
}
.building-2 > .mooving-part-5 > div:nth-child(6) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-5em) translateZ(6em) rotateX(90deg);
}
.building-2 > .mooving-part-5 > div:nth-child(6)::before {
width: 23em; height: 43em;
background: linear-gradient(90deg, #9F2F52 50%, transparent 0%) 0em 38em/4em 2.5em repeat-x, #B33E60;
transform: translateY(-41em) translateZ(1em);
}
.building-2 > .mooving-part-5 > div:nth-child(7) {
width: 44em; height: 9em;
background: var(--right-default-light);
transform: translate(23em, -15em) translateZ(8em) rotateY(90deg);
}
.building-2 > .mooving-part-5 > .cloud1 {
width: 8em; height: 36em;
transform: translate(0em, 16em) translateZ(0em) rotateX(-90deg);
overflow: hidden;
}
.building-2 > .mooving-part-5 > .cloud1::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-21em, 16em);
animation: b2Mp5Cloud1 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud1::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-12em, 17em);
animation: b2Mp5Cloud2 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud2 {
width: 36em; height: 31em;
transform: translate(0em, -15em) translateZ(0em) rotateY(90deg);
overflow: hidden;
}
.building-2 > .mooving-part-5 > .cloud2::before {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(6em, -30em);
animation: b2Mp5Cloud3 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud2::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(16em, 11em);
animation: b2Mp5Cloud4 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud3 {
width: 22em; height: 36em;
transform: translate(8em, 16em) translateZ(0em) rotateX(-90deg) rotateY(90deg);
overflow: hidden;
}
.building-2 > .mooving-part-5 > .cloud3::before {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-30em, 6em);
animation: b2Mp5Cloud5 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud3::after {
width: 70em; height: 70em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-13em, 1em);
animation: b2Mp5Cloud6 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud4 {
width: 15em; height: 44em;
transform: translate(8em, -6em) translateZ(8em) rotateX(-90deg);
overflow: hidden;
}
.building-2 > .mooving-part-5 > .cloud4::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-20em, 24em);
animation: b2Mp5Cloud7 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud4::after {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-15em, 14em);
animation: b2Mp5Cloud8 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud5 {
width: 9em; height: 44em;
transform: translate(23em, -6em) translateZ(8em) rotateX(-90deg) rotateY(90deg);
overflow: hidden;
}
.building-2 > .mooving-part-5 > .cloud5::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-20em, 24em);
animation: b2Mp5Cloud9 var(--animation) linear;
}
.building-2 > .mooving-part-5 > .cloud5::after {
width: 60em; height: 60em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-21em, 14em);
animation: b2Mp5Cloud10 var(--animation) linear;
}
.building-2 > .mooving-part-6 {
width: 8em; height: 32em;
background: var(--right-default-light);
transform: translate(69em, -1em) translateZ(83em) rotateX(-90deg);
animation: b2Mp6 var(--animation) linear;
}
.building-2 > .mooving-part-6::before {
width: 8em; height: 45em;
clip-path: polygon(1em 0em, 1em 5em, 1em 6em, 0em 6em, 0em 6em, 1em 6em, 1em 45em, 8em 45em, 8em 0em);
background: linear-gradient(90deg, #FF778E 17%, #B04356 17%, #822745);
transform: rotateY(90deg) translate(7em, -21em) translateZ(7em);
}
.building-2 > .mooving-part-6::after {
width: 9em; height: 40em;
clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
background: var(--left-default-light);
transform: rotateY(90deg) translateY(-8em) translateZ(0em);
}
.building-2 > .mooving-part-6 > div:nth-child(1) {
width: 7em; height: 11em;
background: linear-gradient(14deg, var(--top-default-light) 17%, #B43D5B 50%);
transform: rotateX(90deg) translate(1em, -18em) translateZ(8em);
z-index: 1;
}
.building-2 > .mooving-part-6 > div:nth-child(1)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-1em, 11em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(1)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(-1em, 12em) translateZ(-2em);
}
.building-2 > .mooving-part-6 > div:nth-child(2) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: rotateX(90deg) translateY(-5em) translateZ(5em);
}
.building-2 > .mooving-part-6 > div:nth-child(2)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(2)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-2 > .mooving-part-6 > div:nth-child(3) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: rotateX(90deg) translateY(-2em) translateZ(2em);
}
.building-2 > .mooving-part-6 > div:nth-child(3)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(3)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(-90deg) translateY(1em) translateZ(2em);
}
.building-2 > .mooving-part-6 > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(4)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(4)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-2 > .mooving-part-6 > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-5em) translateZ(-4em);
}
.building-2 > .mooving-part-6 > div:nth-child(5)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(5)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-2 > .mooving-part-6 > div:nth-child(6) {
width: 7em; height: 1em;
background: var(--right-default-light);
transform: translate(1em, -8em) translateZ(-7em);
}
.building-2 > .mooving-part-6 > div:nth-child(6)::before {
width: 23em; height: 55em;
clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
background: linear-gradient(0deg, var(--right-default-light) 56%, transparent 56%, transparent 69%, var(--right-default-light) 69%, var(--right-default-light) 82%, transparent 82%, transparent 92%, var(--right-default-light) 0%), conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
transform: translate(-8em, -19em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(6)::after {
width: 23em; height: 50em;
background: linear-gradient(0deg, var(--left-default-light) 56%, transparent 56%, transparent 69%, var(--left-default-light) 69%, var(--left-default-light) 88%, transparent 0%), conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
transform: rotateY(-90deg) translate(-24em, -14em) translateZ(8em);
}
.building-2 > .mooving-part-6 > div:nth-child(7) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(0em);
}
.building-2 > .mooving-part-6 > div:nth-child(7)::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
.building-2 > .mooving-part-6 > div:nth-child(7)::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(8) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(8em);
}
.building-2 > .mooving-part-6 > div:nth-child(8)::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
.building-2 > .mooving-part-6 > div:nth-child(8)::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(9) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(16em);
}
.building-2 > .mooving-part-6 > div:nth-child(9)::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
.building-2 > .mooving-part-6 > div:nth-child(9)::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(10) {
width: 25em; height: 25em;
background: var(--top-default-light);
transform: rotateX(90deg) translate(-8em, -32em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(10)::before {
width: 25em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg) translateY(-1em) translateZ(-25em);
}
.building-2 > .mooving-part-6 > div:nth-child(10)::after {
width: 1em; height: 25em;
background: var(--left-default-light);
transform: rotateY(90deg) translate(-1em, 1em) translateZ(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(11) {
width: 6em; height: 1em;
background: var(--left-default-light);
transform: rotateX(90deg) translateY(-9em) translateZ(23em) rotateY(-42deg);
}
.building-2 > .mooving-part-6 > div:nth-child(11)::before {
width: 8em; height: 4em;
background: var(--left-default-light);
transform: rotateY(42deg) translate(-1em, -4em) rotateY(-42deg);
}
.building-2 > .mooving-part-6 > div:nth-child(11)::after {
border-left: 5.7em solid transparent;
border-right: 5.7em solid transparent;
border-top: 5.4em solid var(--right-default-light);
transform: rotateY(42deg) rotateX(90deg) translateX(-1em);
}
.building-2 > .mooving-part-6 > div:nth-child(12) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(-7em, -15em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(12)::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(12)::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(13) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(-7em, -30em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(13)::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(13)::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(14) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(-7em, -22.5em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(14)::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(14)::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(15) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(10em, -15em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(15)::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(15)::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(16) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(10em, -30em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(16)::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(16)::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(17) {
width: 6em; height: 6em;
transform: rotateX(90deg) translate(10em, -22.5em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(17)::before {
box-sizing: border-box;
border-bottom: 3em solid transparent;
border-top: 3em solid transparent;
border-left: 6em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(17)::after {
box-sizing: border-box;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
border-bottom: 6em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(18) {
width: 14em; height: 14em;
transform: rotateX(90deg) translate(-2.5em, -27em) translateZ(23em);
}
.building-2 > .mooving-part-6 > div:nth-child(18)::before {
box-sizing: border-box;
border-bottom: 7em solid transparent;
border-top: 7em solid transparent;
border-left: 14em solid var(--top-accent-light);
transform: rotateY(-60deg);
}
.building-2 > .mooving-part-6 > div:nth-child(18)::after {
box-sizing: border-box;
border-left: 7em solid transparent;
border-right: 7em solid transparent;
border-bottom: 14em solid var(--top-accent-dark);
transform-origin: bottom center;
transform: rotateX(-60deg);
}
.building-2 > .mooving-part-6 > .cloud1 {
width: 8em; height: 32em;
overflow: hidden;
}
.building-2 > .mooving-part-6 > .cloud1::before {
width: 30em; height: 30em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-50%, 8em);
animation: b2Mp6Cloud1 var(--animation) linear;
}
.building-2 > .mooving-part-6 > .cloud1::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-11em, 3em);
animation: b2Mp6Cloud2 var(--animation) linear;
}
.building-2 > .mooving-part-6 > .cloud2 {
width: 9em; height: 40em;
clip-path: polygon(0em 8em, 0em 45em, 8em 45em, 8em 0em, 7em 0em, 7em 1em, 6em 1em, 6em 2em, 5em 2em, 5em 3em, 4em 3em, 4em 4em, 3em 4em, 3em 5em, 2em 5em, 2em 6em, 1em 6em, 1em 7em, 0em 7em);
transform: rotateY(90deg) translateY(-8em);
overflow: hidden;
}
.building-2 > .mooving-part-6 > .cloud2::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-50%, 9em);
animation: b2Mp6Cloud3 var(--animation) linear;
}
.building-2 > .mooving-part-6 > .cloud3 {
width: 23em; height: 55em;
clip-path: polygon(0em 5em, 0em 61em, 8em 61em, 8em 6em, 14em 6em, 14em 61em, 23em 61em, 23em 5em, 17em 5em, 11.5em 0em, 6em 5em);
transform: translate(-7em, -25em) translateZ(-8em);
overflow: hidden;
}
.building-2 > .mooving-part-6 > .cloud3::before {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-50%, 25em);
animation: b2Mp6Cloud4 var(--animation) linear;
}
.building-2 > .mooving-part-6 > .cloud4 {
width: 23em; height: 50em;
transform: rotateY(-90deg) translate(-31em, -22em) translateZ(7em);
overflow: hidden;
}
.building-2 > .mooving-part-6 > .cloud4::before {
width: 50em; height: 50em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-1em, 18em);
animation: b2Mp6Cloud5 var(--animation) linear;
}
.building-2 > .mooving-part-6 > .cloud4::after {
width: 40em; height: 40em;
background: radial-gradient(#3d2f36, transparent 73%);
transform-origin: center center;
transform: translate(-20em, 18em);
animation: b2Mp6Cloud6 var(--animation) linear;
}
.building-2 > .mooving-bridge {
width: 56em; height: 8em;
transform: translate(46em, 67em) translateZ(31em);
}
.building-2 > .mooving-bridge::before {
width: 8em; height: 9.8em;
background: var(--top-default-dark);
transform: rotateX(-37deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-cloud {
transform: translateX(25em);
}
.building-2 > .mooving-bridge > .mooving-bridge-cloud::before {
width: 23em; height: 30em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(6em);
animation: BridgeCloud1 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-cloud::after {
width: 40em; height: 40em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(6em);
animation: BridgeCloud4 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-cloud > div:nth-child(1)::before {
width: 30em; height: 30em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(16px);
animation: BridgeCloud2 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-cloud > div:nth-child(1)::after {
width: 70em; height: 70em;
background: var(--left-default-light);
border-radius: 50%;
filter: blur(50px);
opacity: 0.6;
animation: BridgeCloud3 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part1 {
width: 13em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
animation: Bridge1 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part1::before {
width: 13em; height: 1em;
background: var(--right-default-light);
transform: rotateX(-90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part1::after {
width: 13em; height: 1em;
background: var(--right-default-light);
transform: rotateX(-90deg) translateZ(8em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part1 > div:nth-child(1) {
width: 13em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 1.5em 0em var(--top-default-light), inset 1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: translateZ(-1em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part1 > div:nth-child(1)::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: rotateY(-90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part1 > div:nth-child(1)::after {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: rotateY(-90deg) translateZ(-13em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part2 {
width: 8em; height: 6em;
background: var(--right-default-light);
animation: Bridge2 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part2::before {
border-top: 6em solid var(--left-default-light);
border-right: 8em solid transparent;
transform: rotateY(90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part2::after {
border-top: 6em solid var(--left-default-light);
border-right: 8em solid transparent;
transform: rotateY(90deg) translateZ(7em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part2 > div:nth-child(1) {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: rotateX(-90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part2 > div:nth-child(1)::before {
width: 8em; height: 8em;
background: var(--top-default-light);
transform: rotateX(-37deg) scaleY(1.26);
transform-origin: bottom center;
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 {
width: 13em; height: 1em;
background: var(--right-default-light);
animation: Bridge3 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3::before {
width: 12em; height: 1em;
background: var(--right-default-light);
transform: translateZ(8em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3::after {
width: 13em; height: 8em;
clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(1) {
width: 3.5em; height: 1em;
background: var(--right-default-light);
transform: translateX(8.5em) translateZ(8em) rotateY(-34deg);
transform-origin: right center;
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(1)::before {
width: 4.3em; height: 1em;
background: var(--left-default-light);
transform: rotateY(81deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(1)::after {
width: 2em; height: 1em;
background: var(--right-default-light);
transform: translateX(0.7em) translateZ(-4.1em) rotateY(170deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(2) {
width: 8em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(2)::before {
width: 13em; height: 8em;
clip-path: polygon(0em 0em, 13em 0em, 11em 2em, 12em 3em, 9em 6em, 12em 8em, 0em 8em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg) translateZ(-1em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part3 > div:nth-child(2)::after {
width: 4em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-13em) rotateY(-47deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 {
width: 6em; height: 1em;
background: var(--right-default-light);
animation: Bridge4 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4::before {
width: 13em; height: 8em;
clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-4em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4::after {
width: 13em; height: 8em;
clip-path: polygon(4em 0em, 2em 2em, 3em 3em, 0em 6em, 3em 8em, 13em 8em, 10em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-4em) translateZ(-1em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(1) {
width: 3em; height: 1em;
background: var(--right-default-light);
transform: rotateY(-135deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(1)::before {
width: 3em; height: 1em;
background: var(--left-default-light);
transform: translateX(3em) rotateY(96deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(1)::after {
width: 4em; height: 1em;
background: var(--right-default-light);
transform: translateX(3em) translateZ(-1.3em) rotateY(2deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(2) {
width: 10em; height: 1em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(8em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(2)::before {
width: 3.6em; height: 1em;
background: var(--left-default-light);
transform: rotateY(147deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part4 > div:nth-child(2)::after {
width: 8.4em; height: 1em;
background: var(--left-default-light);
transform: translateX(10em) rotateY(111deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5 {
width: 16em; height: 1em;
background: var(--right-default-light);
animation: Bridge5 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5::before {
width: 16em; height: 8em;
clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5::after {
width: 16em; height: 8em;
clip-path: polygon(0em 0em, 3em 8em, 13em 8em, 15em 5em, 14em 3em, 16em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateZ(-1em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(1) {
width: 8.4em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-70deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(1)::before {
width: 4em; height: 1em;
background: var(--left-default-light);
transform: translateX(5.5em) translateZ(-15em) rotateY(-54deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(1)::after {
width: 2.9em; height: 1em;
background: var(--right-default-light);
transform: translateX(7em) translateZ(-12em) rotateY(6deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(2) {
width: 10.2em; height: 1em;
background: var(--right-default-light);
transform: translateX(13em) translateZ(8em) rotateY(180deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part5 > div:nth-child(2)::before {
width: 3.2em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-123deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 {
width: 6em; height: 1em;
background: var(--right-default-light);
animation: Bridge6 var(--animation);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6::before {
width: 11em; height: 8em;
clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset -1.5em 0em var(--top-default-light), inset -1.7em 0 var(--top-default-dark), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-3em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6::after {
width: 11em; height: 8em;
clip-path: polygon(3em 0em, 1em 3em, 2em 5em, 0em 8em, 11em 8em, 10em 6em, 10em 4em, 8em 2em, 9em 0em);
background: var(--top-default-light);
box-shadow: inset 0 -1.5em var(--top-default-light), inset 0 1.5em var(--top-default-light), inset 0 1.7em var(--top-default-dark), inset 0 -1.7em var(--top-default-dark);
transform: rotateX(90deg) translateX(-3em) translateZ(-1em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(1) {
width: 3.7em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-124deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(1)::before {
width: 100%; height: 1em;
background: var(--right-default-light);
transform: rotateY(-121deg);
transform-origin: right center;
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(1)::after {
width: 7em; height: 1em;
background: var(--left-default-light);
transform: rotateY(-121deg) translate(-6em, -6em) rotateY(-57deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(2) {
width: 11em; height: 1em;
background: var(--right-default-light);
transform: translateX(-3em) translateZ(8em);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(2)::before {
width: 3em; height: 1em;
background: var(--left-default-light);
transform: translateX(11em) rotateY(118deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(2)::after {
width: 2em; height: 1em;
background: var(--right-default-light);
transform: translateX(10em) translateZ(-2em) rotateY(89deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(3) {
width: 2.4em; height: 1em;
background: var(--right-default-light);
transform: translateX(6em) rotateY(-117deg);
}
.building-2 > .mooving-bridge > .mooving-bridge-part6 > div:nth-child(3)::before {
width: 2.9em; height: 1em;
background: var(--left-default-light);
transform: translateX(2.4em) rotateY(75deg);
}
.building-2 > .rocks::before {
width: 10em; height: 16em;
background: #3D2E36;
transform: translateZ(-12em) rotateX(-26deg) rotateY(-180deg);
}
.building-2 > .rocks::after {
width: 32em; height: 51em;
background: linear-gradient(102deg, #3D2E36 76%, transparent 0%);
transform: translate(-9em, 15em) translateZ(-27em) rotateX(0deg) rotateY(-41deg) rotateZ(0deg);
}
.building-2 > .rocks > div:nth-child(1) {
width: 22em; height: 14em;
background: #3D2E36;
transform: translate(23em, 55em) translateZ(-17em) rotateY(-47deg);
}
.building-2 > .rocks > div:nth-child(1)::before {
width: 22em; height: 20em;
background: linear-gradient(109deg, #3D2E36 76%, transparent 0%);
transform: translate(8em, 5em) translateZ(-5em) rotateY(-4deg);
}
.building-2 > .rocks > div:nth-child(1)::after {
width: 20em; height: 23em;
background: linear-gradient(100deg, #3D2E36, #3D2E36) 0em 0em/12em 23em no-repeat, linear-gradient(15deg, #3D2E36 43%, transparent 0%) 11em -5em/11em 11em no-repeat, linear-gradient(100deg, #3D2E36 79%, transparent 0%) 9em 6em/11em 17em no-repeat;
transform: translate(-17em, -15em) translateZ(10em) rotateY(13deg);
}
.building-2 > .rocks > div:nth-child(2) {
width: 26em; height: 78em;
background: #3D2E36;
border-radius: 0 0 26em 0 / 0 0 5em 0;
transform-origin: right top;
transform: translate(83em, -115em) translateZ(10em) rotateX(38deg) rotateY(-90deg);
}
.building-2 > .rocks > div:nth-child(2)::before {
width: 60em; height: 21em;
background: #3D2E36;
border-radius: 0 0 3em 0;
transform-origin: top right;
transform: translate(-43em, 67em) skewY(-46deg) rotateZ(21deg);
}
.building-2 > .rocks > div:nth-child(2)::after {
width: 30em; height: 37em;
background: linear-gradient(98deg, #3D2E36 82%, transparent 0%) 0em 18em / 29em 19em no-repeat, linear-gradient(110deg, #3D2E36 90%, transparent 0%) 0em 14em / 29em 4em no-repeat, linear-gradient(93deg, #3D2E36 95%, transparent 0%) 0em 0em / 29em 14em no-repeat;
transform-origin: top right;
transform: translate(-49em, 137em) translateZ(20em) rotateZ(52deg);
}
.building-2 > .rocks > div:nth-child(3) {
width: 46em; height: 21em;
background: #3D2E36;
transform-origin: top left;
transform: translate(39em, 1em) translateZ(59em) rotateX(-23deg);
}
.building-2 > .rocks > div:nth-child(3)::before {
width: 38em; height: 20em;
background: #3D2E36;
transform-origin: top center;
transform: translate(10em, 21em) rotateX(-29deg);
}
.building-2 > .rocks > div:nth-child(3)::after {
width: 25em; height: 20em;
background: #3D2E36;
transform: translate(20em, -18em);
}
.building-2 > .rocks > div:nth-child(4) {
width: 26em; height: 83em;
background: #3D2E36;
transform-origin: top left;
transform: translate(109em, 35em) translateZ(24em) rotateX(-26deg) rotateY(90deg);
}
.building-2 > .rocks > div:nth-child(4)::before {
width: 75em; height: 8em;
background: #3D2E36;
transform: translate(19.7em, 59.4em) translateZ(-13em) rotateY(90deg) rotateX(48deg);
}
.building-2 > .rocks > div:nth-child(4)::after {
width: 30em; height: 32em;
background: #3D2E36;
transform: translate(-9em, -7em) translateZ(-51em) rotateX(90deg) rotateY(49deg);
}
.building-2 > .rocks > div:nth-child(5) {
width: 52em; height: 90em;
background: linear-gradient(136deg, #3d2e36 36%, transparent 0%);
transform-origin: top right;
transform: translate(50em, 66em) translateZ(13em) rotateY(-90deg);
}
.building-2 > .rocks > div:nth-child(5)::before {
width: 14em; height: 76em;
background: #3d2e36;
transform: translate(32em, 8em) translateZ(6em) rotateX(90deg) rotateY(155deg);
}
.building-2 > .rocks > div:nth-child(5)::after {
width: 30em; height: 43em;
background: #3d2f36;
transform: translate(51em, -13em) translateZ(48em) rotateX(-90deg) rotateY(-132deg);
}
.building-2 > .rocks > div:nth-child(6) {
width: 90em; height: 8em;
background: #3d2e36;
transform: translate(21em, 82.3em) translateZ(-27em) rotateX(-38deg);
}
.building-2 > .rocks > div:nth-child(6)::before {
width: 90em; height: 12em;
background: #3d2e36;
transform: translateY(8em) rotateX(-26deg);
}
.building-2 > .rocks > div:nth-child(6)::after {
width: 54em; height: 54em;
background: #3d2e36;
border-radius: 0 5em 0 0 / 0 15em 0 0;
transform: translate(79em, -16em) translateZ(-4em) rotateX(-42deg) rotateY(-90deg) skewX(15deg);
}
.building-2 > .rocks > div:nth-child(7) {
width: 90em; height: 8em;
background: #3d2e36;
transform: translate(21em, 94em) translateZ(-42em) rotateX(-49deg);
}
.building-2 > .rocks > div:nth-child(7)::before {
width: 90em; height: 10em;
background: #3d2e36;
transform: translateY(8em) rotateX(-15deg);
}
.building-2 > .rocks > div:nth-child(7)::after {
width: 90em; height: 20em;
background: #3d2e36;
transform: translateY(17.5em) translateZ(-2.6em) rotateX(-21deg);
}
.building-2 > .rocks > div:nth-child(8) {
width: 97em; height: 11em;
background: #3d2e36;
transform: translate(21em, 109em) translateZ(-72em) rotateX(-49deg);
}
.building-2 > .rocks > div:nth-child(8)::before {
width: 120em; height: 40em;
background: #3d2e36;
transform: translate(-13em, 11em) rotateX(20deg);
}
.building-2 > .rocks > div:nth-child(8)::after {
width: 75em; height: 22em;
background: #3d2e36;
transform: translateY(-38em) translateZ(9em) rotateX(-96deg) rotateY(-90deg);
}
.building-2 > .rocks > div:nth-child(9) {
width: 20em; height: 20em;
background: #3d2e36;
transform: translate(-11em, 124em) translateZ(-85em) rotateX(-30deg);
}
.building-2 > .rocks > div:nth-child(9)::before {
width: 29em; height: 60em;
background: linear-gradient(-20deg, #3d2e36 84%, transparent 0%);
transform: translate(114em, 39em) translateZ(20em) rotateX(-30deg);
}
.building-2 > .rocks > div:nth-child(9)::after {
width: 8em; height: 20em;
background: #3d2e36;
transform: translate(88em, 76em) translateZ(36em) rotateX(-30deg);
}
.building-2 > .rocks > div:nth-child(10) {
width: 20em; height: 40em;
background: linear-gradient(-104deg, #3d2e36 66%, transparent 0%);
transform: translate(77em, 194em) translateZ(-86em) rotateY(150deg);
}
.building-2 > .rocks > div:nth-child(10)::before {
width: 40em; height: 29em;
background: linear-gradient(-119deg, #3d2e36 70%, transparent 0%);
transform: translate(63em, -5em) translateZ(-27em) rotateY(-57deg);
}
.building-2 > .rocks > div:nth-child(10)::after {
width: 41em; height: 26em;
background: #3d2e36;
transform: translate(68em, -20em) translateZ(-21em) rotateX(80deg);
}
.building-2 > .rocks > div:nth-child(11) {
width: 20em; height: 21em;
background: linear-gradient(-48deg, #3d2e36 40%, transparent 0%), linear-gradient(-125deg, #3d2e36 40%, transparent 0%);
transform: translateY(179em) translateZ(-100em) rotateY(100deg);
}
.building-2 > .rocks > div:nth-child(11)::before {
width: 14em; height: 20em;
background: linear-gradient(-32deg, #3d2e36 83%, transparent 0%);
transform: translate(3.7em, 20em) translateZ(-3em) rotateX(97deg) rotateY(18deg);
}
.building-3 {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translate(115em, 151em) translateZ(-16em) rotateX(0deg);
transform-style: preserve-3d;
animation: thirdBuilding var(--animation);
--left-default-light: #953552;
--left-default-dark: #88213D;
--left-accent-light: #7B2237;
--left-accent-dark: #701329;
--top-default-light: #D25A6C;
--top-default-dark: #BF394D;
--top-accent-light: #B25B78;
--top-accent-dark: #9E4662;
--right-default-light: #722C41;
--right-default-dark: #681A33;
--right-accent-light: #4C1325;
--right-accent-dark: #320716;
--right-window-inner: #300829;
--right-window-v: #56203E;
--right-window-h: #6A2B46;
}
.building-3::before {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-3::after {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
.building-3 > div:nth-child(1) {
width: 18em; height: 18em;
background: var(--top-default-light);
transform: translateZ(2em);
}
.building-3 > div:nth-child(1)::before {
width: 1em; height: 18em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-3 > div:nth-child(1)::after {
width: 18em; height: 1em;
background: var(--right-default-light);
transform: translateY(18em) rotateX(-90deg);
}
.building-3 > div:nth-child(2) {
width: 16em; height: 16em;
background: var(--top-default-light);
transform: translate(1em, 1em) translateZ(3em);
}
.building-3 > div:nth-child(2)::before {
width: 50em; height: 16em;
clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 50em 16em, 50em 0em);
background: var(--left-default-light);
transform: translateZ(2em) rotateY(90deg);
}
.building-3 > div:nth-child(2)::after {
width: 140em; height: 16em;
clip-path: polygon(0em 0em, 0em 2em, 2em 2em, 2em 5em, 0em 5em, 0em 11em, 2em 11em, 2em 14em, 0em 14em, 0em 16em, 140em 16em, 140em 0em);
background: var(--right-default-light);
transform: translateY(16em) translateZ(2em) rotateY(90deg) rotateX(90deg);
}
.building-3 > div:nth-child(3) {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 15em 0em var(--right-default-light);
transform: translate(1em, 3em) translateZ(5em) rotateX(-90deg);
}
.building-3 > div:nth-child(3)::before {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 15em 0em var(--right-default-light);
transform: translateZ(9em);
}
.building-3 > div:nth-child(3)::after {
width: 1em; height: 1em;
background: var(--top-default-light);
box-shadow: 0em 1em var(--top-default-light), 0em 5em var(--top-default-light), 0em 6em var(--top-default-light), 0em 7em var(--top-default-light), 0em 8em var(--top-default-light), 0em 9em var(--top-default-light), 0em 10em var(--top-default-light), 0em 14em var(--top-default-light), 0em 15em var(--top-default-light), 15em 1em var(--top-default-light), 15em 5em var(--top-default-light), 15em 6em var(--top-default-light), 15em 7em var(--top-default-light), 15em 8em var(--top-default-light), 15em 9em var(--top-default-light), 15em 10em var(--top-default-light), 15em 14em var(--top-default-light), 15em 15em var(--top-default-light), 1em 0em var(--top-default-light), 5em 0em var(--top-default-light), 6em 0em var(--top-default-light), 7em 0em var(--top-default-light), 8em 0em var(--top-default-light), 9em 0em var(--top-default-light), 10em 0em var(--top-default-light), 14em 0em var(--top-default-light), 15em 0em var(--top-default-light), 1em 15em var(--top-default-light), 5em 15em var(--top-default-light), 6em 15em var(--top-default-light), 7em 15em var(--top-default-light), 8em 15em var(--top-default-light), 9em 15em var(--top-default-light), 10em 15em var(--top-default-light), 14em 15em var(--top-default-light);
transform: translateZ(-2em) rotateX(90deg);
}
.building-3 > div:nth-child(4) {
width: 2em; height: 1em;
background: var(--left-default-light);
box-shadow: 0em 15em var(--left-default-light);
transform: translate(6em, 1em) translateZ(5em) rotateY(90deg);
}
.building-3 > div:nth-child(4)::before {
width: 3em; height: 16em;
clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
background: var(--left-default-light);
transform: translateX(3em) translateZ(10em) rotateY(-180deg);
}
.building-3 > div:nth-child(4)::after {
width: 3em; height: 16em;
clip-path: polygon(0em 0em, 0em 16em, 3em 16em, 3em 14em, 1em 14em, 1em 11em, 3em 11em, 3em 5em, 1em 5em, 1em 2em, 3em 2em, 3em 0em);
background: var(--right-default-light);
transform: translate(3em, 1em) translateZ(-5em) rotateX(90deg) rotateY(180deg);
}
.building-3 > div:nth-child(5) {
width: 2em; height: 1em;
background: var(--left-default-light);
box-shadow: 0em 15em var(--left-default-light);
transform: translate(15em, 1em) translateZ(5em) rotateY(90deg);
}
.building-3 > div:nth-child(5)::before {
width: 7em; height: 10em;
clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
background: var(--left-default-light);
transform: translate(-5em, 3em) translateZ(-11em);
}
.building-3 > div:nth-child(5)::after {
width: 7em; height: 10em;
clip-path: polygon(0em 0em, 7em 0em, 7em 4em, 4em 4em, 4em 6em, 7em 6em, 7em 10em, 0em 10em);
background: var(--right-default-light);
transform: translate(-5em, 13em) translateZ(-11em) rotateX(90deg);
}
.building-3 > div:nth-child(6) {
width: 10em; height: 10em;
background: var(--top-default-light);
transform: translate(4em, 4em) translateZ(10em);
}
.building-3 > div:nth-child(6)::before {
border-left: 4em solid transparent;
border-right: 4em solid transparent;
border-top: 7em solid var(--right-accent-light);
transform: translate(1em, 9em) rotateX(128deg);
}
.building-3 > div:nth-child(6)::after {
border-bottom: 4em solid transparent;
border-top: 4em solid transparent;
border-left: 7em solid var(--left-accent-light);
transform: translate(1em, 1em) rotateY(-58deg);
}
.building-3 > div:nth-child(7) {
width: 3em; height: 3em;
background: var(--right-default-dark);
transform: translate(4em, 8em) translateZ(3em) rotateX(90deg);
}
.building-3 > div:nth-child(7)::before {
width: 2em; height: 3em;
background: var(--left-default-dark);
transform: translateX(6em) translateZ(-4em) rotateY(90deg);
}
.building-3 > div:nth-child(7)::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-top: 3px solid var(--right-window-h);
border-radius: 0 0 2em 2em;
transform: translate(-1em, -12em) translateZ(-10em);
}
.building-3 > div:nth-child(8) {
width: 1em; height: 2em;
background: var(--top-default-light);
box-shadow: 0 5em var(--top-default-light), 0 7em var(--top-default-light), 0 12em var(--top-default-light), 0 14em var(--top-default-light), 0 19em var(--top-default-light), 0 21em var(--top-default-light), 0 26em var(--top-default-light);
transform: translate(-21em, 6em) translateZ(-27em);
}
.building-3 > div:nth-child(8)::before {
width: 8em; height: 36em;
background: var(--top-default-light);
transform: translateY(-8em) translateZ(-1em);
}
.building-3 > div:nth-child(8)::after {
width: 20em; height: 36em;
clip-path: polygon(0em 8em, 1em 8em, 1em 0em, 20em 0em, 20em 17em, 11em 17em, 11em 28em, 20em 28em, 20em 36em, 0em 36em, 0em 34em, 1em 34em, 1em 31em, 0em 31em, 0em 27em, 1em 27em, 1em 24em, 0em 24em, 0em 20em, 1em 20em, 1em 17em, 0em 17em, 0em 13em, 1em 13em, 1em 10em, 0em 10em);
background: var(--left-default-light);
transform: translateY(-8em) rotateY(90deg);
}
.building-3 > div:nth-child(9) {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translate(-21em, 8em) translateZ(-27em) rotateX(-90deg);
}
.building-3 > div:nth-child(9)::before {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateZ(7em);
}
.building-3 > div:nth-child(9)::after {
width: 49em; height: 60em;
clip-path: polygon(0em 60em, 0em 9em, 4em 9em, 4em 10em, 7em 10em, 7em 9em, 12em 9em, 12em 10em, 15em 10em, 15em 9em, 20em 9em, 20em 10em, 23em 10em, 23em 9em, 28em 9em, 28em 10em, 31em 10em, 31em 9em, 36em 9em, 36em 10em, 39em 10em, 39em 9em, 41em 9em, 41em 0em, 43em 0em, 43em 1em, 47em 1em, 47em 0em, 49em 0em, 49em 60em);
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1em 13em/3em 2em repeat-x, var(--right-default-light);
transform: translateX(-41em) translateZ(26em);
}
.building-3 > div:nth-child(10) {
width: 2em; height: 1em;
background: var(--top-default-light);
box-shadow: 6em 0 var(--top-default-light);
transform: translate(-21em, 33em) translateZ(-27em);
}
.building-3 > div:nth-child(10)::before {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateY(-11em) rotateX(-90deg);
}
.building-3 > div:nth-child(10)::after {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateY(-4em) rotateX(-90deg);
}
.building-3 > div:nth-child(11) {
width: 1em; height: 1em;
background: var(--top-default-light);
box-shadow: -31em -36em var(--top-default-light), -32em -36em var(--top-default-light), -36em -36em var(--top-default-light), -37em -36em var(--top-default-light), -38em -36em var(--top-default-light), -39em -33em var(--top-default-light), -39em -32em var(--top-default-light), -39em -31em var(--top-default-light), -39em -30em var(--top-default-light), -39em -29em var(--top-default-light), -39em -25em var(--top-default-light), -39em -24em var(--top-default-light), -39em -23em var(--top-default-light), -39em -22em var(--top-default-light), -39em -21em var(--top-default-light), -39em -17em var(--top-default-light), -39em -16em var(--top-default-light), -39em -15em var(--top-default-light), -39em -14em var(--top-default-light), -39em -13em var(--top-default-light), -39em -9em var(--top-default-light), -39em -8em var(--top-default-light), -39em -7em var(--top-default-light), -39em -6em var(--top-default-light), -39em -5em var(--top-default-light), -39em -1em var(--top-default-light), -38em 0 var(--top-default-light), -36em 0 var(--top-default-light), -30em 0 var(--top-default-light), -28em 0 var(--top-default-light), -22em 0 var(--top-default-light), -20em 0 var(--top-default-light), -14em 0 var(--top-default-light), -12em 0 var(--top-default-light), -6em 0 var(--top-default-light), -4em 0 var(--top-default-light), 1em 0 var(--top-default-light), -5em 0 var(--top-default-light), -7em 0 var(--top-default-light), -8em 0 var(--top-default-light), -13em 0 var(--top-default-light), -15em 0 var(--top-default-light), -16em 0 var(--top-default-light), -21em 0 var(--top-default-light), -23em 0 var(--top-default-light), -24em 0 var(--top-default-light), -29em 0 var(--top-default-light), -31em 0 var(--top-default-light), -32em 0 var(--top-default-light), -37em 0 var(--top-default-light), -39em 0 var(--top-default-light);
transform: translate(-23em, 33em) translateZ(-36em);
}
.building-3 > div:nth-child(11)::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-3 > div:nth-child(11)::after {
width: 10em; height: 60em;
background: var(--right-default-light);
transform: translate(8em, -5em) translateZ(8em) rotateX(-90deg);
}
.building-3 > div:nth-child(12) {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translate(-31em, 33em) translateZ(-36em) rotateY(90deg);
}
.building-3 > div:nth-child(12)::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-8em);
}
.building-3 > div:nth-child(12)::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateZ(-16em);
}
.building-3 > div:nth-child(13) {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translate(-55em, 33em) translateZ(-36em) rotateY(90deg);
}
.building-3 > div:nth-child(13)::before {
width: 48em; height: 57em;
clip-path: polygon(0em 0em, 0em 57em, 8em 57em, 8em 44em, 47em 44em, 47em 43em, 8em 43em, 8em 8em, 16em 8em, 16em 0em);
background: var(--top-default-light);
transform: translate(1em, -43em) translateZ(-14em) rotateY(-90deg);
}
.building-3 > div:nth-child(13)::after {
width: 9em; height: 13em;
background: var(--right-default-dark);
transform: translate(2em, -18em) translateZ(34em) rotateX(90deg);
}
.building-3 > div:nth-child(14) {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-32em, 34em) translateZ(-50em) rotateX(-90deg);
}
.building-3 > div:nth-child(14)::before {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(16em);
}
.building-3 > div:nth-child(14)::after {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translate(-30em, -14em) translateZ(-5em);
}
.building-3 > div:nth-child(15) {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translate(-62em, 21em) translateZ(-36em) rotateX(-90deg);
}
.building-3 > div:nth-child(15)::before {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateZ(-8em);
}
.building-3 > div:nth-child(15)::after {
width: 1em; height: 1em;
background: var(--right-default-light);
transform: translateZ(-16em);
}
.building-3 > div:nth-child(16) {
width: 1em; height: 2em;
background: var(--left-default-light);
box-shadow: 0 32em var(--left-default-light), 0 27em var(--left-default-light), 0 26em var(--left-default-light), 0 24em var(--left-default-light), 0 19em var(--left-default-light), 0 18em var(--left-default-light), 0 16em var(--left-default-light), 0 9em var(--left-default-light), 0 11em var(--left-default-light), 0 8em var(--left-default-light), 0 2em var(--left-default-light), 0 3em var(--left-default-light);
transform: translateX(-62em) translateZ(-36em) rotateY(90deg);
}
.building-3 > div:nth-child(16)::before {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateY(-3em) translateZ(1em);
}
.building-3 > div:nth-child(16)::after {
width: 1em; height: 1em;
background: var(--left-default-light);
transform: translateY(-3em) translateZ(7em);
}
.building-3 > div:nth-child(17) {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translate(-70em, 39em) translateZ(-38em);
}
.building-3 > div:nth-child(17)::before {
width: 8em; height: 10em;
clip-path: polygon(0em 0em, 2em 0em, 2em 1em, 6em 1em, 6em 0em, 8em 0em, 8em 10em, 0em 10em);
background: var(--right-default-light);
transform: translate(9em, -41em) translateZ(2em) rotateX(-90deg);
}
.building-3 > div:nth-child(17)::after {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
.building-3 > div:nth-child(18) {
width: 1em; height: 8em;
background: var(--top-default-light);
transform: translate(-72em, 39em) translateZ(-40em);
}
.building-3 > div:nth-child(18)::before {
width: 59em; height: 81em;
clip-path: polygon(0em 0em, 0em 57em, 0.1em 58.8em, 0.5em 61em, 1.2em 63.1em, 2.5em 65.6em, 4.1em 67.7em, 5.9em 69.4em, 8.2em 71em, 9.9em 71.8em, 11.3em 72.3em, 12.9em 72.7em, 14.2em 72.9em, 16em 73em, 28em 73em, 28em 74em.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0