*{
    margin: 0;
    padding: 0;
}

body{
    background-image: linear-gradient(black, rgb(110, 0, 0), black, black);
}

header{
    background-color: black;
    color: orange;
    text-align: center;
    font-size: larger;
    align-content: center;
    height: 40px;
    font-stretch: extra-condensed;
    box-shadow: 0px 0px 50px rgb(147, 122, 0);
    text-shadow: 0px 0px 2px red,
                 0px 0px 4px red,
                 0px 0px 8px red,
                 0px 0px 10px red;
}

@keyframes susto {
    0%{
        visibility: visible;
        height: 500px;
    }    
    50%{
        height: 700px;
    }
    99%{
        height: 500px;
    }
    100%{
        height: 500px;
        visibility: hidden;
    }
}

@keyframes aproximando {
    0%{
        height: 300px;
    }
    99%{
        height: 600px;
    }
    100%{
        visibility: hidden;
    }
}

#monikaAprox{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    visibility: hidden;
}


#monikaNormal{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    visibility: hidden;
}

#monikaNormal::after{
    content: "Feliz Halloween!\n(Pressione ENTER para continuar o dialogo";
    color: aqua;
    position: absolute;
}

#Mjumpscare{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    visibility: hidden;
}

#fantasminha{
    height: 200px;
    left: 50%;
    transform: translate(-54%, 0%);
    margin-top: 25px;
    position: relative;
    filter:drop-shadow(0px 0px 8px rgb(255, 115, 0));
}

#maoBrava{
    position: absolute;
    height: 700px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    visibility:hidden;
}

#batma{
    position: absolute;
    height: 900px;
    width: 700px;
    left: 50%;
    transform: translateX(-100%);
    top: 400px;
    -webkit-box-reflect: right;
}

#ready{
    margin-top: 30px;
    font-family: monospace;
    text-shadow: 2px 2px 5px black;
}

.TopPage{
    text-align: center;
    color: aliceblue;
    display: grid;
    position: relative;
    filter: drop-shadow(0px 0px 10px rgba(45, 194, 0, 0.556));
    background-image: linear-gradient( rgba(76, 0, 104, 0.628), rgba(0, 0, 0, 0.604));
    transform: translate(-60%, 0 );
    left: 50%;
    margin: 40px;
    height: 300px;  
    width: 500px;
    border-radius: 30px;
    text-wrap:pretty;
}

.btnReady{
    color: aliceblue;
    background-color: rgb(0, 0, 0);
    height: 60px;
    width: 120px;
    margin: 30px;
    border-radius: 10px;
    font-size: 20px;
    font-family: cursive;
}

#btnSim:hover{
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    font-family: cursive;
    font-size: 20px;
    transition: 0.3s;
    text-shadow:0px 0px 2px black,
                0px 0px 6px black,
                0px 0px 10px black,
                0px 0px 14px black;
}

#Titulo1{
    text-align: center;
    font-family: cursive;
    color:aliceblue;
    text-shadow: 2px 2px 6px rgb(255, 0, 0);
    margin-top: 30px;
}

#maozinha{
    height: 100px;
    box-shadow: none;
    position: absolute;
    filter: drop-shadow(0px 0px 10px black);
    top: -92px;
    left: 30px;
}

#carimbo{
    mix-blend-mode:multiply;
    position: absolute;
    height: 80px;
    filter: saturate(0%);
    left: 60%;
    top: 80%;
}

.Textos1{
    display: flex;
    text-align: center;
    position: relative;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: linear-gradient(rgb(133, 110, 62), rgb(82, 68, 40));
    width: 600px;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-top: 100px;
    margin-bottom: 70px;
    padding: 10px;
    border-radius: 5px;
}

.Textos1::after{
    content: "Ass: Wandinha";
    position: absolute;
    left: 75%;
    top: 90%;
    font-family: cursive;
}

#Esque, #dire{
    margin: 20px;
    width: 300px;
}

#txtEsq{
    width: 400px;
    position: relative;
}
#txtDir{
    width: 200px;
}

#TituloCosplays{
    color: aliceblue;
    text-align: center;
    font-family: cursive;
}

#txtCosplays{
    background-color: rgba(0, 0, 0, 0.554);
    color: aliceblue;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    margin: 30px;
    width: 900px;
    height: auto;
    font-family: cursive;
    position: relative;
    left: 47%;
    transform: translateX(-50%);
}

.imgCosplays{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height:400px;
    width: 1200px;
    justify-content: center;
    display:flex;
}

.cosplaysImg{
    height: 300px;
    top: 0%;
    position: relative;
    margin: 10px;
}

#cosplay2, #cosplay4{
    border-top-right-radius: 200px;
    border-bottom-left-radius: 200px;
    filter: grayscale(100);
}

#cosplayWandinha, #cosplay3{
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    filter: grayscale(100);
}

#cosplayWandinha:hover{
    filter: grayscale(0);
    transition: 0.3s;
}

#cosplay2:hover{
    filter: grayscale(0);
    transition: 0.3s;
}

#cosplay3:hover{
    filter: grayscale(0);
    transition: 0.3s;
}

#cosplay4:hover{
    filter: grayscale(0);
    transition: 0.3s;
}

#decTitulo{
    color: aliceblue;
    text-align: center;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-stretch: extra-condensed;
    text-shadow: 2px 2px 7px rgb(136, 0, 255);
}

#imgsDecoracao{
    height: 550px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(rgba(162, 0, 255, 0.3), rgba(69, 28, 0, 0.423));
    margin-top: 40px;
}

.ftsHalloweenHouse{
    position: relative;
    height: 400px;
    top: 50%;
    margin-right: 10px;
    transform: translateY(-50%);
    border-radius: 20px;
}

#house1{
    filter: grayscale(100);
}

#house1:hover{
    filter: grayscale(0);
    height: 450px;
    transition: 0.2s;
}

#house2{
    filter: grayscale(100);
}

#house2:hover{
    filter: grayscale(0);
    height: 450px;
    transition: 0.2s;
}


#house3{
    filter: grayscale(100);
}

#house3:hover{
    filter: grayscale(0);
    height: 450px;
    transition: 0.2s;
}


#house4{
    filter: grayscale(100);
}

#house4:hover{
    filter: grayscale(0);
    height: 450px;
    transition: 0.2s;
}


#txtDecoracao{
    color: aliceblue;
    text-align: center;
    width: 800px;
    background-color: rgba(0, 0, 0, 0.463);
    border-radius: 20px;
    position: relative;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
    margin-top: 40px;
    text-shadow: 0px 0px 7px rgb(162, 0, 255);
}

#avisoDoPresente{
    height: 400px;
    width: 600px;
    background-color: orange;
    border: 10px solid purple;
    text-align: center;
    position:absolute;
    left: 50%;
    transform: translate(-50%, -150%);
    visibility: hidden;
}

#txtbombom{
    color: black;
    position: relative;
    font-family: cursive;
    top: 25%;
}

#fecharAvisoPresente{
    background-color: rgb(255, 0, 0);
    border: 5px solid rgb(0, 0, 0);
    color: black;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    float: right;
}

#bombom{
    height: 100px;
    position: relative;
    filter: drop-shadow(2px 2px 4px black);
    top: 45%;
}

#fecharAvisoPresente:hover{
    transition: 0.2s ease-in-out;
    background-color: rgb(0, 0, 0);
    border: 5px solid rgb(255, 0, 0);
    color: rgb(255, 0, 0);
}

#luz{
    width: 100%;
    height: 300px;
    background-image: linear-gradient(rgb(54, 51, 24), yellow);
    position: relative;

}
.lampada{
    position: absolute;
    left: 50%;
    height: 200px;
}

#lastTitle, #titlePres{
    text-align: center;
    margin-top: 50px;
    font-family: cursive;
}

#subtitFin{
    position: absolute;
    transform: translate(-50%,-500px);
    left: 50%;
    font-family: cursive;
    color: black;
    background-color: rgba(255, 255, 255, 0.245);
    visibility: hidden;
}

#titlePres::after{
    content: "";
    background-color: rgb(0, 0, 0);
    height: 150px;
    width: 3px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,40px);
}

#luz{
    background-image: conic-gradient(transparent,rgb(238, 255, 0),transparent );
    height: 400px;
    width: 100%;
    visibility: hidden;
}
#luz2{
    background-image: conic-gradient(rgb(238, 255, 0),transparent,rgb(238, 255, 0));
    height: 400px;
    width: 100%;
    position: relative;
    filter: blur(7px);
    visibility: hidden;
}

.lampada{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -700px);
    cursor: pointer;
}

#presente{
    height: 200px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -350px) ;
    cursor: pointer;
    visibility: hidden;
}

@keyframes abrirPresente {
    0%{
        height: 200px;
        transform: translate(-50%, -350px) ;
    }
    100%{
        height: 300px;
        transform: translate(-50%, -450px) ;
    }
}

.fim{
    color: aliceblue;
}