body {
    background-color: #25274D;
}

/* begin page header */

.page-header {
    background-color: rgb(22, 123, 169);
    color: rgb(22, 123, 169);
    border-bottom: 1px solid rgb(22, 123, 169);
    box-shadow: 0 2px 5px rgb(22, 123, 169);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 65%;
    margin: 0 auto;
    margin-top: 3em;
}

.logo {
    max-width: 1em;
    max-height: 1em;
    border-radius: 3em;
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;

}

.nav-links {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;

}

.nav-links li {
    margin: 0 1em
}

.beer-list {
    display: flex;
    align-items: flex-end;
    font-size: 1.6em;
}

.left-image-container {
    margin-right: .2em;
}

.right-image-container {
    margin-left: .2em;
}

.foodie-brau {
    font-size: 3em;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 5px 5px 0 #000;
    padding-bottom: .6em;
    font-family: 'Gloria Hallelujah', cursive;
}

.your-list {
    display: flex;
    align-items: flex-end;
    font-size: 1.6em;
}

.nav-links li a {
    display: flex;

    text-decoration: none;
    color: white;
    font-weight: 600;
    font-family: 'Gloria Hallelujah', cursive;
}

/* ending of page header */

/* line 130 closing tag for media q */

/* css tags for intro and form elements */

.introduction-div {
    display: flex;
    justify-content: center;
    max-width: 77%;
    margin: auto;
}

.intro {
    color: #AAABB8;
    font-size: 20px;
    width: 85%;
    margin-top: 2em;
    font-family: 'Gloria Hallelujah', cursive;
}

.beer-selector-div {
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    margin-top: 3em;
    margin-bottom: 3em;
}

.light {
    color: rgb(246, 244, 99);
}

.copper {
    color: rgb(188, 106, 40);
}

.amber {
    color: rgb(104, 32, 14);
}

.dark {
    color: rgb(75, 9, 6);
}

/* pairing css selector this is all for the pairings page, all the media q seems to function fine */
.clicked-beer-fl {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.beer-card-rec {
    width: 60rem;
    align-items: center;
    background-color: #2E9CCA;
    flex-direction: row;
}

.beer-image-fl {
    width: 11em;
    object-fit: contain
}

.clicked-beer-details-fl {
    height: 100%;
}

.render-recipes-container-fl {
    justify-content: space-evenly;
}

.card-fl {
    background-color: #2E9CCA;
}

.card-body-container {
    height: -webkit-fill-available;
}

.card-row-fl {
    background-color: #ff9200f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.card-img-fl {
    margin-left: 12px;
}

.card-body-fl {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.card-title-fl {
    text-align: center;
    font-size: 1.5em;
    font-family: 'Gloria Hallelujah';
    flex-grow: 1;
}

.card-img-container-fl {
    width: 100%;
    padding-bottom: 1em;
}

.col-md-5.rec-beer-image {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 15px;
}

.search-bar {
    height: 50px;
    width: 50px;
    border-style: none;
    padding: 10px;
    font-size: 18px;
    letter-spacing: 2px;
    outline: none;
    border-radius: 25px;
    transition: all .5s ease-in-out;
    background-color: transparent;
    padding-right: 40px;
    color: rgb(255, 255, 255);
    font-family: 'Gloria Hallelujah', cursive;

}

.search-bar::placeholder {
    color: rgba(255, 255, 255, .5);
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 100;
    font-family: 'Gloria Hallelujah', cursive;
}

.search-button {
    width: 50px;
    height: 50px;
    border-style: none;
    font-size: 20px;
    font-weight: bold;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    right: 0px;
    color: #ffffff;
    background-color: transparent;
    pointer-events: painted;
    background-image: url(https://cdn2.hubspot.net/hubfs/4004166/bioticresearch_website_assets/images/search_icon.png);
}

.search-button:hover~.search-bar {
    width: 300px;
    border-radius: 0px;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

.search-bar:hover {
    width: 300px;
    border-radius: 0px;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

.search-bar-div {
    display: flex;
    justify-content: flex-end;

}

.col-md-8 {
    background-color: #e9ecef
}

.clicked-beer-details-fl {
    background-color: #e9ecef
}

.card-link-button-fl {
    background-color: #2E9CCA
}

.button-container {
    display: flex;
    justify-content: space-between;
}

.thumbs {
    display: flex;
    justify-content: flex-end;
}

:root {
    --radius: 2px;
    --baseFg: dimgray;
    --baseBg: white;
    --accentFg: #2E9CCA;
    --accentBg: #bae1ff;
}

select {
    font: 400 12px/1.3 sans-serif;
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--baseFg);
    line-height: 1;
    outline: 0;
    padding: 0.65em 2.5em 0.55em 0.75em;
    border-radius: var(--radius);
    background-color: var(--baseBg);
    background-image: linear-gradient(var(--baseFg), var(--baseFg)),
        linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
        linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
        linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;
}

select:hover {
    background-image: linear-gradient(var(--accentFg), var(--accentFg)),
        linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
        linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
        linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
    color: var(--accentBg);
    border-color: var(--accentFg);
    background-color: var(--accentFg);
}

@media screen and (max-width: 775px) {
    .page-header {
        max-width: 100%
    }

    select {
        display: none;
    }

    .introduction-div {
        max-width: 114%;
    }

    .intro {
        font-size: 16px;
        width: 100%;
    }

    .submit-button {
        display: none
    }

    .nav-links li {
        margin: 0;
    }

    #beer-card-img {
        justify-content: center;
        display: flex;
    }

    .foodie-brau {
        font-size: 1.5em
    }

    .foodie-brau a {
        text-align: center;
        text-justify: auto;
        white-space: nowrap
    }

    .beer-list {
        font-size: .95em;
    }

    .beer-list a {
        text-align: center;
    }

    .your-list {
        font-size: .95em;
    }

    .your-list a {
        text-align: center;
    }

    .recipe-image {
        height: 13em;
        margin-bottom: 1em;
        object-fit: contain;
    }

    .card-img-container-fl {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .card-body-fl {
        padding-right: 0;
    }
}

/* changed min rem from 50 down to 5, bad idea, leave it at 50*/
@media screen and (min-width: 10rem) {
    #main {
        height: fit-content;
        padding-bottom: 1em;
    }

    .thumbs-up-down {
        display: flex;
        justify-content: space-between;
        margin-top: -38px;
        padding-bottom: 1em;
    }

    .thumbs-up-down-2 {
        display: flex;
        justify-content: space-between;
    }

    .beer-card {
        background-color: #2E9CCA;
        min-height: 250px;
        padding-left: 0;
        color: #AAABB8;
        font-family: 'Gloria Hallelujah', cursive;
        padding: inherit;
        color: white;
    }

    .card-thumbs-fl {
        display: flex;
    }

    .card-entire-content {
        min-height: 225px;
        height: 100%;
    }

    /* }    testing media q */
    .btn-primary {
        color: beige;
        font-family: 'Gloria Hallelujah', cursive;
        background-color: #464866;
        border-color: #464866;
        width: fit-content;
    }

    .card-body-landing {
        height: 14em;
        overflow: scroll;
        overflow-x: hidden;
    }

    .beer-card-image {
        height: 100%;
        padding-top: 10px;

    }

    .beer-card-image img {
        max-height: 225px;
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

    .random-container {
        display: flex;
        justify-content: space-evenly;
        max-width: 1200px;
        margin: 0 auto;
    }

    .random-pull {
        text-align: center;
        color: #AAABB8;
        font-family: 'Gloria Hallelujah', cursive;
        font-size: 27px;
        text-decoration: underline;
    }

    .up-and-down-help {
        text-align: center;
        color: #AAABB8;
        font-family: 'Gloria Hallelujah', cursive;
        font-size: 27px;
    }

    .centered-title {
        display: flex;
        justify-content: center;
        color: #000;
    }

    .tmb-up {
        display: flex;
    }

    .tmb-down {
        display: flex;
    }

    p.card-text {
        color: black;
    }
}

@media (min-width: 768px) {
    .beer-card {
        max-width: 350px;
        background-color: #2E9CCA
    }

}

@media screen and (min-width: 992px) {
    .beer-card {
        max-width: 550px
    }
}

@media screen and (max-width: 970px) {
    .foodie-brau a {
        text-align: center;
        text-justify: auto;
        white-space: nowrap;
        font-size: .85em;
    }

    .page-header {
        max-width: 100%
    }
}

@media screen and (max-width: 1055px) {
    .foodie-brau a {
        text-align: center;
        text-justify: auto;
        white-space: nowrap;
        font-size: .85em;
    }
}

@media screen and (max-width: 1120px) {
    .foodie-brau a {
        text-align: center;
        text-justify: auto;
        white-space: nowrap
    }
}

.hops {
    font-size: 19px;
    text-decoration: underline;
    margin-left: -20px;
    margin-top: 10px;
    margin-bottom: -20px;
}

.malt {
    font-size: 19px;
    text-decoration: underline;
    margin-left: -13px;
    margin-bottom: 7px;
}

.beer-card-rec {
    color: black;
    font-family: 'Gloria Hallelujah';
}

@media screen and (max-width: 1274px) {
    .foodie-brau a {
        text-align: center;
        text-justify: auto;
        white-space: nowrap
    }

}