.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid white;
    padding: 3px;
    object-fit: contain;
}

/* colors */
:root {
    --first-color: #e18951;    
    --second-color: #6b5b95;  
    --accent-color: #ba2139;     
    --light-color: #f4f4f4;      
    --dark-color: #333;          
    --table-border: #ddd;        
    --hover-color: #ffe0cc;      
}


.single-column {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.habitat-behavior {
    background-color: white;
    border: 1px solid var(--table-border);
    border-radius: 5px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}


.habitat-behavior p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}


.table-container {
    margin: 2rem 0;
    overflow-x: auto; 
}


table {
    width: 100%;
    border-collapse: collapse; 
    border-spacing: 0; 
    border: 2px solid var(--second-color); 
    margin-bottom: 1.5rem;
}

caption {
    caption-side: top; 
    padding: 0.75rem;
    font-weight: bold;
    font-family: 'Montserrat', Arial, sans-serif;
    color: white;
    background-color: var(--second-color);
    border-radius: 5px 5px 0 0;
    font-size: 1.2rem; 
}

th {
    background-color: var(--first-color);
    color: white;
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--table-border);
}

td {
    padding: 0.75rem;
    border: 1px solid var(--table-border);
}


td:hover {
    background-color: var(--hover-color);
}


tr:nth-child(even) td {
    background-color: var(--light-color);
}

tr:nth-child(even) td:hover {
    background-color: var(--hover-color);
}

thead {
    background-color: var(--second-color);
}

tbody {
    font-family: 'Poppins', Arial, sans-serif;
}

tfoot {
    background-color: var(--light-color);
    font-style: italic;
    font-size: 1rem; 
    text-align: center;
}


.category-col, .behavior-col {
    width: 25%;
}

.description-col, .details-col {
    width: 40%;
}

.notes-col, .significance-col {
    width: 35%;
}




@media (max-width: 767px) {
    table {
        font-size: medium; 
    }
    
    th, td {
        padding: 0.5rem;
    }
    
    caption {
        font-size: 1.1rem; 
    }
    
    
    .habitat-behavior p {
        font-size: 1.05rem;
    }
}


@media (min-width: 768px) {
    .table-container {
        padding: 0.5rem;
    }
    
    table {
        font-size: 1rem; 
    }
    
    caption {
        font-size: 1.2rem;
    }
    
    
    .habitat-behavior p {
        font-size: 1.1rem;
    }
}


@media (min-width: 992px) {
    .table-container {
        padding: 1rem;
    }
    
    table {
        font-size: 1.2rem; 
    }
    
    caption {
        font-size: 1.3rem;
    }
    
    
    th, td {
        padding: 1rem;
    }
    
    
    .habitat-behavior p {
        font-size: 1.2rem;
    }
}


@media (min-width: 1200px) {
    .logo {
        width: 100px;
        height: 100px;
    }
    
    table {
        font-size: 1.25rem; 
    }
    
    caption {
        font-size: 1.4rem;
    }
    
    
    .habitat-behavior p {
        font-size: 1.3rem;
    }
}