/* General purpose */
.buttonDiv{
    display: flex;
    justify-content: space-between;
}

    .buttonDiv > *{
        margin: 5px;
    }

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

/* Agreement Strand */
#agreementStrand{
    display: flex;
    flex-direction: column;
    align-items: center;
}

    #agreementStrand > *{
        margin: 10px;
    }

/* Basic Info Strand */
#basicInfoStrand{
    display: none;
}

    #basicInfoStrand > *{
        margin: 10px;
    }

    #nameLabel{
        display: none;
    }

/* Add Ingredients Strand */
#addIngredientsStrand{
    display: none;
}

    #addIngredientsStrand > *{
        margin: 10px;
    }

    #addIngredientsStrand h5{
        margin-top: 0;
    }

    .clickable{
        cursor: pointer;
    }

/* Create Ingredients Strand */
#createIngredientsStrand{
    display: none;
}

    #createIngredientsStrand > *{
        margin: 10px;
    }

/* Name Recipes Strand */
#nameRecipesStrand{
    display: none;
}

    #nameRecipesStrand > *{
        margin: 10px;
    }

/* Create Recipes Strand */
#createRecipesStrand{
    display: none;
}

    #createRecipesStrand > *{
        margin: 10px;
    }

    #recipeName{
        color: #ff626b;
    }

@media screen and (max-width: 1000px){
    /* createIngredientsStrand */
    #createIngredientsStrand td, #createIngredientsStrand th{
        font-size: 15px;
        padding: 5px;
    }

    #createIngredientsStrand .button{
        font-size: 16px;
    }

    .inputField{
        max-width: 100px;
    }
}

@media screen and (max-width: 600px){
    .inputField{
        max-width: 50px;
    }

    /* addIngredientsStrand */
    #addIngredientsStrand h1, #addIngredientsStrand h5{
        text-align: center;
    }

    #addIngredientsStrand td, #addIngredientsStrand th{
        font-size: 12px;
        padding: 2px;
    }

    /* createIngredientsStrand */
    #createIngredientsStrand td, #createIngredientsStrand th{
        font-size: 12px;
        padding: 2px;
    }

    #createIngredientsStrand .button{
        font-size: 13px;
    }

    /* createRecipesStrand */
    #createRecipesStrand td, #createRecipesStrand th{
        font-size: 12px;
        padding: 2px;
    }
}