/* Variables */
$bg-1: #F3E5DF;
$bg-2: #CABFC1;

$grass-1: #D7E1A7;
$grass-2: #85A879;

$ground-1: #A56C44;
$ground-2: #3B2317;

$water-0: #64A5AF;
$water-1: #529198;
$water-2: #017D92;
$water-3: #08656E;

$street-0: #FCEAE3;
$street-1: #CABFC1;
$street-2: #4C4547;

$e1-1: #E0835C;
$e1-2: #b15640;
$e1-3: #ac523c;
$e1-4: #802a1b;

$window-1: #DBDADB;

$tree-1: #FFF5AA;
$tree-2: #E4DD8F;
$tree-3: #C9CA7E;


$light-1: #f9e2b5;
$light-2: #FFDFA0;
$light-3: #C79162;

/* Reset */
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    transform-style: preserve-3d;
}
/* Generic */
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $bg-1;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 600px;
    position: relative;
    cursor: pointer;
	
		@media(max-width: 800px){ transform: scale(.8); }
		@media(max-width: 700px){ transform: scale(.6); }
		@media(max-width: 500px){ transform: scale(.5); }
		@media(max-width: 400px){ transform: scale(.3); }
}
.face{ position: absolute; }

/**/
.b{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    height: 450px;
    width: 450px;
    transform:
        perspective(10000px)
        rotateX(60deg)
        rotateZ(-45deg)
    ;
    transition: all .2s ease;

    &::before{
        content: '';
        position: absolute;
        left: -40px;
        top: -10px;
        width: 500px;
        height: 460px;
        background-color: $bg-2;
        transform: translateZ(-20px);
    }
    &::after{
        content: '';
        position: absolute;
        left: -50px;
        top: -70px;
        width: 200px;
        height: 200px;
        background-color: $bg-2;
        transform: translateZ(-20px) skewY(20deg);
    }

}
.bt{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 450px;
    height: 250px;

    &__front{
        display: flex;
        flex-direction: column-reverse;
        width: 450px;
        height: 250px;
        background-color: $grass-1;
        transform: rotateY(0deg) translateZ(15px);
    }
        &__sidewalk,
        &__street{
            width: 450px;
            height: 125px;
        }
        &__sidewalk{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: $street-1;
            padding-top: 10px;
            border-top: 20px solid $grass-1;
            border-left: 20px solid $grass-1;
            box-shadow: inset 2px 0  0 $street-2;
        }
        &__street{
            &-a{
                width: 450px;
                height: 25px;
                background-image:
                repeating-linear-gradient(
                    to right,
                    $street-1 0px,
                    $street-1 45px,
                    darken($street-1, 15) 45px,
                    darken($street-1, 15) 46px
                );
            }
            &-b{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 450px;
                height: 75px;
                background-image: linear-gradient(to right, $street-2, darken($street-2, 3) );
                border-bottom: 2px solid darken($street-2, 10);
            }
            &-l{
                width: 450px;
                height: 6px;
                background-image:
                repeating-linear-gradient(
                    to right,
                    $street-2 0px,
                    $street-2 10px,
                    $street-0 10px,
                    $street-0 30px,
                    $street-2 30px,
                    $street-2 40px
                );
            }
            &-c{
                width: 50px;
                height: 75px;
                position: absolute;
                margin-left: -45px;
                background-image:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0px,
                    transparent 5px,
                    $street-0 5px,
                    $street-0 14px
                );
            }

        }
    &__back{
        transform: rotateY(180deg) translateZ(15px);
        width: 450px;
        height: 250px;
        background-color: $grass-1;
    }
    &__right{
        width: 30px;
        height: 250px;
        transform: rotateY(90deg) translateZ(225px);
        background-color: $grass-1;
    }
    &__left{
        width: 30px;
        height: 250px;
        transform: rotateY(-90deg) translateZ(225px);
        background-color: $grass-2;
        border-left: 3px solid $ground-2;
    }
    &__top{
        width: 450px;
        height: 30px;
        transform: rotateX( 90deg) translateZ(125px);
        background-color: $grass-2;
    }
    &__bottom{
        width: 450px;
        height: 30px;
        transform: rotateX(-90deg) translateZ(125px);
        background-color: $grass-1;
    }
}
.bl{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    height: 200px;

    &__front{
        width: 250px;
        height: 200px;
        background-image: linear-gradient(to bottom, $grass-1, darken($grass-1, 5) );
        transform: rotateY(0deg) translateZ(15px);

        position: absolute;
        &::before{
            content: '';
            position: absolute;
            height: 20px;
            width: 200px;
            bottom: 185px;
            left: 250px;
            transform-origin: top left;
            transform: rotateZ(90deg) skewX(-30deg);

            background-image:
            repeating-linear-gradient(
                to right,
                rgba($grass-2, .3) 0px,
                rgba($grass-2, .3) 8px,
                transparent 8px,
                transparent 12px
            );
        }
    }
    &__back{
        transform: rotateY(180deg) translateZ(15px);
        width: 250px;
        height: 200px;
        background-color: $grass-1;
    }
    &__right{
        width: 30px;
        height: 200px;
        transform: rotateY(90deg) translateZ(125px);
        background-color: $grass-1;
    }
    &__left{
        width: 30px;
        height: 200px;
        transform: rotateY(-90deg) translateZ(125px);
        background-color: $grass-2;
        border-left: 3px solid $ground-2;
    }
    &__top{
        width: 250px;
        height: 30px;
        transform: rotateX( 90deg) translateZ(100px);
        background-color: $grass-2;
    }
    &__bottom{
        width: 250px;
        height: 30px;
        transform: rotateX(-90deg) translateZ(100px);
        background-color: $grass-1;
        border-bottom: 3px solid $ground-1;

    }
}

    .t{
        &1{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 50px;
            height: 50px;
            transform: translateZ(6px)  ;

            &:nth-of-type(1){
                top: 100px;
                left: 20px;
            }
            &:nth-of-type(2){
                top: 110px;
                left: 0px;
            }
            &:nth-of-type(3){
                top: 130px;
                left: 10px;
            }
            &:nth-of-type(4){
                top: 130px;
                left: 30px;
            }
            &:nth-of-type(5){
                top: 150px;
                left: 30px;
            }
            &__front{
                width: 10px;
                height: 10px;
                background-color: $tree-1;
                transform: rotateY(0deg) translateZ(5px);
            }
            &__back{
                position: relative;
                width: 10px;
                height: 10px;
                transform: rotateY(180deg) translateZ(5px);
                background-color: $tree-3;
                box-shadow:
                5px -2px 0 lighten($grass-2, 5),
                5px 0px 0 lighten($grass-2, 5),
                0px 2px 0 lighten($grass-2, 5),
                5px 2px 0 lighten($grass-2, 5)
                ;
            }

            &__right{
                width: 10px;
                height: 10px;
                transform: rotateY(90deg) translateZ(5px);
                background-color: $tree-1;
            }
            &__left{
                width: 10px;
                height: 10px;
                transform: rotateY(-90deg) translateZ(5px);
                background-color: $tree-3;
            }
            &__top{
                width: 10px;
                height: 10px;
                transform: rotateX( 90deg) translateZ(5px);
                background-color: $tree-1;
            }
            &__bottom{
                width: 10px;
                height: 10px;
                transform: rotateX(-90deg) translateZ(5px);
                background-color: $tree-2;

            }
        }
    }

.br{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 200px;
    height: 200px;

    &-f{
        opacity: .7;
        position: absolute;
    }
    &__front{
        width: 200px;
        height: 200px;
        background-color: $water-1;
        transform: rotateY(0deg) translateZ(15px);
        position: absolute;
        overflow: hidden;
        &::before{
            content: '';
            position: absolute;
            height: 20px;
            width: 200px;
            bottom: 180px;
            transform: skewX(-5deg);
            background-image:
            repeating-linear-gradient(
                to right,
                rgba(white, .1) 0px,
                rgba(white, .1) 8px,
                transparent 8px,
                transparent 12px
            );
            filter: blur(2px);
        }
        &::after{
            content: '';
            position: absolute;
            height: 400px;
            width: 200px;
            bottom: 0;
            right: -100px;
            background-image: linear-gradient(to right, rgba(white, .1), rgba($water-0, .5));
            border-top-left-radius:  30%;
            border-bottom-left-radius:  50%;
        }

    }
    &__back{
        transform: rotateY(180deg) translateZ(15px);
        width: 200px;
        height: 200px;
        background-image: linear-gradient(to bottom, darken($water-3, 20), $water-3);
        opacity: 1;
    }

    &__right{
        width: 30px;
        height: 200px;
        transform: rotateY(90deg) translateZ(100px);
        background-image: linear-gradient(to right, $water-0, $water-1);
        opacity: .3;
    }
    &__left{
        width: 30px;
        height: 200px;
        transform: rotateY(-90deg) translateZ(100px);
        background-color: $water-1;
        opacity: 1;

        &::before{
            content: '';
            position: absolute;
            height: 200px;
            width: 15px;
            left: 30px;
            background-image:
            repeating-linear-gradient(
                to bottom,
                darken(white, 15) 0px,
                darken(white, 15) 8px,
                transparent 8px,
                transparent 12px
            );
        }
    }
    &__top{
        width: 200px;
        height: 30px;
        transform: rotateX( 90deg) translateZ(99px);

        background-image: linear-gradient(to bottom, darken($water-3, 20), darken($water-3, 25));
        opacity: .9;
        position: relative;
        &::before{
            content: '';
            position: absolute;
            height: 15px;
            width: 200px;
            bottom: -15px;
            background-image:
            repeating-linear-gradient(
                to right,
                white 0px,
                white 8px,
                transparent 8px,
                transparent 12px
            );
        }
    }
    &__bottom{
        width: 200px;
        height: 30px;
        transform: rotateX(-90deg) translateZ(100px);

        background-image:
            linear-gradient(
            to top,
            $ground-1 0px,
            $ground-1 3px,
            $grass-1 3px,
            $grass-1 6px,
            $water-3 6px,
            $water-3 9px,
            $water-1 9px,
            $water-1 25px,
            $water-0 30px
            );
        opacity: .9;
    }
}

/**/
.e1{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 20px;

    &__front{
        width: 100px;
        height: 100px;
        transform: rotateY(0deg) translateZ(200px);

        background-color: $e1-1;
        border: 8px solid white;
        border-top: 8px solid darken(white, 3);
        border-left: 8px solid darken(white, 7);
        box-shadow:
            inset -5px 5px 0 $e1-4,
            inset -12px 12px 0 rgba($e1-4, .2),
        ;

        background-image: linear-gradient(30deg, $e1-1, darken($e1-1, 10));

    }

    &__back{
        transform: rotateY(180deg) translateZ(-1px);
        width: 100px;
        height: 100px;
        background-color: $e1-2;
        box-shadow:
            30px -10px 0 rgba($street-2, .25),
            30px 0px 0 rgba($street-2, .25),
            0px 4px 0 rgba($street-2, .25),
            30px 4px 0 rgba($street-2, .25)
        ;

    }

    &__right{
        width: 200px;
        height: 100px;
        transform: rotateY(90deg) translateZ(50px) translateX(-100px);
        background-color: $e1-2;
    }
    &__left{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-end;
        padding-right: 10px;

        width: 200px;
        height: 100px;
        transform: rotateY(-90deg) translateZ(50px) translateX(100px);

        border-bottom: 5px solid lighten($e1-2, 5);
        border-top: 5px solid lighten($e1-2, 5);
        box-shadow: inset -3px 2px  0 $e1-3;

        background-color: $e1-3;
        background-image:
            linear-gradient(to right, transparent 70%, lighten($e1-3, 4) 70%),
            linear-gradient(to bottom, rgba($e1-3, .2) 90%, lighten($e1-3, 4) 90%)
            ;
        background-size: 4px 4px, 10px 4px;

        &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to left, transparent 80%, rgba($e1-4, .6) );
        }
        .e1__window{
            box-shadow: inset 1px 1px 0 $e1-4;
            background-color:  darken(white, 12);
        }

    }
    &__top{
        width: 100px;
        height: 200px;
        transform: rotateX( 90deg) translateZ(50px) translateY(100px);
        background-color: $e1-3;
    }
    &__bottom{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;

        width: 100px;
        height: 200px;
        transform: rotateX(-90deg) translateZ(50px) translateY(-100px);

        padding-top: 10px;
        border-right: 5px solid darken($e1-1, 3);
        border-left: 5px solid lighten($e1-1, 7);
        box-shadow: inset -3px 2px  0 $e1-2;

        background-color: $e1-1;
        background-image:
            linear-gradient(to bottom, transparent 70%, lighten($e1-1, 4) 70%),
            linear-gradient(to right, rgba($e1-1, .2) 90%, lighten($e1-1, 4) 90%)
            ;
        background-size: 4px 4px, 10px 4px;

        &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, transparent 80%, rgba($e1-2, .8) );
        }
    }

    &__window,
    &__door{
        height: 15px;
        width: 15px;
        margin: 7px;
        background-color: $window-1;
        box-shadow: inset -1px 1px 0 $e1-2;
    }
    &__window{
        background-color: white;
    }
    &__door{
        height: 30px;
        margin-top: 15px;
    }

}
.e2{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 150px;
    height: 100px;

    &-c{ display: flex; }

    &:nth-of-type(2){
        position: absolute;
        transform: translateZ(50px) ;
    }

    &__front{
        width: 180px;
        height: 130px;
        transform: rotateY(0deg) translateZ(50px);

        background-color: $bg-1;
        border-radius: 8px;
        border-left: 8px solid darken($bg-1, 3);
    }

    &__back{
        transform: rotateY(180deg) translateZ(-1px);
        width: 150px;
        height: 100px;
        background-color: $e1-2;
        box-shadow:
            20px -10px 0 rgba($street-2, .25),
            20px 0px 0 rgba($street-2, .35),
            20px 4px 0 rgba($street-2, .25)

        ;
    }
    &__right{
        width: 50px;
        height: 100px;
        transform: rotateY(90deg) translateZ(75px) translateX(-20px);
        background-color: $e1-1;
    }
    &__left{
        width: 50px;
        height: 100px;
        transform: rotateY(-90deg) translateZ(75px) translateX(20px);
        background-color: $e1-3;
        &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to left, transparent , rgba($e1-4, .9) );
        }
    }
    &__top{
        width: 150px;
        height: 50px;
        transform: rotateX( 90deg) translateZ(50px) translateY(20px);
        background-color: $e1-3;
    }
    &__bottom{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        width: 150px;
        height: 50px;
        transform: rotateX(-90deg) translateZ(50px) translateY(-20px);

        padding-top: 10px;

        background-color: $e1-1;
        background-image:
            linear-gradient(to bottom, transparent 50%, lighten($e1-1, 4) 50%),
            linear-gradient(to right, rgba($e1-1, 1) 50%, lighten($e1-1, 2) 50%)
            ;
        background-size: 4px 4px, 4px 4px;
        overflow: hidden;

        &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, transparent 50% , $e1-4 );
        }
        .e1__window{
            height: 13px;
            width: 13px;
        }
        .e1__door{
            margin-top: 5px;
        }
    }
}


.lampposts{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    .lamppost{
        position: absolute;
        right: 45px;
        top: 16px;
        &:nth-of-type(2){
            right: 300px;
        }
        &:nth-of-type(3){
            top: 104px;
            right: 45px;
        }
        &:nth-of-type(4){
            top: 104px;
            right: 300px;
        }

    }

        .lamp{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 10px;
            height: 10px;

            transform: translateZ(1px)  ;

            &__front{
                width: 4px;
                height: 4px;
                transform: rotateY(0deg) translateZ(40px);
                background-color: lighten($street-1, 10);

            }

            &__back{
                transform: rotateY(180deg) translateZ(0px);
                width: 4px;
                height: 4px;
                background-color: lighten($street-1, 10);
                &::before{
                    content: '';
                    position: absolute;
                    height: 6px;
                    width: 40px;
                    background-image: linear-gradient(to right,  rgba($street-2, .2),  rgba($street-2, .1) );

                    transform: skewY(-30deg);
                    transform-origin: center left;
                }

            }
            &__right{
                width: 40px;
                height: 4px;
                transform: rotateY(90deg) translateZ(-2px) translateX(-20px);
                background-color: darken($street-1, 10);
            }
            &__left{
                width: 40px;
                height: 4px;
                transform: rotateY(-90deg) translateZ(-2px) translateX(20px);
                background-color: lighten($street-1, 10);
            }
            &__top{
                width: 4px;
                height: 40px;
                transform: rotateX( 90deg) translateZ(0px) translateY(20px);
                background-color: darken($street-1, 5);
            }
            &__bottom{
                width: 4px;
                height: 40px;
                transform: rotateX(-90deg) translateZ(2px) translateY(-20px);
                background-color: lighten($street-1, 10);
            }
        }
        .light{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 10px;
            height: 10px;
            transform: translateZ(40px)  ;
            &__front{
                width: 8px;
                height: 8px;
                transform: rotateY(0deg) translateZ(8px);
                background-color: $light-1;
            }
            &__back{
                transform: rotateY(180deg) translateZ(0px);
                width: 8px;
                height: 8px;
                background-color: $light-1;
            }

            &__right{
                width: 8px;
                height: 8px;
                transform: rotateY(90deg) translateZ(-4px) translateX(-4px);
                background-color: $light-3;
            }
            &__left{
                width: 8px;
                height: 8px;
                transform: rotateY(-90deg) translateZ(-4px) translateX(4px);
                background-color: $light-1;
            }
            &__top{
                width: 8px;
                height: 8px;
                transform: rotateX( 90deg) translateZ(4px) translateY(4px);
                background-color: $light-3;
            }

            &__bottom{
                width: 8px;
                height: 8px;
                transform: rotateX(-90deg) translateZ(4px) translateY(-4px);
                background-color: $light-2;
            }
        }