.header{
    margin-top: 70px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}
.header img{
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.header h1, .header h3{
    position: absolute;
}
.header h1{
    top: -50px;
    font-family: 'Pacifico', cursive;
    font-size: 4rem;
    color: white;
    text-shadow: 
    0px 0px 3px rgba(0 ,0 ,0 ,0.5),
    0px 0px 5px rgba(0 ,0 ,0 ,0.4),
    0px 0px 10px rgba(0 ,0 ,0 ,0.6);
}    
.header h3{
    top: 80px;
    font-family: 'Satisfy', cursive;
    font-size: 2.6rem;
    text-shadow: 
    0px 0px 3px rgba(0 ,0 ,0 ,0.4),
    0px 0px 6px rgba(0 ,0 ,0 ,0.2);
}    


/* --- Scroll Animation --- */
/* --- Scroll Animation --- */

.header{
    transform: translateX(-30px);
    transition: all 0.5s;
    opacity: 0;
}
.header.active{
    transform: translateX(0px);
    opacity: 1;
}
.header h1, 
.header h3{
    position: absolute;
    transform: translateY(-20px);
    transition: all 0.7s;
    opacity: 0;
}
.header.active h1, 
.header.active h3{
    position: absolute;
    transform: translateY(0px);
    opacity: 1;
}
.header.active h3{
    transition-delay: 0.3s;
    position: absolute;
    transform: translateY(0px);
}