@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.scroll-container {
    width: 100vw;
    height: 100vh; /* Set a height for the scroll container */
    overflow-y: auto; /* Enable vertical scrolling */
}

.scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.scroll-container {
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

/*.container {
    padding: 10px;
}*/

.sidebarTrees {
    flex-grow: 1;
    position: relative; /* Allows absolute positioning of tree images */
    min-width: 50px; /* Minimum width of the side areas to avoid overlap */
}

.tree {
    /*position: absolute;*/
    bottom: 0;
    height: 75rem; /* Fixed height of the trees */
    opacity: 0;
}

.left {
    right: 0; /* Tree in the left column aligned to the right edge */
}

.right{
    left: 0; /* Tree in the right column aligned to the left edge */
}

#treeHalfLeft {
    position: absolute;
    left: 0;
    height: 80rem;
    bottom: 0;
}

#treeHalfRight {
    position: absolute;
    right: 0;
    height: 80rem;
    bottom: 0;
}

#treeCenter{
    left:50%;
    transform: translateX(-50%);
}

@media (max-width: 1100px) {
    .content {
        width: 200px;
    }
}

.tree-image {
    opacity: 0;
}

    .tree-image.loaded {
        animation: fadeIn 3s ease-in forwards;
    }