/** House
https://habr.com/ru/articles/247731/
*/

.houseContainer {
	position: absolute;
	right: 13%;
	bottom: 23%;
	width: 60.0vh;
	height: 60.0vh;
	margin: 0px auto;
	overflow: hidden;
	transform: scale(1.6);
}

.ground {
	width: 90%;
	background-color: #f5f5f5;
	height: 21%;
	position: absolute;
	overflow: hidden;
	left: 0;
	bottom: 0;
	background: linear-gradient(#e5e8e8, #3b5869 300%);	
	box-shadow: 0 0 1vw 0 rgba(28, 76, 107, 0.4);
}
.ground.back {
	border-radius: 0 100% 0 0;
}
.ground.front {
	border-radius: 100% 0 0 0;
	height: 16%;
	left: 28%;
	width: 72%;
	z-index: 5;
}

.house {
	position: absolute;
	width: 30vh;
	height: 36.5vh;
	bottom: 5vh;
	right: 11vh;
}

.house .roof {
	width: 34vh;
	height: 17vh;
	right: -2vh;
	position: absolute;
	overflow: hidden;
}

.house .roof .roof-wall {
	position: absolute;
	width: 28vh;
	height: 28vh;
	background-color: #573808;
	transform: rotate(45deg);
	left: 2.5vh;
	top:6vh;
	border: 0.5vh solid #3a1e12;
	box-shadow: 0 0 3vh black inset;
	background: repeating-linear-gradient(45deg, #573808 0%,#573808 5%,#3a1e12 5%,#3a1e12 5%,#3a1e12 5%,#573808 5%,#3a1e12 6%);
}

.house .wall {
	width: 100%;
	height: 20vh;
	position: absolute;
	bottom: 0;
	background-color: #180c00;
	background: repeating-linear-gradient(to bottom, #573808 0%,#3a1e12 15%);
}

.house .wall .crack {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background: repeating-linear-gradient(3deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 2%,#3a1e12 2%,#3a1e12 2%,#573808 2%,#3a1e12 3%);
}

.house .wall .crack:nth-child(2) {
	opacity: 0.3;
	background: repeating-linear-gradient(-4deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 2%,#3a1e12 2%,#3a1e12 2%,#573808 2%,#3a1e12 3%);
}

.house .window {
	position: absolute;
	height: 7vh;
	width: 6.5vh;
	background-color: #cccc00;
	border: 0.5vh solid #3a1e12;
	bottom: 5.3vh;
	left: 11vh;
	box-shadow: 0 0 0.5vh black;
}

.house .window .frame:nth-child(1) {
	position: absolute;
	height: 100%;
	left: 50%;
	margin-left: -0.3vh;
	width: 0.7vh;
	background-color: #3a1e12;
}

.house .window .frame:nth-child(2) {
	position: absolute;
	width: 100%;
	top: 30%;
	height: 0.7vh;
	background-color: #3a1e12;
}

.house .window .light {
	width: 100%;
	height: 100%;
	background-color: #ffff00;
	opacity: 0.5;
	box-shadow: 0 0 5vh yellow;
	animation: window-light 3s linear infinite;
}

.house .chimney {
	position: absolute;
	height: 8vh;
	width: 3vh;
	top: 5.8vh;
	left: 2vh;
	background: linear-gradient(to right, rgba(42,41,45,1) 0%,rgba(80,84,91,1) 36%,rgba(22,27,33,1) 100%);
}

.smoke-area {
	position: absolute;
	width: 30vh;
	height: 15vh;
	top: 10.3vh;
	right: 11vh;
}

.smoke-area .smoke {
	position: absolute;
	width: 3vh;
	height: 3vh;
	border-radius: 50%;
	box-shadow: 0 0 2vh lightgray;
	background: radial-gradient(ellipse at center, rgba(206,220,231,1) 33%,rgba(89,106,114,0) 100%);
	top: 12vh;
	left: 2vh;
	animation: smoke-move 2.3s linear infinite
}

.smoke-area .smoke:nth-child(2) {
	animation: smoke-move 2.5s linear infinite
}

.smoke-area .smoke:nth-child(3) {
	animation: smoke-move 2.7s linear infinite
}

.smoke-area .smoke:nth-child(4) {
	animation: smoke-move 2.2s linear infinite
}

.smoke-area .smoke:nth-child(5) {
	animation: smoke-move 2.1s linear infinite
}

.smoke-area .smoke:nth-child(6) {
	animation: smoke-move 2s linear infinite
}

.smoke-area .smoke:nth-child(7) {
	animation: smoke-move 2.9s linear infinite
}

/* .stars, */
.meteors {
	position: absolute;
	width: 100%;
	height: 100%;	
}

.meteor {
	position: absolute;
	top: 5vh;
	left: 28vw;
	width: 30vw;
	height: 0.1vh;
	transform: rotate(-45deg);
	background-image: -webkit-linear-gradient(left, white, rgba(255,255,255,0));
}

.meteor:before {
	content: ' ';
	position: absolute;
	width: 0.4vw;
	height: 0.5vh;
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 0 1.4vw 0.4vh white;
	margin-top: -0.2vh;
}

.meteor:nth-child(1) {top: 10vh;left: 48vw;animation: meteor 10s linear infinite;}
.meteor:nth-child(2) {top: 20vh;left: 28vw;animation: meteor 10s linear infinite;}
.meteor:nth-child(3) {top: 25vh;left: 79vw;animation: meteor 9s linear infinite;}

@keyframes window-light {
	0% {opacity: 0.3}
	20% {opacity: 0.4}
	50% {opacity: 0.3}
	70% {opacity: 0.5}
	80% {opacity: 0.3}
	90% {opacity: 0.4}
	100% {opacity: 0.3}
}

@keyframes smoke-move {
	0% {top: 12vh; left: 2vh}
	20% {top: 10.7vh; left: 2.5vh}
	30% {top: 9.5vh; left: 3.5vh; opacity: 0.9}
	40% {top: 8vh; left: 4vh; }
	50% {top: 6.5vh; left: 5vh; }
	60% {top: 5.0vh; left: 6.2vh; }
	70% {top: 3.5vh; left: 7.5vh; }
	80% {top: 2.5vh; left: 9vh; }
	90% {top: 1.5vh; left: 11.7vh; }
	100% {top: 0.7vh; left: 12.7vh; opacity: 0; width: 9vh; height: 6vh}
}

@keyframes meteor {
	0% {margin-top: -30vh; margin-right: -30vh; opacity: 1}
	8% {opacity: 0}
	10% {margin-top: 30vh; margin-left: -60vh; opacity: 0}
	100% {opacity: 0}
}