html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    background-color: black;
}

.header{
    width: 100%;
    height: 300px;
    background-image: url("./images/halloween/halloween.png"), url("./images/halloween/hbackground3.png");
    background-repeat: no-repeat;
    background-position: 50% 0%, 50% 100%;
    background-size: auto auto, 100% auto;
}

.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5%;
    border: dotted 2pt #FF4D00;
    border-radius: 25pt;
}

.introtext{
    color: #FF4D00;
    font-size: 64pt;
    margin: 5%;
}

.orangebubble{
    border: solid 5pt goldenrod;
    border-radius: 25pt;
    padding: 5pt;
    background-color: #FF4D00;
    
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    font-size: 16pt;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.obtext{
    font-size: 16pt;
    color: black;
    text-align: center;
    background-color: #FE773C;
    border-radius: 25pt;
    padding: 15pt;
}

.spirit{
    background-image: url("./images/halloween/spirit.png");
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    margin: 3%;
}   


.animatronics{
    display: flex;
    justify-content: space-around;
    margin-bottom: 5%;
    margin-top: 3%;
}

.acard{
    height: 500px;
    width: 300px;
    background-color: #862FE0;
    border: solid 3pt black;
}

.acard_image{
    width: 300px;
    height: 400px;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    border: solid 3 pt black;
}

.acard_description{
    text-align: center;
    color: white;
}

#terror{
    background-image: url("./images/halloween/animatronics/nightterror.png");
    
}

#scarecrow{
    background-image: url("./images/halloween/animatronics/sittingscarecrow.png");

}

#spider{
    background-image: url("./images/halloween/animatronics/jumpingspider.png");
    border: solid 1pt black;
}


#transition{
    cursor: pointer;
    color: #DEDFDF;
}