html,
body {
    height: 100%;
}

body {
    margin: 0;
    background-color: rgb(64, 64, 64);
}

div {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    perspective: 5px;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100vh;
}

.backgroundWrapper {
    position: absolute;
    height: 100vh;
    width: 657vh;
    overflow: hidden;
}

.nightBackground {
    height: 100vh;
    /* scale = 1 + (translateZ * -1) / perspective */
    transform: translateZ(-5px) scale(2);
}

.houseContainer {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    transform: translateZ(0);
}

.house {
    flex: 0 0 auto;
    background-color: black;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.window {
    flex: 0 1 auto;
    position: relative;
    overflow: hidden;
    transition: 1s transform;
}
.window:hover {
    transform: scale(1.2);
    transition-delay: 1.5s;
}

/* Stores */
.window:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg, black, black 12px, transparent 12px, transparent 15px, black 15px),     repeating-linear-gradient(90deg, black, black 8px, transparent 8px, transparent 14px, black 14px);
    transition: 1s bottom;
}
.window:hover:before {
    bottom: 100%;
}
/* Fade around images */
.window:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, black, transparent 10%, transparent 90%, black 100%),
    linear-gradient(90deg, black, transparent 10%, transparent 90%, black 100%);
}

.window {
    max-width: 15vh;
    max-height: 25vh;
}
.window img {
    max-width: inherit;
    max-height: inherit;
}


/*********** HOUSE 1 ************/
.house1 {
    margin-left: 10vh;
    height: 50vh;
    width: 20vh;
    align-items: flex-start;
}
.house1:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -3vh;
    height: 5vh;
    width: 3vh;
    background-color: black;
}
.house1:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -5vh;
    height: 12vh;
    width: 5vh;
    background-color: black;
}
.house1 .roof {
    position: absolute;
    top: -35vh;
    left: -5vh;
    border: 15vh solid transparent;
    border-bottom: 25vh solid black;
    height: 0;
    width: 0;
}
.house1 .roof:before {
    content: "";
    position: absolute;
    top: 5vh;
    left: 5vh;
    height: 10vh;
    width: 2vh;
    background-color: black;
}
.house1 .roof:after {
    content: "";
    position: absolute;
    top: 4vh;
    right: -7.5vh;
    height: 1vh;
    width: 3vh;
    background-color: black;
}

/*********** HOUSE 2 ************/
.house2 {
    margin-left: 15vh;
    height: 28vh;
    width: 20vh;
}
.window2 {
    max-height: 16vh;
}

/*********** HOUSE 3 ************/
.house3 {
    height: 50vh;
    width: 35vh;
    padding: 0 5vh;
    flex-direction: column;
}
.house3:before {
    content: "";
    position: absolute;
    top: -8vh;
    right: 5.5vh;
    height: 8vh;
    width: 2vh;
    background-color: black;
}
.house3:after {
    content: "";
    position: absolute;
    top: -8vh;
    right: 2vh;
    height: 8vh;
    width: 2vh;
    background-color: black;
}
.window4 {
    align-self: flex-end;
    max-height: 10vh;
}

/*********** HOUSE 4 ************/
.house4 {
    margin-left: 5vh;
    height: 65vh;
    width: 55vh;
    background: linear-gradient(160deg, transparent 19vh, black 19vh);
    padding-top: 20vh;
}
.house4:before {
    content: "";
    position: absolute;
    top: 12vh;
    left: 12.5vh;
    height: 4vh;
    width: 2vh;
    background-color: black;
}
.house4:after {
    content: "";
    position: absolute;
    top: 13vh;
    left: 10vh;
    height: 4vh;
    width: 2vh;
    background-color: black;
}
.window5,
.window6 {
    max-height: 14vh;
}

/*********** HOUSE 5 ************/
.house5 {
    margin-left: 10vh;
    height: 35vh;
    width: 30vh;
}
.house5:after {
    content: "";
    position: absolute;
    top: -30vh;
    left: -5vh;
    border: 20vh solid transparent;
    border-bottom: 13vh solid black;
    height: 0;
    width: 0;
}
.window7 {
    max-height: 17vh;
}

/*********** HOUSE 6 ************/
.house6 {
    height: 30vh;
    width: 20vh;
    justify-content: flex-start;
}
.window8 {
    max-height: 12vh;
}

/*********** HOUSE 7 ************/
.house7 {
    height: 60vh;
    width: 30vh;
    flex-direction: column;
}
.house7:before {
    content: "";
    position: absolute;
    top: -3vh;
    left: 5vh;
    height: 3vh;
    width: 2vh;
    background-color: black;
}
.house7:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -8vh;
    height: 30vh;
    width: 8vh;
    background-color: black;
}
.window10 {
    max-height: 12vh;
}


/*********** HOUSE 8 ************/
.house8 {
    margin-left: 25vh;
    height: 45vh;
    width: 40vh;
    align-items: flex-start;
}
.house8:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -8vh;
    height: 12vh;
    width: 8vh;
    background-color: black;
}
.house8:after {
    content: "";
    position: absolute;
    top: -25vh;
    left: -3vh;
    border: 10vh solid transparent;
    border-bottom: 15vh solid black;
    border-left-width: 35vh;
    height: 0;
    width: 0;
}
.window11 {
    max-width: 30vh;
}

/*********** HOUSE 9 ************/
.house9 {
    margin-left: 2vh;
    height: 38vh;
    width: 20vh;
    flex-direction: column;
}
.window12,
.window13 {
    max-height: 12vh;
}

/*********** HOUSE 10 ************/
.house10 {
    margin-left: 10vh;
    height: 45vh;
    width: 65vh;
}
.house10:after {
    content: "";
    position: absolute;
    top: -65vh;
    left: 0;
    border: 35vh solid transparent;
    border-bottom: 30vh solid black;
    height: 0;
    width: 0;
    border-right-width: 30vh;
}
.window14,
.window15 {
    max-height: 17vh;
}
.window16 {
    max-width: 23vh;
}

/*********** HOUSE 11 & 12 ************/
.house11,
.house12 {
    height: 52vh;
    width: 22vh;
    flex-direction: column;
    margin-left: 4vh;
}
.house11:before,
.house12:before {
    content: "";
    position: absolute;
    top: -8vh;
    right: 5.5vh;
    height: 8vh;
    width: 2vh;
    background-color: black;
}
.house12 {
    justify-content: flex-start;
    padding-top: 9vh;
}
.window17 {
    max-height: 15vh;
}
.window18 {
    max-height: 17vh;
}

/*********** HOUSE 13 ************/
.house13 {
    margin-left: 15vh;
    height: 45vh;
    width: 23vh;
}
.house13:after {
    content: "";
    position: absolute;
    top: -16vh;
    left: 0;
    border: 6vh solid transparent;
    border-bottom: 10vh solid black;
    height: 0;
    width: 0;
    border-right-width: 17vh;
}
.window20,
.window21 {
    max-height: 15vh;
}

/*********** HOUSE 14 ************/
.house14 {
    height: 45vh;
    width: 30vh;
    background: linear-gradient(200deg, transparent 19vh, black 19vh);
    padding-top: 22vh;
    align-items: flex-start;
}
.window22,
.window23 {
    max-height: 15vh;
}

/*********** HOUSE 15 ************/
.house15 {
    margin-left: 45vh;
    height: 50vh;
    width: 20vh;
    align-items: flex-end;
    padding-bottom: 7vh;
}
.house15:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10vh;
    height: 24vh;
    width: 32vh;
    background-color: black;
}
.house15 .roof {
    position: absolute;
    top: -22vh;
    left: -2vh;
    border: 8vh solid transparent;
    border-bottom: 15vh solid black;
    height: 0px;
    width: 8vh;
    box-sizing: content-box;
}
.house15 .roof:before,
.house15 .roof:after {
    content: "";
    position: absolute;
    top: -2vh;
    height: 3vh;
    width: 0.5vh;
    background-color: black;
}
.house15 .roof:after {
    right: 0;
}
.window24 {
    max-width: 25vh;
}

/*********** HOUSE 16 ************/
.house16 {
    height: 36vh;
    width: 33vh;
    background: linear-gradient(155deg, transparent 11vh, black 11vh);
    padding-top: 13vh;
    align-items: flex-start;
    margin-left: 12vh;
}
.window25 {
    max-height: 11vh;
}