:root { --scenePerspective: 1; --scenePerspectiveOriginX: 50; --scenePerspectiveOriginY: 0; --itemZ: 5; --cameraSpeed: 40; --cameraZ: 0; --viewportHeight: 105; } .viewport { height: calc(var(--viewportHeight) * 1px); } .viewport .scene3D-container { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%; perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px); perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%); will-change: perspective-origin; transform: translate3d(0, 0, 0); } .viewport .scene3D-container .scene3D { position: absolute; top: 0; height: 100vh; width: 100%; transform-style: preserve-3d; transform: translateZ(calc(var(--cameraZ) * 1px)); will-change: transform; } .viewport .scene3D-container .scene3D > div { position: absolute; display: block; width: 70%; top: 100%; } .viewport .scene3D-container .scene3D > div:nth-child(2n) { left: 80%; bottom: 10%; } .viewport .scene3D-container .scene3D > div:nth-child(2n+1) { right: 80%; bottom: 10%; } .viewport .scene3D-container .scene3D > div:nth-child(0) { transform: translate3D(20%, 4%, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(1) { transform: translate3D(3.5%, 239%, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(2) { transform: translate3D(7.3%, 183%, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(3) { transform: translate3D(9%, 90%, calc(var(--itemZ) * var(--cameraSpeed) * 3 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(4) { transform: translate3D(6.1%, 152%, calc(var(--itemZ) * var(--cameraSpeed) * 4 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(5) { transform: translate3D(15.9%, 180%, calc(var(--itemZ) * var(--cameraSpeed) * 5 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(6) { transform: translate3D(9.4%, 26%, calc(var(--itemZ) * var(--cameraSpeed) * 6 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(7) { transform: translate3D(19.6%, 47%, calc(var(--itemZ) * var(--cameraSpeed) * 7 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(8) { transform: translate3D(8.1%, 178%, calc(var(--itemZ) * var(--cameraSpeed) * 8 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(9) { transform: translate3D(19.2%, 82%, calc(var(--itemZ) * var(--cameraSpeed) * 9 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(10) { transform: translate3D(2.4%, 92%, calc(var(--itemZ) * var(--cameraSpeed) * 10 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(11) { transform: translate3D(19.8%, 288%, calc(var(--itemZ) * var(--cameraSpeed) * 11 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(12) { transform: translate3D(1.4%, 265%, calc(var(--itemZ) * var(--cameraSpeed) * 12 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(13) { transform: translate3D(6%, 61%, calc(var(--itemZ) * var(--cameraSpeed) * 13 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(14) { transform: translate3D(14.6%, 194%, calc(var(--itemZ) * var(--cameraSpeed) * 14 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(15) { transform: translate3D(1.6%, 273%, calc(var(--itemZ) * var(--cameraSpeed) * 15 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(16) { transform: translate3D(8%, 280%, calc(var(--itemZ) * var(--cameraSpeed) * 16 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(17) { transform: translate3D(0.8%, 48%, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(18) { transform: translate3D(9.5%, 19%, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(19) { transform: translate3D(9.2%, 52%, calc(var(--itemZ) * var(--cameraSpeed) * 19 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(20) { transform: translate3D(11.8%, 103%, calc(var(--itemZ) * var(--cameraSpeed) * 20 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(21) { transform: translate3D(9.3%, 109%, calc(var(--itemZ) * var(--cameraSpeed) * 21 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(22) { transform: translate3D(19.6%, 282%, calc(var(--itemZ) * var(--cameraSpeed) * 22 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(23) { transform: translate3D(13.1%, 274%, calc(var(--itemZ) * var(--cameraSpeed) * 23 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(24) { transform: translate3D(5.2%, 165%, calc(var(--itemZ) * var(--cameraSpeed) * 24 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(25) { transform: translate3D(5.9%, 57%, calc(var(--itemZ) * var(--cameraSpeed) * 25 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(26) { transform: translate3D(10.7%, 128%, calc(var(--itemZ) * var(--cameraSpeed) * 26 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(27) { transform: translate3D(14.9%, 284%, calc(var(--itemZ) * var(--cameraSpeed) * 27 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(28) { transform: translate3D(18.9%, 287%, calc(var(--itemZ) * var(--cameraSpeed) * 28 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(29) { transform: translate3D(6.9%, 77%, calc(var(--itemZ) * var(--cameraSpeed) * 29 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(30) { transform: translate3D(2%, 176%, calc(var(--itemZ) * var(--cameraSpeed) * 30 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(31) { transform: translate3D(15.5%, 130%, calc(var(--itemZ) * var(--cameraSpeed) * 31 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(32) { transform: translate3D(6.4%, 193%, calc(var(--itemZ) * var(--cameraSpeed) * 32 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(33) { transform: translate3D(16.8%, 132%, calc(var(--itemZ) * var(--cameraSpeed) * 33 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(34) { transform: translate3D(19.3%, 246%, calc(var(--itemZ) * var(--cameraSpeed) * 34 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(35) { transform: translate3D(14%, 239%, calc(var(--itemZ) * var(--cameraSpeed) * 35 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(36) { transform: translate3D(13.8%, 271%, calc(var(--itemZ) * var(--cameraSpeed) * 36 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(37) { transform: translate3D(8.7%, 58%, calc(var(--itemZ) * var(--cameraSpeed) * 37 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(38) { transform: translate3D(9.1%, 101%, calc(var(--itemZ) * var(--cameraSpeed) * 38 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(39) { transform: translate3D(13.3%, 89%, calc(var(--itemZ) * var(--cameraSpeed) * 39 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(40) { transform: translate3D(5.2%, 139%, calc(var(--itemZ) * var(--cameraSpeed) * 40 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(41) { transform: translate3D(19.7%, 155%, calc(var(--itemZ) * var(--cameraSpeed) * 41 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(42) { transform: translate3D(12%, 263%, calc(var(--itemZ) * var(--cameraSpeed) * 42 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(43) { transform: translate3D(3.6%, 174%, calc(var(--itemZ) * var(--cameraSpeed) * 43 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(44) { transform: translate3D(12.7%, 1%, calc(var(--itemZ) * var(--cameraSpeed) * 44 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(45) { transform: translate3D(16.8%, 215%, calc(var(--itemZ) * var(--cameraSpeed) * 45 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(46) { transform: translate3D(6.9%, 267%, calc(var(--itemZ) * var(--cameraSpeed) * 46 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(47) { transform: translate3D(16.5%, 194%, calc(var(--itemZ) * var(--cameraSpeed) * 47 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(48) { transform: translate3D(16%, 297%, calc(var(--itemZ) * var(--cameraSpeed) * 48 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(49) { transform: translate3D(16.1%, 262%, calc(var(--itemZ) * var(--cameraSpeed) * 49 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(50) { transform: translate3D(1.1%, 116%, calc(var(--itemZ) * var(--cameraSpeed) * 50 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(51) { transform: translate3D(15.5%, 38%, calc(var(--itemZ) * var(--cameraSpeed) * 51 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(52) { transform: translate3D(20%, 213%, calc(var(--itemZ) * var(--cameraSpeed) * 52 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(53) { transform: translate3D(8.8%, 127%, calc(var(--itemZ) * var(--cameraSpeed) * 53 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(54) { transform: translate3D(4.5%, 99%, calc(var(--itemZ) * var(--cameraSpeed) * 54 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(55) { transform: translate3D(0.7%, 182%, calc(var(--itemZ) * var(--cameraSpeed) * 55 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(56) { transform: translate3D(0.2%, 164%, calc(var(--itemZ) * var(--cameraSpeed) * 56 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(57) { transform: translate3D(13.7%, 108%, calc(var(--itemZ) * var(--cameraSpeed) * 57 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(58) { transform: translate3D(5.5%, 67%, calc(var(--itemZ) * var(--cameraSpeed) * 58 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(59) { transform: translate3D(14.9%, 282%, calc(var(--itemZ) * var(--cameraSpeed) * 59 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(60) { transform: translate3D(2.1%, 100%, calc(var(--itemZ) * var(--cameraSpeed) * 60 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(61) { transform: translate3D(19.4%, 251%, calc(var(--itemZ) * var(--cameraSpeed) * 61 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(62) { transform: translate3D(17.5%, 228%, calc(var(--itemZ) * var(--cameraSpeed) * 62 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(63) { transform: translate3D(14.9%, 74%, calc(var(--itemZ) * var(--cameraSpeed) * 63 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(64) { transform: translate3D(16.5%, 257%, calc(var(--itemZ) * var(--cameraSpeed) * 64 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(65) { transform: translate3D(9.1%, 1%, calc(var(--itemZ) * var(--cameraSpeed) * 65 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(66) { transform: translate3D(8.4%, 223%, calc(var(--itemZ) * var(--cameraSpeed) * 66 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(67) { transform: translate3D(10.2%, 182%, calc(var(--itemZ) * var(--cameraSpeed) * 67 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(68) { transform: translate3D(13.2%, 186%, calc(var(--itemZ) * var(--cameraSpeed) * 68 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(69) { transform: translate3D(12.5%, 13%, calc(var(--itemZ) * var(--cameraSpeed) * 69 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(70) { transform: translate3D(2.3%, 183%, calc(var(--itemZ) * var(--cameraSpeed) * 70 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(71) { transform: translate3D(11.6%, 56%, calc(var(--itemZ) * var(--cameraSpeed) * 71 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(72) { transform: translate3D(6.7%, 39%, calc(var(--itemZ) * var(--cameraSpeed) * 72 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(73) { transform: translate3D(8.9%, 105%, calc(var(--itemZ) * var(--cameraSpeed) * 73 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(74) { transform: translate3D(11.9%, 38%, calc(var(--itemZ) * var(--cameraSpeed) * 74 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(75) { transform: translate3D(19.3%, 242%, calc(var(--itemZ) * var(--cameraSpeed) * 75 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(76) { transform: translate3D(3.5%, 125%, calc(var(--itemZ) * var(--cameraSpeed) * 76 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(77) { transform: translate3D(4.5%, 279%, calc(var(--itemZ) * var(--cameraSpeed) * 77 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(78) { transform: translate3D(7.2%, 16%, calc(var(--itemZ) * var(--cameraSpeed) * 78 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(79) { transform: translate3D(16.9%, 150%, calc(var(--itemZ) * var(--cameraSpeed) * 79 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(80) { transform: translate3D(8.9%, 242%, calc(var(--itemZ) * var(--cameraSpeed) * 80 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(81) { transform: translate3D(3%, 209%, calc(var(--itemZ) * var(--cameraSpeed) * 81 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(82) { transform: translate3D(10.9%, 106%, calc(var(--itemZ) * var(--cameraSpeed) * 82 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(83) { transform: translate3D(12.4%, 102%, calc(var(--itemZ) * var(--cameraSpeed) * 83 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(84) { transform: translate3D(16.5%, 241%, calc(var(--itemZ) * var(--cameraSpeed) * 84 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(85) { transform: translate3D(14.4%, 13%, calc(var(--itemZ) * var(--cameraSpeed) * 85 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(86) { transform: translate3D(9.4%, 172%, calc(var(--itemZ) * var(--cameraSpeed) * 86 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(87) { transform: translate3D(12.3%, 73%, calc(var(--itemZ) * var(--cameraSpeed) * 87 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(88) { transform: translate3D(17%, 37%, calc(var(--itemZ) * var(--cameraSpeed) * 88 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(89) { transform: translate3D(5.9%, 177%, calc(var(--itemZ) * var(--cameraSpeed) * 89 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(90) { transform: translate3D(10.4%, 187%, calc(var(--itemZ) * var(--cameraSpeed) * 90 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(91) { transform: translate3D(9.3%, 46%, calc(var(--itemZ) * var(--cameraSpeed) * 91 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(92) { transform: translate3D(10.6%, 45%, calc(var(--itemZ) * var(--cameraSpeed) * 92 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(93) { transform: translate3D(6.3%, 44%, calc(var(--itemZ) * var(--cameraSpeed) * 93 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(94) { transform: translate3D(0.9%, 177%, calc(var(--itemZ) * var(--cameraSpeed) * 94 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(95) { transform: translate3D(12.7%, 251%, calc(var(--itemZ) * var(--cameraSpeed) * 95 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(96) { transform: translate3D(16.1%, 95%, calc(var(--itemZ) * var(--cameraSpeed) * 96 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(97) { transform: translate3D(10.5%, 13%, calc(var(--itemZ) * var(--cameraSpeed) * 97 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(98) { transform: translate3D(9.9%, 202%, calc(var(--itemZ) * var(--cameraSpeed) * 98 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(99) { transform: translate3D(0.4%, 91%, calc(var(--itemZ) * var(--cameraSpeed) * 99 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(100) { transform: translate3D(15.1%, 85%, calc(var(--itemZ) * var(--cameraSpeed) * 100 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(101) { transform: translate3D(19.7%, 235%, calc(var(--itemZ) * var(--cameraSpeed) * 101 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(102) { transform: translate3D(4.4%, 217%, calc(var(--itemZ) * var(--cameraSpeed) * 102 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(103) { transform: translate3D(8.8%, 6%, calc(var(--itemZ) * var(--cameraSpeed) * 103 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(104) { transform: translate3D(4.8%, 268%, calc(var(--itemZ) * var(--cameraSpeed) * 104 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(105) { transform: translate3D(17.6%, 132%, calc(var(--itemZ) * var(--cameraSpeed) * 105 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(106) { transform: translate3D(13.4%, 195%, calc(var(--itemZ) * var(--cameraSpeed) * 106 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(107) { transform: translate3D(0.9%, 24%, calc(var(--itemZ) * var(--cameraSpeed) * 107 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(108) { transform: translate3D(10.4%, 65%, calc(var(--itemZ) * var(--cameraSpeed) * 108 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(109) { transform: translate3D(12.1%, 190%, calc(var(--itemZ) * var(--cameraSpeed) * 109 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(110) { transform: translate3D(14.6%, 113%, calc(var(--itemZ) * var(--cameraSpeed) * 110 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(111) { transform: translate3D(13.3%, 236%, calc(var(--itemZ) * var(--cameraSpeed) * 111 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(112) { transform: translate3D(13.2%, 87%, calc(var(--itemZ) * var(--cameraSpeed) * 112 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(113) { transform: translate3D(9.2%, 230%, calc(var(--itemZ) * var(--cameraSpeed) * 113 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(114) { transform: translate3D(14.2%, 55%, calc(var(--itemZ) * var(--cameraSpeed) * 114 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(115) { transform: translate3D(11.8%, 9%, calc(var(--itemZ) * var(--cameraSpeed) * 115 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(116) { transform: translate3D(19.7%, 28%, calc(var(--itemZ) * var(--cameraSpeed) * 116 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(117) { transform: translate3D(19.7%, 131%, calc(var(--itemZ) * var(--cameraSpeed) * 117 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(118) { transform: translate3D(4.8%, 244%, calc(var(--itemZ) * var(--cameraSpeed) * 118 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(119) { transform: translate3D(14%, 286%, calc(var(--itemZ) * var(--cameraSpeed) * 119 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(120) { transform: translate3D(16.5%, 173%, calc(var(--itemZ) * var(--cameraSpeed) * 120 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(121) { transform: translate3D(11.8%, 236%, calc(var(--itemZ) * var(--cameraSpeed) * 121 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(122) { transform: translate3D(12.3%, 189%, calc(var(--itemZ) * var(--cameraSpeed) * 122 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(123) { transform: translate3D(1.6%, 158%, calc(var(--itemZ) * var(--cameraSpeed) * 123 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(124) { transform: translate3D(15.2%, 265%, calc(var(--itemZ) * var(--cameraSpeed) * 124 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(125) { transform: translate3D(7.3%, 215%, calc(var(--itemZ) * var(--cameraSpeed) * 125 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(126) { transform: translate3D(12.2%, 284%, calc(var(--itemZ) * var(--cameraSpeed) * 126 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(127) { transform: translate3D(13.4%, 67%, calc(var(--itemZ) * var(--cameraSpeed) * 127 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(128) { transform: translate3D(8.3%, 274%, calc(var(--itemZ) * var(--cameraSpeed) * 128 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(129) { transform: translate3D(10.7%, 244%, calc(var(--itemZ) * var(--cameraSpeed) * 129 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(130) { transform: translate3D(19.2%, 124%, calc(var(--itemZ) * var(--cameraSpeed) * 130 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(131) { transform: translate3D(4.3%, 4%, calc(var(--itemZ) * var(--cameraSpeed) * 131 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(132) { transform: translate3D(3.6%, 68%, calc(var(--itemZ) * var(--cameraSpeed) * 132 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(133) { transform: translate3D(15.8%, 168%, calc(var(--itemZ) * var(--cameraSpeed) * 133 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(134) { transform: translate3D(4.7%, 219%, calc(var(--itemZ) * var(--cameraSpeed) * 134 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(135) { transform: translate3D(10.6%, 7%, calc(var(--itemZ) * var(--cameraSpeed) * 135 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(136) { transform: translate3D(18.8%, 296%, calc(var(--itemZ) * var(--cameraSpeed) * 136 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(137) { transform: translate3D(3.4%, 39%, calc(var(--itemZ) * var(--cameraSpeed) * 137 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(138) { transform: translate3D(17.1%, 151%, calc(var(--itemZ) * var(--cameraSpeed) * 138 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(139) { transform: translate3D(3.9%, 129%, calc(var(--itemZ) * var(--cameraSpeed) * 139 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(140) { transform: translate3D(1.2%, 208%, calc(var(--itemZ) * var(--cameraSpeed) * 140 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(141) { transform: translate3D(14.8%, 142%, calc(var(--itemZ) * var(--cameraSpeed) * 141 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(142) { transform: translate3D(2.4%, 279%, calc(var(--itemZ) * var(--cameraSpeed) * 142 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(143) { transform: translate3D(3.2%, 198%, calc(var(--itemZ) * var(--cameraSpeed) * 143 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(144) { transform: translate3D(13.8%, 50%, calc(var(--itemZ) * var(--cameraSpeed) * 144 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(145) { transform: translate3D(19.9%, 11%, calc(var(--itemZ) * var(--cameraSpeed) * 145 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(146) { transform: translate3D(9.6%, 258%, calc(var(--itemZ) * var(--cameraSpeed) * 146 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(147) { transform: translate3D(6.8%, 257%, calc(var(--itemZ) * var(--cameraSpeed) * 147 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(148) { transform: translate3D(11.2%, 100%, calc(var(--itemZ) * var(--cameraSpeed) * 148 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(149) { transform: translate3D(13%, 65%, calc(var(--itemZ) * var(--cameraSpeed) * 149 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(150) { transform: translate3D(8.9%, 227%, calc(var(--itemZ) * var(--cameraSpeed) * 150 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(151) { transform: translate3D(12%, 165%, calc(var(--itemZ) * var(--cameraSpeed) * 151 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(152) { transform: translate3D(17.2%, 232%, calc(var(--itemZ) * var(--cameraSpeed) * 152 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(153) { transform: translate3D(8.9%, 27%, calc(var(--itemZ) * var(--cameraSpeed) * 153 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(154) { transform: translate3D(15.8%, 283%, calc(var(--itemZ) * var(--cameraSpeed) * 154 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(155) { transform: translate3D(2.9%, 189%, calc(var(--itemZ) * var(--cameraSpeed) * 155 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(156) { transform: translate3D(1.7%, 2%, calc(var(--itemZ) * var(--cameraSpeed) * 156 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(157) { transform: translate3D(11.5%, 192%, calc(var(--itemZ) * var(--cameraSpeed) * 157 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(158) { transform: translate3D(10.2%, 75%, calc(var(--itemZ) * var(--cameraSpeed) * 158 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(159) { transform: translate3D(5.8%, 12%, calc(var(--itemZ) * var(--cameraSpeed) * 159 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(160) { transform: translate3D(18.9%, 211%, calc(var(--itemZ) * var(--cameraSpeed) * 160 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(161) { transform: translate3D(18.7%, 159%, calc(var(--itemZ) * var(--cameraSpeed) * 161 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(162) { transform: translate3D(3.5%, 3%, calc(var(--itemZ) * var(--cameraSpeed) * 162 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(163) { transform: translate3D(9.8%, 82%, calc(var(--itemZ) * var(--cameraSpeed) * 163 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(164) { transform: translate3D(3.8%, 79%, calc(var(--itemZ) * var(--cameraSpeed) * 164 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(165) { transform: translate3D(8.9%, 293%, calc(var(--itemZ) * var(--cameraSpeed) * 165 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(166) { transform: translate3D(19.3%, 141%, calc(var(--itemZ) * var(--cameraSpeed) * 166 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(167) { transform: translate3D(18.8%, 208%, calc(var(--itemZ) * var(--cameraSpeed) * 167 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(168) { transform: translate3D(3.1%, 172%, calc(var(--itemZ) * var(--cameraSpeed) * 168 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(169) { transform: translate3D(7.2%, 146%, calc(var(--itemZ) * var(--cameraSpeed) * 169 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(170) { transform: translate3D(3.5%, 247%, calc(var(--itemZ) * var(--cameraSpeed) * 170 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(171) { transform: translate3D(6%, 261%, calc(var(--itemZ) * var(--cameraSpeed) * 171 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(172) { transform: translate3D(3.7%, 50%, calc(var(--itemZ) * var(--cameraSpeed) * 172 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(173) { transform: translate3D(6.3%, 127%, calc(var(--itemZ) * var(--cameraSpeed) * 173 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(174) { transform: translate3D(12.3%, 156%, calc(var(--itemZ) * var(--cameraSpeed) * 174 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(175) { transform: translate3D(4.4%, 53%, calc(var(--itemZ) * var(--cameraSpeed) * 175 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(176) { transform: translate3D(10.6%, 26%, calc(var(--itemZ) * var(--cameraSpeed) * 176 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(177) { transform: translate3D(11.8%, 62%, calc(var(--itemZ) * var(--cameraSpeed) * 177 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(178) { transform: translate3D(12.5%, 162%, calc(var(--itemZ) * var(--cameraSpeed) * 178 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(179) { transform: translate3D(9.2%, 180%, calc(var(--itemZ) * var(--cameraSpeed) * 179 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(180) { transform: translate3D(3.6%, 54%, calc(var(--itemZ) * var(--cameraSpeed) * 180 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(181) { transform: translate3D(2.6%, 12%, calc(var(--itemZ) * var(--cameraSpeed) * 181 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(182) { transform: translate3D(1.4%, 300%, calc(var(--itemZ) * var(--cameraSpeed) * 182 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(183) { transform: translate3D(8.9%, 20%, calc(var(--itemZ) * var(--cameraSpeed) * 183 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(184) { transform: translate3D(11.8%, 127%, calc(var(--itemZ) * var(--cameraSpeed) * 184 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(185) { transform: translate3D(15.6%, 272%, calc(var(--itemZ) * var(--cameraSpeed) * 185 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(186) { transform: translate3D(19.3%, 56%, calc(var(--itemZ) * var(--cameraSpeed) * 186 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(187) { transform: translate3D(9.5%, 162%, calc(var(--itemZ) * var(--cameraSpeed) * 187 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(188) { transform: translate3D(17.8%, 232%, calc(var(--itemZ) * var(--cameraSpeed) * 188 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(189) { transform: translate3D(16.1%, 252%, calc(var(--itemZ) * var(--cameraSpeed) * 189 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(190) { transform: translate3D(18.9%, 221%, calc(var(--itemZ) * var(--cameraSpeed) * 190 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(191) { transform: translate3D(17.1%, 46%, calc(var(--itemZ) * var(--cameraSpeed) * 191 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(192) { transform: translate3D(10.5%, 209%, calc(var(--itemZ) * var(--cameraSpeed) * 192 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(193) { transform: translate3D(18.3%, 259%, calc(var(--itemZ) * var(--cameraSpeed) * 193 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(194) { transform: translate3D(3.3%, 111%, calc(var(--itemZ) * var(--cameraSpeed) * 194 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(195) { transform: translate3D(2.9%, 167%, calc(var(--itemZ) * var(--cameraSpeed) * 195 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(196) { transform: translate3D(12.4%, 193%, calc(var(--itemZ) * var(--cameraSpeed) * 196 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(197) { transform: translate3D(10.3%, 16%, calc(var(--itemZ) * var(--cameraSpeed) * 197 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(198) { transform: translate3D(1.1%, 239%, calc(var(--itemZ) * var(--cameraSpeed) * 198 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(199) { transform: translate3D(2.8%, 263%, calc(var(--itemZ) * var(--cameraSpeed) * 199 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(200) { transform: translate3D(19.8%, 269%, calc(var(--itemZ) * var(--cameraSpeed) * 200 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(201) { transform: translate3D(2.9%, 96%, calc(var(--itemZ) * var(--cameraSpeed) * 201 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(202) { transform: translate3D(18.4%, 252%, calc(var(--itemZ) * var(--cameraSpeed) * 202 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(203) { transform: translate3D(5.4%, 154%, calc(var(--itemZ) * var(--cameraSpeed) * 203 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(204) { transform: translate3D(6.3%, 168%, calc(var(--itemZ) * var(--cameraSpeed) * 204 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(205) { transform: translate3D(0.5%, 30%, calc(var(--itemZ) * var(--cameraSpeed) * 205 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(206) { transform: translate3D(8.2%, 300%, calc(var(--itemZ) * var(--cameraSpeed) * 206 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(207) { transform: translate3D(12.4%, 193%, calc(var(--itemZ) * var(--cameraSpeed) * 207 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(208) { transform: translate3D(17.7%, 261%, calc(var(--itemZ) * var(--cameraSpeed) * 208 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(209) { transform: translate3D(19.8%, 175%, calc(var(--itemZ) * var(--cameraSpeed) * 209 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(210) { transform: translate3D(5.1%, 230%, calc(var(--itemZ) * var(--cameraSpeed) * 210 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(211) { transform: translate3D(13.5%, 97%, calc(var(--itemZ) * var(--cameraSpeed) * 211 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(212) { transform: translate3D(12.1%, 10%, calc(var(--itemZ) * var(--cameraSpeed) * 212 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(213) { transform: translate3D(16.6%, 102%, calc(var(--itemZ) * var(--cameraSpeed) * 213 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(214) { transform: translate3D(17.7%, 190%, calc(var(--itemZ) * var(--cameraSpeed) * 214 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(215) { transform: translate3D(1.9%, 112%, calc(var(--itemZ) * var(--cameraSpeed) * 215 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(216) { transform: translate3D(10.5%, 190%, calc(var(--itemZ) * var(--cameraSpeed) * 216 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(217) { transform: translate3D(5.2%, 300%, calc(var(--itemZ) * var(--cameraSpeed) * 217 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(218) { transform: translate3D(19.6%, 78%, calc(var(--itemZ) * var(--cameraSpeed) * 218 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(219) { transform: translate3D(12.9%, 165%, calc(var(--itemZ) * var(--cameraSpeed) * 219 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(220) { transform: translate3D(13.2%, 161%, calc(var(--itemZ) * var(--cameraSpeed) * 220 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(221) { transform: translate3D(10.6%, 252%, calc(var(--itemZ) * var(--cameraSpeed) * 221 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(222) { transform: translate3D(16.1%, 268%, calc(var(--itemZ) * var(--cameraSpeed) * 222 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(223) { transform: translate3D(17.9%, 167%, calc(var(--itemZ) * var(--cameraSpeed) * 223 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(224) { transform: translate3D(2.7%, 204%, calc(var(--itemZ) * var(--cameraSpeed) * 224 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(225) { transform: translate3D(5.5%, 79%, calc(var(--itemZ) * var(--cameraSpeed) * 225 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(226) { transform: translate3D(8%, 85%, calc(var(--itemZ) * var(--cameraSpeed) * 226 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(227) { transform: translate3D(1.3%, 52%, calc(var(--itemZ) * var(--cameraSpeed) * 227 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(228) { transform: translate3D(2.3%, 145%, calc(var(--itemZ) * var(--cameraSpeed) * 228 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(229) { transform: translate3D(16.4%, 246%, calc(var(--itemZ) * var(--cameraSpeed) * 229 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(230) { transform: translate3D(10.2%, 222%, calc(var(--itemZ) * var(--cameraSpeed) * 230 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(231) { transform: translate3D(10.1%, 35%, calc(var(--itemZ) * var(--cameraSpeed) * 231 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(232) { transform: translate3D(12.8%, 10%, calc(var(--itemZ) * var(--cameraSpeed) * 232 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(233) { transform: translate3D(7.3%, 180%, calc(var(--itemZ) * var(--cameraSpeed) * 233 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(234) { transform: translate3D(12.9%, 104%, calc(var(--itemZ) * var(--cameraSpeed) * 234 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(235) { transform: translate3D(17.9%, 82%, calc(var(--itemZ) * var(--cameraSpeed) * 235 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(236) { transform: translate3D(16.7%, 82%, calc(var(--itemZ) * var(--cameraSpeed) * 236 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(237) { transform: translate3D(0.6%, 27%, calc(var(--itemZ) * var(--cameraSpeed) * 237 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(238) { transform: translate3D(16.7%, 146%, calc(var(--itemZ) * var(--cameraSpeed) * 238 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(239) { transform: translate3D(16.3%, 238%, calc(var(--itemZ) * var(--cameraSpeed) * 239 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(240) { transform: translate3D(17.3%, 85%, calc(var(--itemZ) * var(--cameraSpeed) * 240 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(241) { transform: translate3D(17%, 162%, calc(var(--itemZ) * var(--cameraSpeed) * 241 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(242) { transform: translate3D(10.5%, 162%, calc(var(--itemZ) * var(--cameraSpeed) * 242 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(243) { transform: translate3D(19.7%, 216%, calc(var(--itemZ) * var(--cameraSpeed) * 243 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(244) { transform: translate3D(16.3%, 62%, calc(var(--itemZ) * var(--cameraSpeed) * 244 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(245) { transform: translate3D(12.5%, 203%, calc(var(--itemZ) * var(--cameraSpeed) * 245 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(246) { transform: translate3D(13.5%, 59%, calc(var(--itemZ) * var(--cameraSpeed) * 246 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(247) { transform: translate3D(3%, 188%, calc(var(--itemZ) * var(--cameraSpeed) * 247 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(248) { transform: translate3D(15%, 221%, calc(var(--itemZ) * var(--cameraSpeed) * 248 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(249) { transform: translate3D(16.1%, 258%, calc(var(--itemZ) * var(--cameraSpeed) * 249 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(250) { transform: translate3D(10.8%, 232%, calc(var(--itemZ) * var(--cameraSpeed) * 250 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(251) { transform: translate3D(1.6%, 176%, calc(var(--itemZ) * var(--cameraSpeed) * 251 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(252) { transform: translate3D(5.8%, 198%, calc(var(--itemZ) * var(--cameraSpeed) * 252 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(253) { transform: translate3D(3.7%, 96%, calc(var(--itemZ) * var(--cameraSpeed) * 253 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(254) { transform: translate3D(18.9%, 180%, calc(var(--itemZ) * var(--cameraSpeed) * 254 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(255) { transform: translate3D(9.6%, 30%, calc(var(--itemZ) * var(--cameraSpeed) * 255 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(256) { transform: translate3D(7.6%, 165%, calc(var(--itemZ) * var(--cameraSpeed) * 256 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(257) { transform: translate3D(1.5%, 57%, calc(var(--itemZ) * var(--cameraSpeed) * 257 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(258) { transform: translate3D(7.8%, 182%, calc(var(--itemZ) * var(--cameraSpeed) * 258 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(259) { transform: translate3D(0.3%, 199%, calc(var(--itemZ) * var(--cameraSpeed) * 259 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(260) { transform: translate3D(7.8%, 144%, calc(var(--itemZ) * var(--cameraSpeed) * 260 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(261) { transform: translate3D(6.7%, 119%, calc(var(--itemZ) * var(--cameraSpeed) * 261 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(262) { transform: translate3D(6.2%, 207%, calc(var(--itemZ) * var(--cameraSpeed) * 262 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(263) { transform: translate3D(11.7%, 213%, calc(var(--itemZ) * var(--cameraSpeed) * 263 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(264) { transform: translate3D(13.2%, 154%, calc(var(--itemZ) * var(--cameraSpeed) * 264 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(265) { transform: translate3D(7.6%, 181%, calc(var(--itemZ) * var(--cameraSpeed) * 265 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(266) { transform: translate3D(18.9%, 209%, calc(var(--itemZ) * var(--cameraSpeed) * 266 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(267) { transform: translate3D(17%, 265%, calc(var(--itemZ) * var(--cameraSpeed) * 267 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(268) { transform: translate3D(3.9%, 4%, calc(var(--itemZ) * var(--cameraSpeed) * 268 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(269) { transform: translate3D(5.8%, 110%, calc(var(--itemZ) * var(--cameraSpeed) * 269 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(270) { transform: translate3D(12.2%, 102%, calc(var(--itemZ) * var(--cameraSpeed) * 270 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(271) { transform: translate3D(10%, 151%, calc(var(--itemZ) * var(--cameraSpeed) * 271 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(272) { transform: translate3D(18.4%, 225%, calc(var(--itemZ) * var(--cameraSpeed) * 272 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(273) { transform: translate3D(11.2%, 112%, calc(var(--itemZ) * var(--cameraSpeed) * 273 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(274) { transform: translate3D(9.9%, 295%, calc(var(--itemZ) * var(--cameraSpeed) * 274 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(275) { transform: translate3D(0.1%, 172%, calc(var(--itemZ) * var(--cameraSpeed) * 275 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(276) { transform: translate3D(5.6%, 130%, calc(var(--itemZ) * var(--cameraSpeed) * 276 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(277) { transform: translate3D(12.3%, 167%, calc(var(--itemZ) * var(--cameraSpeed) * 277 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(278) { transform: translate3D(16.4%, 216%, calc(var(--itemZ) * var(--cameraSpeed) * 278 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(279) { transform: translate3D(13%, 171%, calc(var(--itemZ) * var(--cameraSpeed) * 279 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(280) { transform: translate3D(4.5%, 96%, calc(var(--itemZ) * var(--cameraSpeed) * 280 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(281) { transform: translate3D(5.2%, 182%, calc(var(--itemZ) * var(--cameraSpeed) * 281 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(282) { transform: translate3D(0.3%, 222%, calc(var(--itemZ) * var(--cameraSpeed) * 282 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(283) { transform: translate3D(3.7%, 134%, calc(var(--itemZ) * var(--cameraSpeed) * 283 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(284) { transform: translate3D(7.2%, 199%, calc(var(--itemZ) * var(--cameraSpeed) * 284 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(285) { transform: translate3D(8.5%, 151%, calc(var(--itemZ) * var(--cameraSpeed) * 285 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(286) { transform: translate3D(19.3%, 242%, calc(var(--itemZ) * var(--cameraSpeed) * 286 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(287) { transform: translate3D(9.5%, 270%, calc(var(--itemZ) * var(--cameraSpeed) * 287 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(288) { transform: translate3D(3.2%, 43%, calc(var(--itemZ) * var(--cameraSpeed) * 288 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(289) { transform: translate3D(3.1%, 260%, calc(var(--itemZ) * var(--cameraSpeed) * 289 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(290) { transform: translate3D(6.4%, 294%, calc(var(--itemZ) * var(--cameraSpeed) * 290 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(291) { transform: translate3D(16.6%, 261%, calc(var(--itemZ) * var(--cameraSpeed) * 291 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(292) { transform: translate3D(18.1%, 119%, calc(var(--itemZ) * var(--cameraSpeed) * 292 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(293) { transform: translate3D(18.7%, 270%, calc(var(--itemZ) * var(--cameraSpeed) * 293 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(294) { transform: translate3D(14.4%, 188%, calc(var(--itemZ) * var(--cameraSpeed) * 294 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(295) { transform: translate3D(18%, 83%, calc(var(--itemZ) * var(--cameraSpeed) * 295 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(296) { transform: translate3D(12.7%, 131%, calc(var(--itemZ) * var(--cameraSpeed) * 296 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(297) { transform: translate3D(17.9%, 279%, calc(var(--itemZ) * var(--cameraSpeed) * 297 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(298) { transform: translate3D(10%, 261%, calc(var(--itemZ) * var(--cameraSpeed) * 298 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(299) { transform: translate3D(0.8%, 273%, calc(var(--itemZ) * var(--cameraSpeed) * 299 * -.5px)); } .viewport .scene3D-container .scene3D > div:nth-child(300) { transform: translate3D(14.6%, 254%, calc(var(--itemZ) * var(--cameraSpeed) * 300 * -.5px)); } *, *:before, *:after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Courier New", Courier, monospace; background-color: black; padding: 0; margin: 0; } #loading { width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; z-index: 100; } #text { position: fixed; z-index: 100; left: 0; bottom: 0; width: 150%; display: flex; } #text { position: fixed; left: 0; } .marquee { font-size: 60px; color: #0f0; white-space: nowrap; } @keyframes scroll-left { 0% { left: 0; } 100% { left: -3000%; } } @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } .scene3D > div { padding: 5vw; } .scene3D > div h1 { color: white; font-size: 400px; width: 1000vw; margin: 0 0 0 -650%; text-align: center; } .scene3D > div img { width: 150vw; } /*# sourceMappingURL=style.css.map */