/* Basic Styling */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #87ceeb; /* Sky blue */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

/* Forest Container */
.forest {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to top, #4b8b3b, #a3d987); /* Ground and canopy */
    overflow: hidden;
}

/* Tree Animation */
.tree {
    position: absolute;
    bottom: 0;
    width: 80px;
    animation: sway 5s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Bird Animation */
.bird {
    position: absolute;
    width: 30px;
    animation: fly 8s linear infinite;
}

@keyframes fly {
    0% { transform: translateX(-10%) translateY(0); }
    25% { transform: translateX(30%) translateY(-30px); }
    50% { transform: translateX(60%) translateY(0); }
    75% { transform: translateX(90%) translateY(30px); }
    100% { transform: translateX(110%) translateY(0); }
}

/* Tiger Styling */
.tiger {
    position: absolute;
    bottom: 20px;
    left: 10%;
    width: 80px;
    height: 40px;
    background-color: #ff9505;
    border-radius: 10px;
    animation: walk 5s infinite;
}
.tiger:before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 5px;
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
}

/* Tiger Walking Animation */
@keyframes walk {
    0% { transform: translateX(0); }
    50% { transform: translateX(50vw); }
    100% { transform: translateX(100vw); }
}