/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(#30351e, #505539 );
    background-size: cover;
    background-position: center;
    margin: 0;
    background-attachment: fixed;
    font-family:Candara;
    color: #F8F3DE;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* Align content to the top */
    min-height: 100vh;
    flex-direction: column;
}

/* Header and Navigation Bar */
header {
    width: 100%;
}

nav {
    background: #1c2010;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

nav a {
    text-decoration: none;
    color: #BEC4A0;
    font-weight: bold;
}

#farm{
    display: flex;
    justify-content: right;
    align-items: right;
}

#title {
    font-family:Baskerville;
    margin: 0;
    color: #BEC4A0;
    font-size: 2.2rem;
}

h4 {
    font-family:Baskerville;
    color: #BEC4A0;
    font-size: 1.1rem;
}

nav a {
    text-decoration: none;
    color: #BEC4A0;
    font-size:1.2em;
    font-weight:bold;
}

/* Button Styles */
button {
    font-family: Candara;
    background-color: #30351e;
    border-radius: 10px;
    height: 30px;
    width: 90px;
    border: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    margin: 5px;
    transition: 1s;
    font-size: 1rem;
}

button:hover {
    background-color: #685C46;
    transition: 1s;
}

/* Centering buttons */


/* Main Content Area */
main {
    width: 100%;
    max-width: 700px; /* Further reduce the width of the main content */
    background-color: #505539;
    padding: 10px 20px; /* Reduce padding for a smaller feel */
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 60px; /* Space below the nav */
    margin-left: auto;
    margin-right: auto; /* Center the main content */
}

/* Home Section */
#home {
    font-family: Candara;
    display: flex;
    justify-content: center;
    color: #BEC4A0;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

/* Welcome Section */
#welcome {
   
    margin-bottom: 20px;
    padding: 10px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

#welcome h3 {
    font-size: 19px;
    color: #121308;
    margin-bottom: 15px;
    font-family: Candara;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
}

#welcome p {
    font-size: 1rem;
    color: #121308;
    line-height: 1.5;
    margin-top: 15px;  /* Add margin to the paragraph to create space */
}

/* Center the image inside its container */
#welcome img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;  /* Increase margin-top for more space between image and paragraph */
    margin-bottom: 20px;  /* Optional: Add margin-bottom to create more space if necessary */
}

#welcome a{
    text-decoration: none;
    color:#1c2010;
}

#welcome a:hover{
    color:#685C46;
}

img {
    width: 100%;
    max-width: 600px; /* Reduce image width further */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.02);
}


/* Image inside #info with ID #tree */
#tree {
    width: 100%;
    max-width: 500px;  /* Adjust to your desired size */
    height: auto;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);  /* Keep shadow, but no border */
    margin-top: 15px;  /* Space above */
    margin-bottom: 20px;  /* Space below */
    padding: 0;  /* Ensure no internal padding */
    border: none;  /* Remove any unwanted border */
    transition: transform 0.3s ease;
}

/* Hover effect */
#tree:hover {
    transform: scale(1.05);
}

/* #info styles (parent container) */
#info {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:#121308;
}


#additional {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column; /* Keep text in column */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #121308;
}

#additional h2, #additional h3 {
    margin: 10px 0; /* Add margin to space out the text */
}

.video-container {
    display: flex; /* Use flexbox for videos */
    justify-content: space-between; /* Ensure there's space between the videos */
    gap: 10px; /* Optional: space between the videos */
    width: 100%; /* Allow container to take up full width */
    flex-wrap: nowrap; /* Prevent wrapping of videos */
}

#additional iframe {
    flex: 1; /* Allow iframes to take up available space */
    height: 315px; /* Set a consistent height */
    margin: 0 5px; /* Add small margin between the videos */
    border-radius: 10px; /* Optional: Add border-radius for styling */
}


/* Footer Styles */
/* Footer Styles */
footer {
    background-color: #1c2010;  /* Match nav background color */
    color: #BEC4A0;             /* Match nav text color */
    padding: 30px 20px;         /* Vertical padding, with some horizontal padding */
    text-align: center;
    width: 100%;                /* Ensures it takes up the full width of the viewport */
    box-sizing: border-box;    /* Include padding and borders in the total width */
    margin: 0;                  /* Remove any margin to touch the edges */
    position: relative;         /* Makes it behave normally in document flow */
}

/* Footer heading and icons */
footer h3 {
    font-family: Candara;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

footer .ico {
    margin: 0 12px;
    display: inline-block;
}

footer .ico img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s ease;
}

footer .ico img:hover {
    transform: scale(1.1);
}


@media screen and (max-width: 578px) {
    nav {
        padding: 10px 10px; 
        display: flex;  
        justify-content: center;  
        align-items: center;  
        flex-direction: column;  
        width: 100%;  
    }

    #title {
        font-size: 1.9rem; 
        text-align: center;  
        margin-bottom: 10px;  
    }

    h4 {
        display: block;
        text-align: center;  
    }

    nav > section {
        width: 100%;  
        display: flex;
        flex-direction: column;  
        align-items: center;  
        gap: 10px;  
    }

    button {
        height: 35px; 
        width: 70%;   
        font-size: 1rem;  
        margin: 5px 0;  
        display: block;
        text-align: center;
    }
}