body{
    background-color: #f8a708;
    
}

footer{
    background-color: black;
}

section{
    margin: 0;
    padding: 0;
}

.container{    
    max-width: 1000px !important;
}

.orange-back{
    position: absolute;
    /* left: 2rem;
    width: calc(100% - 4rem); */
    top: 720px;
    z-index: 0;

    
}

.main-visual{
    /* background-image: url(./images/halloween2026/pumpkin.svg);
    background-size: cover;
    background-position: center center; */
    position: relative;
    width: 100%;
}

.header-logo{
    position: absolute;
    width: 13%;
    max-width: 100px;
    margin:auto;
    left: 2.5%;
    top: 3%;
}

.main-visual-inner{
    position: relative;
    z-index: 300;
}
.pumpkin{

    width: 100%;
    height: auto;
}

.header-title{
    position: absolute;
    width: 65%;
    top: 10%;
    left: 50%;
    margin-left: -32.5%;
}

.mouth{
    position: absolute;
    width: 90%;
    /* max-width: 1000px; */
    top: 21%;
    left: 50%;
    margin-left: -45%;
}

.header-catch{
    bottom: 9.5%;
    width: 65%;
    left: 50%;
    margin-left: -35%;
    position: absolute;
}


.skelton{
    bottom: 25%;
    left: 3%;
    position: absolute;
    width: 12%;
    animation: anim1 1s infinite;
}

.bird{
    bottom: 5%;
    right: 3%;
    position: absolute;
    width: 15%;
    z-index:9999;
    animation: anim2 1s infinite;
}

.recipe-outer-box{
    position: relative;
    padding-top: 100px;
}

.purple-img{
    left: 0%;
    position: absolute;
    width: 100%;
    bottom: -12%;
    z-index: 300;
}

.spider{
    position: absolute;
    left: -2%;
    width: 22%;
    top: -0.5%;
    z-index: 290;
}

.cat{
    position: absolute;
    right: -5%;
    width: 24%;
    top: 0%;
}

.paper-box{
    background-image: url(./images/halloween2026/back_paper.png);
    background-size: 100% 100%;
    width: 80%;
    margin:auto;
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 100px;

}

.title1,.title2{
    width: 80%;
    margin:0px auto;
    padding-top: 50px;
}

.photo1,.photo2{
    width: 70%;
    margin:0px auto;

}

.video-box{
    /* background-image: url(./images/halloween2026/paper-back2.png); */
    background-repeat: repeat-y;
    /* background-repeat: space repeat-y; */
    background-size: 100% 200px;
    /* background-size: calc(100% + 5px) auto; */
        /* background-size: contain; */
    background-position: top center;
}



.btn{
    width: 80%;
    max-width: 300px;
    margin:auto;
}

.mummy{
    position: absolute;
    width: 25%;
    right: -4%;
    top: -10%;
}

.title3-box{
    position: relative;
    width: 100%;
}

.title3{
    width: 80%;
    margin:auto;
    max-width: 800px;
}

.title3-2{
    position: absolute;
    width: 30%;
    right: 5%;
    top: -86%;
}

.bird2{
    position: absolute;
    width: 15%;
    left: 8%;
    top: -12%;
    animation: anim2 1s infinite;

}

.gohst{
    position: absolute;
    width: 25%;
    right: -2%;
    top:45%;
    animation: anim1 1s infinite;

}

.recipe1{
    width: 90%;
    margin-bottom: 60px;
    margin-top: 40px;
}

.recipe2{
    width: 90%;
    margin-left: auto;
    margin-bottom: 60px;
}   


.castle{
    margin-bottom: -5px;
    position: relative;
}

footer{
    padding: 40px;
    text-align: center;
    margin: 0;
}
.footer-logo{
    height: 80px;
    margin:auto;
}

.recipetitle{
    width: 90%;
    margin:20px auto;
    max-width: 800px;
}

.purple{
    background-image: url(./images/halloween2026/pattern.png);
    background-size: 309px 294.5px;
    margin:0;
    background-color: #663399;
}

.link-recipe-box.box1{
    /* width: 100%; */
    /* max-width: 920px; */
}

.link-recipe-box.box2{
    width: 680px;
}

.link-recipe-box>div{
    width: 200px;
}


@keyframes anim1 {
    0% {
        transform:rotateZ(-10deg);
    }
    50% {
        transform:rotateZ(10deg);
    }
    100% {
        transform:rotateZ(-10deg);
    }
}

@keyframes anim2 {
    0% {
        transform:translateY(10px)
    }
    50% {
        transform:translateY(-10px)
    }
    100% {
        transform:translateY(10px)
    }
}

@media screen and (max-width: 1024px) {

    /* .link-recipe-box.box1{
        width: 460px;
    }
    */

    .link-recipe-box.box2{
        /* width: 100%; */
        width: 72%;
    } 

    .link-recipe-box>div{
        width: 100%;
    }
}

@media screen and (max-width: 924px) {

    .orange-back{
    position: absolute;
    top: 0;
    left: 0rem;
    top: 12%;
    }
}


@media screen and (max-width: 768px) {

    .orange-back{
    position: absolute;
    left: 0rem;
    width: 100%;
    top: 5%;
    }

    .recipe-outer-box{
        padding-top: 10%;        
    }

    .link-recipe-box.box2{
        width: 100%;
    }     
}



@media screen and (max-width: 480px) {

    .paper-box{
        width: 90%;
    }
    
    .photo1,.photo2{
        width: 80%;
    }

    .mummy{
        width: 22%;
        top: -15%;
    }

    .bird2{
        top: -5%;
        width: 20%;
    }
    
    .title1, .title2{
        width: 95%;
        padding-top: 25px;
    }

    .btn{
        width: 80%;
        max-width: 200px;
    }
}