#flower-size-buttons {
    position: relative;
    /* padding: 5%; */
    width: 80%;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    float: left;
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

#petal-arrangement-buttons {
    position: relative;
    /* padding: 5%; */
    width: 80%;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    float: left;
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

#leaf-fusion-buttons {
    position: relative;
    /* padding: 5%; */
    width: 80%;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    float: left;
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

#flower-orientation-buttons {
    position: relative;
    /* padding: 5%; */
    width: 80%;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    float: left;
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

#flower-color-buttons {
    position: relative;
    width: 80%;
    height: 5em;
    display: grid;
    grid-template-columns: 5em 5em 5em 5em;
    grid-row-gap: 1em;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    float: left;
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
    font-family: "apparat-excond", sans-serif;
    color: black;
    font-size: 1.5em;
}

#companion-buttons {
    position: relative;
    /* padding: 5%; */
    width: 80%;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    float: left;
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
}

/* ---------------------------- Size Buttons --------------------------------------------- */

#small-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/size_buttons/small.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

#medium-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/size_buttons/medium.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

#large-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/size_buttons/large.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

/* ---------------------------- Petal Orientation Buttons --------------------------------------------- */

#radial-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/petal_orient_buttons/radial.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

#two-two-one-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/petal_orient_buttons/2-2-1.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

#four-one-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/petal_orient_buttons/4-1.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

/* ---------------------------- Flower Orientation Buttons --------------------------------------------- */

#pendulous-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/flower_orient_buttons/pendulous.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

#upright-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/flower_orient_buttons/upright.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

/* ---------------------------- Leaf Fusion Buttons --------------------------------------------- */

#fused-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/leaf_fusion_buttons/fused.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

#unfused-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/leaf_fusion_buttons/unfused.png');
    background-size: cover;
    color: black;
    width: 3em;
    height: 3em;
    padding: 0;
    margin-top: 1.5em;
    margin-right: 1.5em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.4em;
}

/* ---------------------------- Color Buttons --------------------------------------------- */

#white-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/white.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#yellow-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/yellow.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#orange-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/orange.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#pink-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/pink.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#red-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/red.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#purple-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/purple.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#blue-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/blue.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

#green-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/color_buttons/green.png');
    background-size: cover;
    color: black;
    width: 5em;
    height: 5em;
    margin-top: 2em;
    margin-right: 2em;
}

/* ---------------------------- Companion Buttons --------------------------------------------- */

#moth1-button {
    vertical-align: top;
    border-radius: 6px;
    border: black;
    background:url('images/buttons/companion_buttons/moth1.png');
    background-size: cover;
    background-color: black;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    margin-top: 1.3em;
    margin-right: 1.3em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.3em;
}

#moth2-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/companion_buttons/moth2.png');
    background-size: cover;
    background-color: black;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    margin-top: 1.3em;
    margin-right: 1.3em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.3em;
}

#bee-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/companion_buttons/bee.png');
    background-size: cover;
    background-color: black;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    margin-top: 1.3em;
    margin-right: 1.3em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.3em;
}

#butterfly1-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/companion_buttons/butterfly1.png');
    background-size: cover;
    background-color: black;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    margin-top: 1.3em;
    margin-right: 1.3em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.3em;
}

#butterfly2-button {
    border-radius: 6px;
    border: black;
    background:url('images/buttons/companion_buttons/butterfly2.png');
    background-size: cover;
    background-color: black;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    margin-top: 1.3em;
    margin-right: 1.3em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.3em;
}

#hummingbird-button {
    vertical-align: top;
    border-radius: 6px;
    border: black;
    background:url('images/buttons/companion_buttons/hummingbird.png');
    background-size: cover;
    background-color: black;
    width: 2.8em;
    height: 2.8em;
    padding: 0;
    margin-top: 1.3em;
    margin-right: 1.3em;
    font-family: "apparat-excond", sans-serif;
    color: white;
    font-size: 1.3em;
}