subline/views/dataPage/data.css

#title{
    font-size: 45px;
    color: rgb(255, 99, 107);
    text-align: center;
    margin-top: 25px;
}

.checkboxDiv{
    display: flex;
}

    .checkboxDiv > *{
        margin: 2px;
    }

.dates{
    display: flex;
    justify-content: space-around;
}

/* Home Strand */
#homeStrand{
    flex-direction: column;
    align-items: center;
}

    #homeStrand > *{
        margin: 15px;
    }

    .tables{
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    .dataTable{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

/* Ingredient Strand */
#ingredientStrand{
    flex-direction: column;
    align-items: space-around;
}

    #ingredientStrand > *{
        margin: 10px;
    }

    .canvasBox{
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 100vh;
    }

    canvas{
        flex-grow: 10;
        max-height: 60vh;
        max-width: 90vw;
    }

    #ingredientOptions{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }