@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Pacifico&display=swap');

/*---------------------Main Container  */
main.container {
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    min-width: 80vw;
}

/*----------- Headings and Special Text */
h1,
h2,
h3 {
    font-family: 'Pacifico', cursive;
    padding: 10px 0px;
}

h1.text-plain {
    padding-top: 20px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.5rem;
    margin-left: 15px;
}

p.flow-text.main {
    margin-left: 15px;

}

h4 {
    font-family: 'Pacifico', cursive;
    font-size: 1.4rem;
    color: #011408;
    text-shadow: 1px 1px 2px #4444447a;
}

h5,
h6 {
    font-family: 'Pacifico', cursive;
    font-size: 1.35rem;
    text-shadow: 1px 1px 2px #4444447a;
    color: #011408;
    line-height: inherit;
}

p,
body {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
}

.brown-text.text-darken-4 {
    color: #9ccc65 !important;
    text-shadow: 1px 1px 3px #34691f;
    font-size: 3rem;
    font-weight: 200;
}

/*----------------------------------- Top Navigation */
.brand-logo.center {
    font-family: 'Pacifico', cursive;
    text-shadow: 2px 0px 3px #2d670f;
}

a.brand-logo.center {
    margin: 0 auto;
    font-size: 2.5rem;
}

.brand-logo i {
    float: none;
    line-height: inherit;
    font-size: inherit;
}

i.fas.fa-utensils.prefix {
    margin-right: 5px;
}

/*---------------------------------- Header */
.txt-rotate {
    font-weight: 700;
    text-transform: uppercase;
}

/*---------------------------------- Side Navigation */
h3.light-green-text.darken-2.text-shadow.center-align {
    text-shadow: 1px 1px 4px #022d0c;
}

/*----------------------------------- Forms */
button,
#btn {
    font-family: 'Pacifico', cursive;
    text-transform: none;
    font-size: 1.3rem;
}

input:focus,
input#username:focus,
input#password:focus {
    border-bottom: 1px solid #a1887f;
    -webkit-box-shadow: 0 1px 0 0 #a1887f;
    box-shadow: 0 1px 0 0 #a1887f;
}

::-webkit-input-placeholder {
    color: #a1887f;
    font-size: 1rem;
}

::-moz-placeholder {
    color: #a1887f;
    font-size: 1rem;
}

:-ms-input-placeholder {
    color: #a1887f;
    font-size: 1rem;
}

::-ms-input-placeholder {
    color: #a1887f;
    font-size: 1rem;
}

label:focus,
label.active,
label#user-label.active,
label#user-label:focus,
label#password-label:focus,
label#password-label.active,
::placeholder,
label,
label:active,
.input-field.col.s12 .prefix~label,
.input-field .prefix~input,
.input-field .prefix~textarea,
.input-field .prefix~label,
.input-field .prefix~.validate~label,
.input-field .prefix~.helper-text,
.input-field .prefix~.autocomplete-content {
    color: #a1887f;
    font-size: 1rem;
}

input {
    font-family: 'Josefin Sans', sans-serif;
    color: #3e2723;
}

label {
    color: #3e2723;
}

/*-------------------------------------------- Flashes */
.flashes h4 {
    line-height: 2;
    font-family: 'Pacifico', cursive;
    background-color: transparent;
    color: #24380e;
}

/*--------------------------------------------- Recipe Page */
.card .card-content .card-title {
    font-size: 1.3rem;
    color: #24380e;
    letter-spacing: .5px;
    font-family: 'Pacifico', cursive;
    line-height: inherit;
    margin-bottom: 10px;
}

hr#divider {
    border-top: 1px solid #7ec46a;
    margin: 15px 0px;
}

.card .card-title {
    font-size: 1.4rem;
}

/*------------------------------------------ Profile */
#find-icon,
#share-icon,
#edit-icon {
    font-size: 1.4rem;
    text-shadow: 1px 1px 2px #3e2723;
}

#feature {
    margin: 30px 30px;
}

#welcome-user {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 30px;
}

.responsive-img {
    max-width: 100%;
    height: auto;
}

#welcome-image {
    background-image: url('/static/images/ingredients.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    max-width: 100%;
    height: 30vh;
}

/*------------------------------------------- Add Recipe */
button.light-green.darken-1.waves-effect.waves-light.btn {
    text-transform: none;
    font-size: 1.3rem;
    letter-spacing: 1px;
    font-weight: 300;
}

textarea {
    font-family: 'Josefin Sans', sans-serif;
    color: #3e2723;
}

/*--------------------------------------- Edit Recipe */
.btn#edit-recipe,
.btn#delete-recipe,
button,
#edit {
    font-family: 'Pacifico', cursive;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: 1px;
    margin: 2px 0px;
}

a#cancel,
.red.btn.accent-2.text-shadow {
    font-family: 'Pacifico', cursive;
    text-transform: none;
    letter-spacing: 1px;
    border: none;
}

/*--------------------------------------- Search Recipes */
#searchRow {
    margin-top: 30px;
}

button.submit.btn.light-green.lighten-1 {
    border: none;
    text-transform: none;
    letter-spacing: .5px;
}

i.fas.fa-user-circle.light-green-text.text-shadow.center-align:hover {
    color: #4e342e;
}

i.fas.fa-user-circle.light-green-text.text-shadow.center-align {
    font-size: 10rem;
    margin-top: 30px;
}

.card-image,
#card-image {
    max-width: 100%;
    /*! min-height: 200px; */
    overflow: hidden;
}

#recipe-image {
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-size: cover;
    max-width: 100%;
    overflow: hidden;
    height: auto;
}

/*--------------------------------------- Footer */
footer {
    margin-top: 50px;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

/*------------------------------------- Media Queries */


@media only screen and (min-width: 600px) {
    #cards {
        height: 40vh;
        overflow-y: hidden;
        margin: 20px;
    }

    h1.text-plain {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 3.5rem;
    }

    .card-image,
    #card-image {
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }

    #recipe-image {
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        background-size: cover;
        max-width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .brown-text.text-darken-4 {
        color: #9ccc65 !important;
        text-shadow: 4px 4px 3px #34691f;
        font-size: 5rem;
        font-weight: 200;
    }


    main.container {
        margin-top: 60px;
    }

    footer {
        margin-top: 60px;
        position: relative;
    }

    body {
        min-height: 100vh;
    }
}

@media only screen and (min-width: 1024px) {
    #cards {
        height: 40vh;
        max-width: 450px;
        overflow: hidden;
    }

    h1.text-plain {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 4rem;
    }

    #card-image {
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }

    #recipe-image {
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        background-size: cover;
        min-width: 100%;
        height: 150px;
        overflow: hidden;
    }

    footer {
        margin-top: 20px;
        position: relative;
    }

    body {
        min-height: 100vh;
    }
}