/* Styles for the header */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Styles for the main content */
main {
    padding: 20px;
}

/* Styles for the academic tree container */
#tree-container {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}

footer {
    text-align: center;
    background-color: #f0f0f0;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* CSS for side-by-side layout */
.content {
    display: flex; /* Use flexbox to create a flexible layout */
    margin-bottom: 80px; /* Adjust margin-bottom to create space for the footer */
}

.donation, .contact {
    flex: 1; /* Each section takes up equal space */
    padding: 20px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add borders for visual separation */
    margin-right: 20px; /* Add margin between sections */
}

/* Responsive styles */
@media (max-width: 768px) {
    .content {
        flex-direction: column; /* Switch to a vertical layout on smaller screens */
    }

    .donation, .contact {
        margin-right: 0; /* Remove margin between sections */
        margin-bottom: 20px; /* Add margin at the bottom for spacing */
    }
}