* {
    font-family: 'Roboto', sans-serif;
    font: 18px/24px sans-serif;
}
#input_outer, #recipe_outer, #recipe_wrap, #recipe_name,
#recipe_ingredients, #recipe_directions, #error, input, button {
    border-radius:5px
}

#input_outer{
    width:100%;
    background-color:#66aabb;
    padding-bottom:3px;
}
#recipe_outer{
    width:100%;
    display:inline-block;
    background-color:#66aabb;
    margin:0px;
    float:right;
    color:#FFF;
}
#input_ingredients {
    margin:0px;
    height:50px;
    width:100%;
}
#buttons, #errors {
    display:flex;
    -webkit-box-direction:normal;
    -webkit-box-orient: horizontal;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;   
}
#buttons {
    padding:8 0 5 0px;
}
#recipe_wrap{
    padding:5 5 1 5px;
    margin:0 0 5 0px;
    background-color:#272c30;
}
#recipe_name,#recipe_ingredients,#recipe_directions {
    padding:5 0 5 36px;
    margin:0 0 5 0px;
    background-color:#b7416e;
}
#error {
    width:auto;
    margin:3 0 10 0px;
    background-color:#b7416e;
    color:#FFF;
    padding:5px;
    text-align:center;
    box-shadow:0px 3px #272c30;
}
input {
    text-align:center;
    margin:0px;
    padding:0px;
    top:0px;
    background-color:#272c30;
    color:#FFF;
    border:0px;
    border-radius:5px 5px 5px 5px;
}
button{
    background-color:#b7416e;
    border:0px;
    padding:5px;
    margin:0 2.5 5 2.5px;
    height:75px;
    width:100px;
    color:#FFF;
    box-shadow:0px 3px #272c30;
}
button:active{
    box-shadow:none;
    margin-top:2px;
    margin-bottom:0px;
}

ol {
    margin:0px;
    padding:0px;
}
/* page beautification all the way down... */

/* make all links uniform */
a:link,a:visited,a:active,a:hover {
    color:#FFF;
    text-decoration: none;
}

/* remove scrollbars */
::-webkit-scrollbar { 
    display: none; 
}

/* remove changes in appearance on focus */
input:focus,select:focus,textarea:focus,button:focus {
    outline: none;
}
/* don't group these, invalid individuals invalidate the entire group */
::-webkit-input-placeholder { color: #aaa;}
:-moz-placeholder { color: #aaa; }
::-moz-placeholder { color: #aaa; }
:-ms-input-placeholder { color: #aaa; }

/* make placeholder disappear on focus */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }