.scene {
 /*overflow: hidden;*/
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 280px;
  background: #072b56;
  background-image: linear-gradient(to bottom, #001428, #001428 20%, #021c38 20%, #021c38 40%, #042448 40%, #042448 60%, #062c58 60%, #062c58 80%, #083468 80%, #0a3c78);
}

.cloud:nth-child(1) {
  position: absolute;
  top: 13.7742310762vh;
  width: 15.9015627844vmin;
  height: 5.3005209281vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -22.0827388395s;
          animation-delay: -22.0827388395s;
}
.cloud:nth-child(1)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -32.9606739799%;
  display: block;
  width: 43.9475653065%;
  height: 43.9475653065%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(1)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -36.1350934807%;
  display: block;
  width: 48.1801246409%;
  height: 48.1801246409%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(2) {
  position: absolute;
  top: 40.139573528vh;
  width: 11.3509111871vmin;
  height: 3.7836370624vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -5.8979232712s;
          animation-delay: -5.8979232712s;
}
.cloud:nth-child(2)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -32.6126396289%;
  display: block;
  width: 43.4835195052%;
  height: 43.4835195052%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(2)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -34.7111271774%;
  display: block;
  width: 46.2815029033%;
  height: 46.2815029033%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(3) {
  position: absolute;
  top: 10.7375386518vh;
  width: 13.2614411246vmin;
  height: 4.4204803749vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -9.7299780311s;
          animation-delay: -9.7299780311s;
}
.cloud:nth-child(3)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -30.7195459142%;
  display: block;
  width: 40.9593945523%;
  height: 40.9593945523%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(3)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -34.8811028721%;
  display: block;
  width: 46.5081371629%;
  height: 46.5081371629%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(4) {
  position: absolute;
  top: 39.5969614069vh;
  width: 16.8367650565vmin;
  height: 5.6122550188vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -10.9336604145s;
          animation-delay: -10.9336604145s;
}
.cloud:nth-child(4)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -31.5698336653%;
  display: block;
  width: 42.0931115538%;
  height: 42.0931115538%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(4)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -33.9801408776%;
  display: block;
  width: 45.3068545035%;
  height: 45.3068545035%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(5) {
  position: absolute;
  top: 16.6788168273vh;
  width: 17.7003407633vmin;
  height: 5.9001135878vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -9.1745633654s;
          animation-delay: -9.1745633654s;
}
.cloud:nth-child(5)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -36.0345657622%;
  display: block;
  width: 48.0460876829%;
  height: 48.0460876829%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(5)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -34.0876081407%;
  display: block;
  width: 45.4501441876%;
  height: 45.4501441876%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(6) {
  position: absolute;
  top: 1.6198596879vh;
  width: 13.0133188195vmin;
  height: 4.3377729398vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -21.4175995054s;
          animation-delay: -21.4175995054s;
}
.cloud:nth-child(6)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -36.0404346181%;
  display: block;
  width: 48.0539128242%;
  height: 48.0539128242%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(6)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -30.8268063732%;
  display: block;
  width: 41.1024084976%;
  height: 41.1024084976%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(7) {
  position: absolute;
  top: 22.8053185623vh;
  width: 9.1911289882vmin;
  height: 3.0637096627vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -12.4576768955s;
          animation-delay: -12.4576768955s;
}
.cloud:nth-child(7)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -32.4623365142%;
  display: block;
  width: 43.2831153522%;
  height: 43.2831153522%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(7)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -30.8133734005%;
  display: block;
  width: 41.0844978673%;
  height: 41.0844978673%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(8) {
  position: absolute;
  top: 33.2694376375vh;
  width: 9.3287979539vmin;
  height: 3.109599318vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -27.9306912335s;
          animation-delay: -27.9306912335s;
}
.cloud:nth-child(8)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -35.7092078246%;
  display: block;
  width: 47.6122770995%;
  height: 47.6122770995%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(8)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -34.6662763066%;
  display: block;
  width: 46.2217017421%;
  height: 46.2217017421%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(9) {
  position: absolute;
  top: 32.3050531554vh;
  width: 16.3057896836vmin;
  height: 5.4352632279vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -10.8585128386s;
          animation-delay: -10.8585128386s;
}
.cloud:nth-child(9)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -32.5551101133%;
  display: block;
  width: 43.4068134844%;
  height: 43.4068134844%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(9)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -37.0875676955%;
  display: block;
  width: 49.4500902607%;
  height: 49.4500902607%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(10) {
  position: absolute;
  top: 41.0886439334vh;
  width: 12.1980011033vmin;
  height: 4.0660003678vmin;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
  opacity: 0.2;
  -webkit-animation: cloud 30s linear infinite;
          animation: cloud 30s linear infinite;
  -webkit-animation-delay: -11.8189100413s;
          animation-delay: -11.8189100413s;
}
.cloud:nth-child(10)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -31.9684741076%;
  display: block;
  width: 42.6246321435%;
  height: 42.6246321435%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}
.cloud:nth-child(10)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -34.4011786593%;
  display: block;
  width: 45.8682382124%;
  height: 45.8682382124%;
  border-top-right-radius: 100% 200%;
  border-top-left-radius: 100% 200%;
  background-color: #000;
}

@-webkit-keyframes cloud {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

@keyframes cloud {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}
.house {
  position: relative;
  width: 10vmin;
  height: 20vmin;
  background-color: #030a14;
  color: #030a14;
}

.houses {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 1000px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: end;
  color: #030a14;
  background-image: linear-gradient(to top, currentcolor, currentcolor 30%, transparent 30%);
}

.houses1 {
  bottom: -1rem;
  color: #030a14;
}
.houses1 .house:nth-child(1) {
  width: 13.0644643816vmin;
  height: 36.5189797222vmin;
  transform: translateX(0.0183836228vw);
  content: "5";
}
.houses1 .house:nth-child(1):after {
  content: "";
  position: absolute;
  top: -17.2769516169%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 19.1966129077%;
  display: block;
  background-color: currentcolor;
}
.houses1 .house:nth-child(2) {
  width: 14.2889179842vmin;
  height: 33.5631341636vmin;
  transform: translateX(-0.0177346204vw);
  content: "1";
  padding-top: 4.5%;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
}
.houses1 .house:nth-child(3) {
  width: 8.5215262759vmin;
  height: 24.4070392092vmin;
  transform: translateX(-0.0010227152vw);
  content: "5";
}
.houses1 .house:nth-child(3):after {
  content: "";
  position: absolute;
  top: -16.516971482%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 18.3521905355%;
  display: block;
  background-color: currentcolor;
}
.houses1 .house:nth-child(4) {
  width: 8.7308772436vmin;
  height: 27.7533998576vmin;
  transform: translateX(0.0761453043vw);
  content: "6";
}
.houses1 .house:nth-child(4):before {
  content: "";
  position: absolute;
  top: -5%;
  left: 10%;
  right: 10%;
  height: 5%;
  display: block;
  background-color: currentcolor;
}
.houses1 .house:nth-child(4):after {
  content: "";
  position: absolute;
  top: -15%;
  left: 15%;
  right: 15%;
  height: 10%;
  display: block;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  background-color: currentcolor;
}
.houses1 .house:nth-child(5) {
  width: 9.530426432vmin;
  height: 18.4108271456vmin;
  transform: translateX(-0.0621007657vw);
  content: "5";
}
.houses1 .house:nth-child(5):after {
  content: "";
  position: absolute;
  top: -22.284275489%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 24.7603060989%;
  display: block;
  background-color: currentcolor;
}
.houses1 .house:nth-child(6) {
  width: 11.340285297vmin;
  height: 16.9019786999vmin;
  transform: translateX(0.0514355811vw);
  content: "4";
  padding-top: 2.5%;
  -webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 10%, 100% 10%, 100% 100%, 0 100%, 0 10%, 10% 10%);
          clip-path: polygon(10% 0%, 90% 0%, 90% 10%, 100% 10%, 100% 100%, 0 100%, 0 10%, 10% 10%);
}
.houses1 .house:nth-child(7) {
  width: 15.5819149559vmin;
  height: 33.7436893413vmin;
  transform: translateX(0.0058324285vw);
  content: "1";
  padding-top: 4.5%;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
}
.houses1 .house:nth-child(8) {
  width: 12.0427028324vmin;
  height: 34.3007693922vmin;
  transform: translateX(0.0652997868vw);
  content: "2";
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
          clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}
.houses1 .house:nth-child(9) {
  width: 14.5514108321vmin;
  height: 19.7845769218vmin;
  transform: translateX(0.0156213621vw);
  content: "6";
}
.houses1 .house:nth-child(9):before {
  content: "";
  position: absolute;
  top: -5%;
  left: 10%;
  right: 10%;
  height: 5%;
  display: block;
  background-color: currentcolor;
}
.houses1 .house:nth-child(9):after {
  content: "";
  position: absolute;
  top: -15%;
  left: 15%;
  right: 15%;
  height: 10%;
  display: block;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  background-color: currentcolor;
}
.houses1 .house:nth-child(10) {
  width: 9.6374025029vmin;
  height: 33.1032955418vmin;
  transform: translateX(-0.0125464695vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}

.houses2 {
  bottom: 1rem;
  left: -5rem;
  color: #001428;
}
.houses2 .house:nth-child(1) {
  width: 8.6510722474vmin;
  height: 24.3218278054vmin;
  transform: translateX(0.0095256508vw);
  content: "6";
}
.houses2 .house:nth-child(1):before {
  content: "";
  position: absolute;
  top: -5%;
  left: 10%;
  right: 10%;
  height: 5%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(1):after {
  content: "";
  position: absolute;
  top: -15%;
  left: 15%;
  right: 15%;
  height: 10%;
  display: block;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  background-color: currentcolor;
}
.houses2 .house:nth-child(2) {
  width: 15.9988423567vmin;
  height: 16.0960891514vmin;
  transform: translateX(0.0350145178vw);
  content: "5";
}
.houses2 .house:nth-child(2):after {
  content: "";
  position: absolute;
  top: -14.886672229%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 16.5407469211%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(3) {
  width: 9.9951053785vmin;
  height: 34.3333993897vmin;
  transform: translateX(0.0845107332vw);
  content: "6";
}
.houses2 .house:nth-child(3):before {
  content: "";
  position: absolute;
  top: -5%;
  left: 10%;
  right: 10%;
  height: 5%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(3):after {
  content: "";
  position: absolute;
  top: -15%;
  left: 15%;
  right: 15%;
  height: 10%;
  display: block;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  background-color: currentcolor;
}
.houses2 .house:nth-child(4) {
  width: 10.9670153584vmin;
  height: 27.7160591645vmin;
  transform: translateX(0.0354134455vw);
  content: "5";
}
.houses2 .house:nth-child(4):after {
  content: "";
  position: absolute;
  top: -18.4095174663%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 20.455019407%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(5) {
  width: 10.8554854382vmin;
  height: 39.4932392109vmin;
  transform: translateX(0.0708361264vw);
  content: "5";
}
.houses2 .house:nth-child(5):after {
  content: "";
  position: absolute;
  top: -24.4875370217%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 27.2083744686%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(6) {
  width: 8.4998194708vmin;
  height: 32.0400447384vmin;
  transform: translateX(-0.0274266012vw);
  content: "5";
}
.houses2 .house:nth-child(6):after {
  content: "";
  position: absolute;
  top: -16.041587724%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 17.82398636%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(7) {
  width: 13.4660079146vmin;
  height: 21.2616794178vmin;
  transform: translateX(0.0434731514vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}
.houses2 .house:nth-child(8) {
  width: 14.9395370866vmin;
  height: 24.064771928vmin;
  transform: translateX(0.0189613119vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}
.houses2 .house:nth-child(9) {
  width: 10.8467097297vmin;
  height: 28.4726259584vmin;
  transform: translateX(-0.0292551394vw);
  content: "5";
}
.houses2 .house:nth-child(9):after {
  content: "";
  position: absolute;
  top: -15.0500956096%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 16.7223284551%;
  display: block;
  background-color: currentcolor;
}
.houses2 .house:nth-child(10) {
  width: 14.6018080848vmin;
  height: 35.869376891vmin;
  transform: translateX(-0.0638043598vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}

.houses2 .house {
  color: #001428;
  background-color: #001428;
}

.houses3 {
  bottom: 3rem;
  right: -5rem;
  color: #021c38;
}
.houses3 .house:nth-child(1) {
  width: 15.3858291503vmin;
  height: 27.4957199574vmin;
  transform: translateX(-0.070793755vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}
.houses3 .house:nth-child(2) {
  width: 14.6266089661vmin;
  height: 17.1868959401vmin;
  transform: translateX(0.0909863991vw);
  content: "5";
}
.houses3 .house:nth-child(2):after {
  content: "";
  position: absolute;
  top: -13.7302364979%;
  left: calc(50% - 0.1rem);
  width: 0.2rem;
  height: 15.255818331%;
  display: block;
  background-color: currentcolor;
}
.houses3 .house:nth-child(3) {
  width: 13.4358402644vmin;
  height: 16.8487108446vmin;
  transform: translateX(-0.0207951842vw);
  content: "2";
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
          clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}
.houses3 .house:nth-child(4) {
  width: 12.8113420252vmin;
  height: 23.0801336271vmin;
  transform: translateX(-0.0081028067vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}
.houses3 .house:nth-child(5) {
  width: 13.3098349748vmin;
  height: 16.1250649724vmin;
  transform: translateX(0.0466498582vw);
  content: "2";
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
          clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}
.houses3 .house:nth-child(6) {
  width: 12.1544693932vmin;
  height: 16.7289995417vmin;
  transform: translateX(0.0146809833vw);
  content: "4";
  padding-top: 2.5%;
  -webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 10%, 100% 10%, 100% 100%, 0 100%, 0 10%, 10% 10%);
          clip-path: polygon(10% 0%, 90% 0%, 90% 10%, 100% 10%, 100% 100%, 0 100%, 0 10%, 10% 10%);
}
.houses3 .house:nth-child(7) {
  width: 15.8132792974vmin;
  height: 21.8390443969vmin;
  transform: translateX(0.0251079414vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}
.houses3 .house:nth-child(8) {
  width: 8.0110092407vmin;
  height: 29.5659572257vmin;
  transform: translateX(0.0394678148vw);
  content: "3";
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}
.houses3 .house:nth-child(9) {
  width: 14.4150897618vmin;
  height: 32.5267869107vmin;
  transform: translateX(-0.0103693947vw);
  content: "6";
}
.houses3 .house:nth-child(9):before {
  content: "";
  position: absolute;
  top: -5%;
  left: 10%;
  right: 10%;
  height: 5%;
  display: block;
  background-color: currentcolor;
}
.houses3 .house:nth-child(9):after {
  content: "";
  position: absolute;
  top: -15%;
  left: 15%;
  right: 15%;
  height: 10%;
  display: block;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  background-color: currentcolor;
}
.houses3 .house:nth-child(10) {
  width: 15.7366730241vmin;
  height: 36.2219153966vmin;
  transform: translateX(-0.0802522367vw);
  content: "1";
  padding-top: 4.5%;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
}

.houses3 .house {
  color: #021c38;
  background-color: #021c38;
}

.beam {
  position: absolute;
  bottom: 0;
  left: calc(50% - 4rem);
  width: 8rem;
  height: 45vh;
  -webkit-animation: beam 60s ease-in-out infinite alternate;
          animation: beam 60s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

.beam:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /*background-image: linear-gradient(to top, rgba(238, 252, 255, 0.3), rgba(238, 252, 255, 0));*/
  /*background-image: linear-gradient(to top, rgba(227, 179, 3, 0.3), rgba(227, 179, 3, 0));желтый*/
  background-image: linear-gradient(to top, rgba(255, 255,255, 0.3), rgba(255, 255, 255, 0));белый
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
}

@-webkit-keyframes beam {
  0% {
    transform: rotate(-30deg);
  }
  48% {
    transform: rotate(-30deg);
    bottom: 0;
  }
  50% {
    bottom: -6%;
  }
  52% {
    transform: rotate(30deg);
    bottom: 0;
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes beam {
  0% {
    transform: rotate(-30deg);
  }
  48% {
    transform: rotate(-30deg);
    bottom: 0;
  }
  50% {
    bottom: -6%;
  }
  52% {
    transform: rotate(30deg);
    bottom: 0;
  }
  100% {
    transform: rotate(30deg);
  }
}
.signal {
  position: absolute;
  top: -2.5rem;
  left: -0.16rem;
  width: 8.32rem;
  z-index: 10;
  cursor:pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-animation: signal 60s ease-in-out infinite alternate;
          animation: signal 60s ease-in-out infinite alternate;
}

.signal svg {
  max-width: 100%;
  height: auto;
  fill: rgba(255, 255,255, 0.3);
}

@-webkit-keyframes signal {
  0% {
    transform: rotate(30deg);
  }
  48% {
    transform: rotate(30deg);
  }
  52% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

@keyframes signal {
  0% {
    transform: rotate(30deg);
  }
  48% {
    transform: rotate(30deg);
  }
  52% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}