body {
    margin: 0 0rem;
    font-family: Helvetica, sans-serif;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to left, #fcffca, #ffd7ef);
}

a:any-link {
    color: blueviolet;
}

.nav {
    background-color: blueviolet;  /* fallback for old browsers */
    display: flex;
    align-items: center;
    margin: 0 0 0 0;
    color: white;
}
.nav h4 {
    margin: .5rem 0;
}
.nav a {
    text-decoration: none;
    color: white;
    padding: .5rem .5rem;
}

.content {
    display: flex;
}

.cats {
    border-right: 1px dotted #aaaaaa;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to bottom, #fcffca, #ffd7ef);
}
.cats ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    min-width: 12rem;
    max-width: 15rem;
}
.cats ul li {
    padding: .5rem .5rem;
}
.cats ul li:hover {
    background-color: rgba(238, 238, 238, .4);
}
.cats ul a:any-link {
    text-decoration: none;
    margin: 0;
}

.sets {
    border-right: 1px dotted #aaaaaa;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to bottom, #fcffca, #ffd7ef);
}
.sets h4 {
    background-color: blueviolet;
    text-align: center;
    margin: 0;
    padding: .25rem 0;
    color: white;
}
.sets ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 12rem;
}
.sets ul li {
    padding: .5rem .5rem;
}
.sets ul li:hover {
    background-color: rgba(238, 238, 238, .4); 
}
.sets ul a:any-link {
    text-decoration: none;
    margin: 0;
}
.sets ul li form button:hover {
    cursor: pointer;
}


.main {
    display: flex;
    flex-direction: column;
    width:100%;
}

.recIngImg {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}
@media screen and ( max-width: 1080px ) {
    .recIngImg {
        flex-direction: column-reverse;
        align-items: center;
    }
}

@media screen and ( max-width: 450px ) {
    .savImg img {
        width: 15rem;
    }
}

.savImg {
    padding: 0;
}
.savImg img {
    margin: 0;
}
.savImg form {
    opacity: 0;
    transition: .3s linear;
}
.savImg:hover form {
    opacity: 1.0;
}

.saveRecForm {
    display: flex;
    flex-direction: column;
    padding: 0;
}
#saveBtn {
    background-color: blueviolet;
    color: #fcffca;
    border: none;
    padding: .25rem;
    margin:0;
}
#saveBtn:hover {
    background-color: #fcffca;
    color: blueviolet;
    cursor: pointer;
}

.Ing {
    border: 1px solid #aaaaaa;
    margin-bottom: 1rem;
}
.Ing h5 {
    background-color: blueviolet;
    text-align: center;
    margin: 0;
    padding: .25rem 0;
    color: white;
}
.Ing ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 15rem;
}
.Ing li {
    padding: .25rem;
}
.Ing li:nth-child(even) {
    background-color: #eeeeee;
}
.Ing li:nth-child(odd) {
    background-color: white;
}

.category {
    display: flex;
    justify-content: flex-end;
    margin-right: 3rem;
}
.category span {
    width: 5rem;
    background-color: #eeeeee;
    padding: .25rem;
    text-align: center;
}

.steps {
    display:flex;
    flex-direction: column;
    margin: 0 3rem;
    border: 1px dotted #aaaaaa;
    margin-bottom: 2.25rem;
}
@media screen and ( max-width: 420px ) {
    .steps {
        margin: 0 1rem 3rem 1rem;
    }
}
.steps h4 {
    background-color: blueviolet;
    color: white;
    margin: 0;
    padding: .25rem 0;
    text-align: center;
}
.steps div {
    margin: 0;
    padding: 0 1.5rem;
}
.steps h5 {
    margin: 1rem 0;
}
.steps div p {
    line-height: 1.75rem;
}
.steps div:nth-child(even) {
    background-color: #eeeeee;
}
.steps div:nth-child(odd) {
    background-color: white;
}

.pops {
    border-left: 1px dotted #aaaaaa;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to top, #fcffca, #ffd7ef);
}
.pops h4,
.cats h4 {
    background-color: blueviolet;
    text-align: center;
    margin: 0;
    padding: .25rem 0;
    color: white;
}
.popCard {
    margin: 1rem;
}
.popular {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px dotted #aaaaaa;
    border-radius: 2%;
    margin: .5rem 0;
    background-color: white;
    min-width: 10rem;
}
.popular h5 {
    text-align: center;
    margin: .5rem 0;
}
.popular form {
    display: flex;
    flex-direction: column;
    width: 6rem;
    margin: .25rem 0;
}
.popular form button {
    background-color: #ffd7ef;
    color: blueviolet;
    border: none;
    border-radius: 3%;
    padding: .25rem .15rem .25rem .15rem;
}
.popular form button:hover {
    background-color: #fcffca;
    cursor: pointer;
}

.bioDisplay {
    color: blueviolet;
}
.bioDisplay ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    min-width: 12rem;
    max-width: 15rem;
}
.bioDisplay ul li {
    padding: .5rem .5rem;
}
.bioDisplay ul li p {
    margin: 0;
}
.bioDisplay ul li:nth-child(odd) {
    background-color: rgba(238, 238, 238, .4);
}
.bioDisplay ul li:nth-child(even) {
    background-color: rgba(255, 255, 255, .4);
}


.logCard {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 32rem;
    align-self: center;
    margin-top: 2rem;
    border: 1px dotted #aaaaaa;
    border-radius: 1%;
}
.logCard h4 {
    background-color: blueviolet;
    color: white;
    margin: 0;
    padding: .25rem .25rem;
}

.fff {
    display: flex;
    flex-direction: column;
}

/* Login and register form */
#logform {
    display: flex;
    flex-direction: column;
    width: 30rem;
    align-self: center;
    margin: 1rem;
}
#logform label {
    padding-bottom: .5rem;
}
#logform input {
    padding: .25rem .15rem .25rem .15rem;
    margin-bottom: .5rem;
}
#logform button {
    padding: .25rem 0;
    margin: .5rem 0;
    background-color: #ffd7ef;
    border: none;
    border-radius: 1%;
    color: blueviolet;
}
#logform button:hover {
    background-color: #fcffca;
    cursor: pointer;
}

@media screen and (max-width: 550px) {
    .logCard{
        width: 25rem;
    }
    #logform {
        width: 23rem;
    }
}

@media screen and ( max-width: 420px ) {
    .logCard{
        width: 20rem;
    }
    #logform {
        width: 18rem;
    }
}
.searchbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url('./searchBurger.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 10rem;
    color: white;
}
.searchbox h2 {
    color: #ffd7ef;
}

#searchForm {
    margin-bottom: 2rem;
}
#searchForm input {
    padding: .25rem .15rem .25rem .15rem;
}
#searchForm button {
    background-color: #ffd7ef;
    color: blueviolet;
    border: none;
    border-radius: 3%;
    padding: .35rem .4rem;
}
#searchForm button:hover {
    background-color: #fcffca;
    cursor: pointer;
}

/* Create a recipe form */
.createCard {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 50rem;
    align-self: center;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    border: 1px dotted #aaaaaa;
    border-radius: 1%;
}
.createCard h4 {
    background-color: blueviolet;
    color: white;
    margin: 0;
    padding: .25rem .25rem;
}

#createForm {
    display: flex;
    flex-direction: column;
    width: 48rem;
    align-self: center;
    margin-top: 1rem;
}
#createForm label {
    padding-bottom: .5rem;
}
#createForm input {
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}
#createForm select {
    margin: .25rem 0 .25rem 0;
    padding: .25rem .25rem;
}
#createForm textarea {
    height: 10rem;
}
#createForm button {
    padding: .25rem 0;
    margin: .5rem 0;
    background-color: #ffd7ef;
    color: blueviolet;
    border: none;
    border-radius: 3%;
}
#createForm button:hover {
    background-color: #fcffca;
    cursor: pointer;
}
.adds {
    display: flex;
    flex-direction: column;
    margin: .5rem 0 .5rem 0;
    padding: 1rem 1rem;
    border: 1px dotted #aaaaaa;
    border-radius: 1%;
}
.adds textarea {
    height: 10rem;
}

#createForm .adds:nth-child(even) {
    background-color: #eeeeee;
}

#createForm #addStep {
    margin-bottom: 2.5rem;
}

@media screen and (max-width: 820px) {
    .createCard {
        width: 32rem;
    }
    #createForm {
        width: 30rem;
    }
}
@media screen and (max-width: 550px) {
    .createCard {
        width: 25rem;
    }
    #createForm {
        width: 23rem;
    }
}
@media screen and (max-width: 420px) {
    .createCard {
        width: 20rem;
    }
    #createForm {
        width: 18rem;
    }
}

.editCard {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 50rem;
    align-self: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 1px dotted #aaaaaa;
    border-radius: 1%;
}
.editCard h4 {
    background-color: blueviolet;
    color: white;
    margin: 0;
    padding: .25rem .25rem;
}

.stepControl {
    display:flex;
}
.stepControl input {
    width: 80%;
}
.stepBtns {
    display: flex;
    width: 20%;
    justify-content: flex-end;
}
.stepBtns #plus,
.stepBtns #minus {
    width: 100%;
    margin: 0 0 .5rem .5rem;
    padding: 0 .7rem;
}
.stepBtns #plus:hover,
.stepBtns #minus:hover {
    cursor: pointer;
}

@media screen and ( max-width: 820px ) {
    .editCard {
        width: 32rem; 
    }
}
@media screen and ( max-width: 550px ) {
    .editCard {
        width: 25rem; 
    }
}
@media screen and ( max-width: 420px ) {
    .editCard {
        width: 20rem; 
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.recList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.recCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid gray;
    border-radius: 1.5%;
    margin: 2rem;
    background-color: white;
}
.recCard img {
    width: 15rem;
    height: 15rem;
    object-fit: cover;
}
.recCard a:any-link {
    text-decoration: none;
    margin: .5rem 0 .5rem 0;
}
.recControl {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
.recCard form {
    width: 100%;
    display: flex;
    margin: .5rem;
}
.recCard form {
    display: inline-block;
    transition: .3s linear;
    width: 0;
    opacity: 0;
}
.recCard:hover form {
    width: 6.5rem;
    opacity: 1.0;
}

.recCard button {
    width: 6.5rem;
}

.recCard button:hover {
    cursor: pointer;
    background-color: #fcffca;
}

.acRecBtns {
    background-color: #ffd7ef;
    border: none;
    border-radius: 5%;
    color: blueviolet;
    margin: 0;
    padding: .25rem .25rem;
    width: 2rem;
    height: 2rem;
}

.editSteps {
    display: flex;
    flex-direction: column;
    width: 50rem;
    align-self: center;
}

.editSteps input {
    padding: .25rem 0 .25rem 0;
}

#delStep {
    display: flex;
    justify-content: center;    
}
#delStep button {
    width: 50rem;
    margin: .25rem 0;
    padding: .25rem 0;
}
#deleteStep {
    display: flex;
    flex-direction: column;
}

.stepBtns2 {
    display: flex;
    justify-content: space-evenly;
}
.stepBtns2 button {
    width: 22.5rem;
    margin: .5rem 0;
    padding: .25rem 0;
}

form .steps {
    margin-top: .5rem;
    margin-bottom: .5rem;
    width: 100%;
    align-self: center;
}

.stepsToEd {
    display:flex;
    flex-direction: column;
    margin: 0;
    border: 1px dotted #aaaaaa;
    margin-bottom: .5rem;
    width: 50rem;
    align-self: center;
}
.stepsToEd h4 {
    background-color: blueviolet;
    color: white;
    margin: 0;
    padding: .25rem 0;
    text-align: center;
}
.stepsToEd div {
    margin: 0;
    padding: 0 1.5rem;
}
.stepsToEd h5 {
    margin: 1rem 0;
}
.stepsToEd div p {
    line-height: 1.75rem;
}
.stepsToEd .stepToEd:nth-child(even) {
    background-color: #eeeeee;
}
.stepsToEd .stepToEd:nth-child(odd) {
    background-color: white;
}

.edtr {
    opacity: 0;
    transition: .3s linear;
    width: fit-content;
}
.stepToEd:hover .edtr{
    opacity: 1.0;
    width: fit-content;
}

@media screen and ( max-width: 820px ) {
    .stepsToEd {
        width: 32rem; 
    }
}
@media screen and ( max-width: 550px ) {
    .stepsToEd {
        width: 25rem; 
    }
}
@media screen and ( max-width: 420px ) {
    .stepsToEd {
        width: 20rem; 
    }
}

.editStpBtns {
    background-color: #ffd7ef;
    border: none;
    border-radius: 5%;
    color: blueviolet;
    margin: 0;
    padding: .25rem .25rem;
    width: 2.25rem;
    height: 6rem;
}
.editStpBtns:hover {
    cursor: pointer;
    background-color: #fcffca;
}

.welcome {
    margin: 1rem 3rem 1rem 3rem;
}
.welcome h4 {
    text-align: center;
    color: blueviolet;
}

.flashCardError {
    background-color: indianred;
    color: #fcffca;
    padding: .2rem;
}
.flashCardSuccess {
    background-color: rgb(104, 212, 176);
    color: #fcffca;
    padding: .2rem;
}

.bottomNav {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 95%;
    background-color: blueviolet;
    height: 5%;
    width: 100%;
}
.bottomNav button {
    background-color: blueviolet;
    color: white;
    border: none;
}
.bottomNav button:hover {
    background-color: crimson;
    cursor: pointer;
}

.magicCats {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0%;
    height: 95%;
    width: 100%;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to left, #fcffca, #ffd7ef); 
}
.magicCats h4 {
    background-color: blueviolet;
    text-align: center;
    color: white;
    margin-top: 0;
    margin-bottom: 0;
    padding: .25rem .25rem;
}
.magicCats ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    padding: 0;
}
.magicCats li {
    width: 100%;
    text-align: center;
    line-height: 2rem;
}
.magicCats li:hover {
    background-color: rgba(238, 238, 238, .4);
}
.magicCats a:any-link {
    text-decoration: none;
}

.magicPops {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0%;
    height: 95%;
    width: 100%;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to left, #fcffca, #ffd7ef);
    overflow-x: hidden;
    overflow-y: auto;
    transition: height .2s linear;
}
.magicPops h4 {
    background-color: blueviolet;
    text-align: center;
    color: white;
    margin-top: 0;
    margin-bottom: 0;
    padding: .25rem .25rem;
}
.magicPops .popCard {
    margin: 1rem 10rem;
    align-self: center;
}

.magicSets {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0%;
    height: 95%;
    width: 100%;
    background: #ffd7ef;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #fcffca, #ffd7ef);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #fcffca, #ffd7ef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: -moz-linear-gradient(to left, #fcffca, #ffd7ef); 
}
.magicSets h4 {
    background-color: blueviolet;
    text-align: center;
    color: white;
    margin-top: 0;
    margin-bottom: 0;
    padding: .25rem .25rem;
}
.magicSets ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    padding: 0;
}
.magicSets li {
    width: 100%;
    text-align: center;
    line-height: 2rem;
}
.magicSets li:hover {
    background-color: rgba(238, 238, 238, .4);
}
.magicSets a:any-link {
    text-decoration: none;
}

.magicbioDisplay {
    color: blueviolet;
}
.magicbioDisplay ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.magicbioDisplay ul li {
    padding: .5rem .5rem;
}
.magicbioDisplay ul li p {
    margin: 0;
}
.magicbioDisplay ul li:nth-child(odd) {
    background-color: rgba(238, 238, 238, .4);
}
.magicbioDisplay ul li:nth-child(even) {
    background-color: rgba(255, 255, 255, .4);
}

.invis {
    width: 0;
    opacity: 0;
    visibility: hidden;
}