/* Apply global font */
body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: #DAA520;
    background: #1F3D0C;/* Set text color to black */
    
}

html  * {
   
    color: white;
    
}
html{
    visibility:hidden;
}

.backgroundgreen {
    background: #1F3D0C
}
/* Navigation styling */
header {
    margin: auto;
    overflow-y:hidden;
}
nav ul {
    list-style: none;
    text-align: center;
    //padding: 1rem 0;
}

    nav ul li {
        display: inline;
        margin-right: 20px;
    }

nav a {
    text-decoration: none;
    font-weight: bold;
}
.nav-mobile{
    font-size:10px;

}
    .nav-mobile ul li {
        margin-right: 5px;
    }
/* Hero section styling */
.hero {
    text-align: center;
    //padding: px 10px;
    /* Assuming a light image, the background color is cream */
    font-style: italic;
    font-size: 20px
}

    .hero h1 {
        font-size: 5rem;
        font-family: 'Dancing Script', cursive; /* Fancy font for the heading */
        /* Keeping the heading color green for contrast */
    }

    .hero p {
        /* Set paragraph text color to black */
        margin-bottom: 20px;
    }

.hero-mobile {
    text-align: center;
    //padding: px 10px;
    /* Assuming a light image, the background color is cream */
    font-style: italic;
    font-size: 10px
}

    .hero-mobile h1 {
        font-size: 2rem;
        font-family: 'Dancing Script', cursive; /* Fancy font for the heading */
        /* Keeping the heading color green for contrast */
    }

    .hero-mobile p {
        /* Set paragraph text color to black */
        margin-bottom: 10px;
    }

.hero-image {
    max-width: 30%;
    height: auto;
    // border-radius: 50px;
    //padding-left:40%;
    padding-top: 10px;
}
.hero-image-mobile{
    max-width: 50%;
    height: auto;
    // border-radius: 50px;
    //padding-left:40%;
    padding-top: 10px;
}

.vines {
    width: auto;
    height: 70px;
    top: 30px;
    position: relative;
    filter: invert(74%) sepia(87%) saturate(864%) hue-rotate(359deg) brightness(103%) contrast(104%);
}
.vines-mobile {
    width: auto;
    height: 20px;
    top:10px;
    position: relative;
    filter: invert(74%) sepia(87%) saturate(864%) hue-rotate(359deg) brightness(103%) contrast(104%);
}
.vines2 {
    transform: scaleX(-1);
}
.story {
    margin:auto;
    width: 30%;
    font-size: 25px;
    text-align:center;
    overflow-y:auto;
}
.story-mobile {
    margin: auto;
    width: 100%;
    font-size: 20px;
    text-align: center;
    overflow-y: auto;
}
#storyPic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    height: 40%;
    
}

/* Add additional styles for other sections */

/* Footer styling */