/* project related */

table {
    background: var(--secondary-color);
    padding: 5px;
    min-width: 100%;
    box-shadow: var(--protruding-element-shadow-box);
    border-radius: 0.8rem;
    transition: height 0.5s;
}



table :is(th, td){
    text-align: left;
}

table :is(h1, h2, h3){
    color: var(--main-theme-color);
    text-transform: uppercase;
    min-width: max-content!important;
}

table caption{
    background: var(--secondary-color);
    text-align: left;
}

thead {
    background: var(--secondary-disabled-color);
    border-color: var(--secondary-disabled-color);
    position: sticky;
    top: 0px;
}

tbody tr:nth-child(even) {
    background: var(--secondary-disabled-color);
}


#home :is(h1,h2,h3){
	color:var(--main-theme-color);
	text-transform:uppercase;
}
th {
    text-transform:uppercase;
    font-weight: bold;
}

th label {
    font-weight: bold;
}

.table-background > img {
    max-height:250px
}

.filter{
    align-content: space-between;
    align-items: stretch;
    display: flex; 
    justify-items: stretch;
    flex-wrap: wrap;
   }
   
.filter label{
       font-size: 1rem;
       text-transform: uppercase;
   }
   
.filter > * {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: row;
    min-width: fit-content;
    width: 30%;
    align-content: center;
    padding: 5px;
    flex-wrap: wrap;
    background: var(--secondary-color-2);
    box-shadow: var(--protruding-element-shadow-box);
    margin: 1px;
    border-radius: 0.3rem;
    flex-grow: 1;
   }


@keyframes pulse-text {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2); /* Make text 20% bigger */
        }
        100% {
            transform: scale(1);
        }
    }

@keyframes winding {
        0% {
            max-width: 0%;
        }
        50% {
            max-width: 50%;
        }
        100% {
            max-width: 100%;
        }
    }

.winding {
            animation: winding 3s infinite; /* Apply the animation */
            overflow: hidden;
            display:flex;
}

.generating {
            animation: pulse-text 2s infinite; /* Apply the animation */
            filter: unset !important; /* Remove any filter effects */
            
        }