:root {
    --branco: whitesmoke;
    --preto19: #191919;
    --preto16: #161616;
    --preto15: #151515;
    --preto111: #111;
    --preto: black;
    --amarelo: #fff200;
    --cinza3e: #3e3d3d;
    --cinza30: #302f2f;
}

:root.escurecer {
    --branco: gray;
    --preto19: #191919;
    --preto16: #161616;
    --preto15: #151515;
    --preto111: #111;
    --preto: black;
    --amarelo: gray;
    --cinza3e: #3e3d3d;
    --cinza30: #302f2f;
}

.house {
    position: absolute;
    left: 15vw;
    top: 12.5vh;
    width: 55vw;
    height: 50vh;
}

.houseBlur {
    position: absolute;
    top: 22vw;
    left: 10vh;
    width: 32vw;
    height: 3vh;
    backdrop-filter: blur(0.15vw);
    z-index: 100;
    /* transform: skew(-10deg); */
}

/*Frente da casa*/
.wall1 {
    position: absolute;
    left: 5vw;
    top: 27.5vh;
    width: 10vw;
    height: 22vh;
    background: var(--preto19);
    /* transform: skew(-5deg); */
    border-top: 0.4vw solid var(--preto111);
}

/*Lado da casa*/
.wall2 {
    position: absolute;
    left: 15vw;
    top: 27.5vh;
    width: 20vw;
    height: 22vh;
    background: var(--preto111);
    /* transform: skew(-5deg); */
}

.door {
    position: absolute;
    left: 2.5vw;
    top: 4.5vw;
    width: 3.5vw;
    height: 12vh;
}

.door1 {
    position: absolute;
    top: 0.3vw;
    background: var(--preto15);
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    border-left: 0.4vw solid var(--preto111);
    border-top: 0.2vw solid var(--preto111);
    border-right: 0.2vw solid var(--preto111);
    width: 3.3vw;
    height: 11vh;
}

.door2 {
    position: absolute;
    top: 2.6vw;
    left: 2.2vw;
    width: 0.5vw;
    border-radius: 100vw;
    border-right: 0.2vw solid var(--cinza30);
    border-top: 0.2vw solid var(--cinza30);
    height: 0.5vw;
    background: var(--cinza3e);
}

.light {
    position: absolute;
    top: 3vw;
    left: 3.4vw;
    width: 2vw;
    height: 3vh;
    transform: skew(-5deg);
}

.light1 {
    border-top-left-radius: 100vw;
    border-top-right-radius: 100vw;
    width: 1.5vw;
    height: 2vh;
    background: var(--preto);
}

.light2 {
    position: absolute;
    border-radius: 100vw;
    top: 0.6vw;
    left: 0.5vw;
    width: 0.5vw;
    height: 0.5vw;
    background: var(--branco);
    z-index: -1;
}

.light3 {
    position: absolute;
    left: 0;
    top: -1vw;
    width: 0;
    height: 0;
    border-left: 1vw solid transparent;
    /* lado esquerdo transparente */
    border-right: 1vw solid transparent;
    /* lado direito transparente */
    border-bottom: 4vw solid var(--branco);
    filter: blur(3vw);
    transition: 0.5s ease;
    /* base do triângulo (cor da árvore) */
}

/*Telhado*/
.roof {
    position: absolute;
    z-index: 1;
    left: 5vw;
    top: 5.9vh;
    width: 30vw;
    height: 22vh;
}

.roof1 {
    position: absolute;
    top: 3.1vw;
    left: -0.5vw;
    width: 11vw;
    height: 15vh;
    border-left: 6vw solid transparent;
    /* lado esquerdo transparente */
    border-right: 6vw solid transparent;
    /* lado direito transparente */
    border-bottom: 6vw solid var(--preto19);
    /* base do triângulo (cor da árvore) */
}

.shadowRoof1 {
    position: absolute;
    left: -2.6vw;
    width: 0.5vw;
    height: 15vh;
    border-bottom: 6vw solid var(--preto15);
    transform: skew(-45deg);
}

.shadowRoof2 {
    position: absolute;
    left: 2.8vw;
    top: 1vw;
    width: 0.5vw;
    height: 12vh;
    border-top: 6vw solid var(--preto111);
    transform: skew(45deg);
}


.roof2 {
    position: absolute;
    top: 4vw;
    left: 10.8vh;
    width: 19.5vw;
    height: 13vh;
    background: var(--preto16);
    z-index: -10;
    transform: skew(-10deg);
}

.roof3 {
    position: absolute;
    top: 3.3vw;
    left: 41.5vh;
    z-index: -11;
    width: 10.8vw;
    height: 14.7vh;
    border-left: 6vw solid transparent;
    /* lado esquerdo transparente */
    border-right: 6vw solid transparent;
    /* lado direito transparente */
    border-bottom: 6vw solid var(--preto16);
    /* base do triângulo (cor da árvore) */
}

.window {
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    top: 2.5vw;
    width: 20vw;
    height: 10vh;
}

.window1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4.4vw;
    gap: 0.2vw;
    flex-wrap: wrap;
    padding: 0.1vw 0vw;
    width: 5vw;
}

.w {
    margin: 0vw 0.1vw;
    width: 2vw;
    height: 3.6vh;
    background: var(--amarelo);
    border-radius: 0.1vw;
    transition: 1s ease;
}

.l1 {
    position: absolute;
    width: 3vw;
    height: 5vh;
    background: var(--amarelo);
    filter: blur(1.5vw);
    border-radius: 0.1vw;
    transition: 1s ease;
}