@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Ms+Madi&family=Schoolbell&display=swap');

/* -----------Headings font---------- */
.amatic-sc-regular {
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    /* Good size for navbar links */
}

.amatic-sc-bold {
    font-family: "Amatic SC", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    /* Good for headings */
}

/* --------logo font------------ */
.ms-madi-regular {
    font-family: "Ms Madi", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    /* Makes the logo stand out */
}


/* -------Text and body--------- */
.schoolbell-regular {
    font-family: "Schoolbell", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    /* Standard body text */
}

/* Make navbar transparent */
.navbar {
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}

/* Make all navbar links white */
.navbar .nav-link,
.navbar .navbar-brand {
    color: white !important;
}

/* Make navbar link hover states slightly brighter */
.navbar .nav-link:hover {
    color: #e6e6e6 !important;
}

/* Make navbar toggler icon white */
.navbar-toggler {
    border-color: white;
}

.navbar-toggler-icon {
    filter: invert(1) brightness(200%);
}


.hero-section {
    min-height: 100dvh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./assets/jpegs/tent-548022_1920.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-section .hero {
    text-align: left;
    height: 80%;
}

.hero-heading {
    font-size: 100px;
}

.hero-text {
    font-size: 2rem;
}

form div {
    width: 75%;
}

/* ---------camp-out------- */
.camp-out img {
    width: 80%;
}

.camp-out-text h2 {
    font-size: 4rem;
}

/* ----------spooky section------- */
.spooky>h1 {
    font-size: 4rem;
}

.spooky-image {
    width: 80%;
    aspect-ratio: 1/0.5;
    background: url(./assets/jpegs/girl_child.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.spooky-image::after {
    content: 'Anybody There?';
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: "Schoolbell", cursive;
    color: white;
    z-index: 2;
    opacity: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    transition: all 0.4s ease-in;
    font-size: 2rem;
}

.spooky-image:hover::after {
    opacity: 1;
}

.spooky-body>a {
    font-family: "Schoolbell", cursive;
}


/* 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* =================BLOG PAGE=========== */
.blog-hero-section {
    min-height: 30dvh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./assets/jpegs/landscape-6692712_1920.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.blog-hero h1 {
    font-size: 5rem;
}

.blog-posts img {
    width: 80%;
}

/* 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.gallery-hero-section {
    min-height: 30dvh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./assets/jpegs/gallery/gallery\ header.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gallery-hero h1 {
    font-size: 5rem;
}

.gallery img {
    width: 80%;
}


/* 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ===========MOBILE STYLES========== */

@media (max-width: 768px) {
    .hero-heading {
        font-size: 3rem;
    }

    .hero-text {
        font-size: 1.3rem;
    }

    form div {
        width: 90%;
    }

    .camp-out-text h2 {
        font-size: 2rem;
    }

    .spooky-image::after {
        opacity: 1;
    }

    /* --------blog page ------- */
    .blog-hero h1 {
        font-size: 2rem;
    }

    .blog-posts a {
        width: 100%;
    }

    /* -----------gallery page-------- */
    .gallery-hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .spooky-image::after {
        opacity: 1;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------animations---------- */
@keyframes grow-in {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shrink-in {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
}

.hero-heading, .hero-text, .hero form, .blog-hero-heading {
    opacity: 0;
    animation: appear 2s ease-out forwards;
}

.hero-heading, .blog-hero-heading{animation-delay: 0.8s;}
.hero-text {animation-delay: 1.8s;}
.hero form {animation-delay: 2.5s;}

.camp-out>.row>div, .blog-posts img, .gallery img {
    animation: grow-in 0.6s ease-in forwards;
    animation-timeline: view();
    animation-range: entry 0 cover 25%;
}

.spooky-image {
    animation: shrink-in 0.6s ease-in forwards;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}