/* Button Styles */
.remove-button{
    background-color: rgba(0, 0, 0, 1);
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(2px);
    transition: all .5s ease-in-out;
    text-align: center;
    height: 28px;
}

.remove-button:hover{
    background-color: rgba(255, 200, 200, 0.75);
    border-radius: 25px;
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    backdrop-filter: blur(15px);
}

/* form styles */
#track-food-items{
    scale: 200%;
    width: fit-content;
    height: auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    margin: 0 auto;
    transform: translateY(25%);
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid black;
    transition: all 1s ease-in-out, height 1s ease-in-out, backdrop-filter 2s ease-in-out;
}

#track-food-items-2, #track-food-items-3 {
    scale: 200%;
    width: fit-content;
    height: auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    margin: 0 auto;
    transform: translateY(50%);
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid black;
    transition: all 1s ease-in-out, height 1s ease-in-out, backdrop-filter 2s ease-in-out;
}


#track-food-items:hover, #track-food-items-2:hover, #track-food-items-3:hover {
    backdrop-filter: blur(10px);
}

/* Table styles */
#tracked-food-items-table{
    border-bottom: 1px solid black;
    width: 650px;
    margin: 0 auto;
}

#tracked-food-items-table th{
    border-left: 1px solid black;
    padding: 5px;
}

#tracked-food-items-table td{
    border-left: 1px solid black;
    padding: 5px;
    font-size: medium;
}

/* Responsive CSS */
/* Small */
@media (max-width: 750px) {
    
    #track-food-items{
        scale: 75%;
        transform: translateY(-5%);
    }

    #track-food-items-2{
        scale: 75%;
        margin: 0;
        transform: translateY(-15%) translateX(2%);
    }

    #track-food-items-3{
        scale: 105%;
        transform: translateY(65%) translateX(-0%);
    }

}

@media (max-width: 450px) {
    
    #track-food-items{
        scale: 75%;
        transform: translateY(-5%);
    }

    #track-food-items-2{
        scale: 50%;
        margin: 0;
        transform: translateY(-45%) translateX(-40%);
    }

    #track-food-items-3{
        scale: 95%;
        width: 450px;
        transform: translateY(200%) translateX(-65%);
    }

}