/* application specific */
body {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
}

a:hover {
    color: black;
}

a:visited:hover {
    color: black;
}

.nav-bar-wrapper {
    position: -webkit-sticky;
    position: sticky;
    padding: 0.5rem;
    top: 0;
    background-color: white;
    border-bottom: 2px solid gray;
    width: 100%;
}

.content-wrapper {
    max-width: 960px;
    margin: 1rem;
}

.link-list{
    list-style-type: none;
    padding: 0;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

a.link-list-item {
    text-decoration: none;
    color: blue;
    width: 100%;
    border-bottom: 2px solid gray;
}

a.link-list-item:visited {
    color: blue;
}

a.link-list-item:hover {
    color: darkmagenta;
}

.dropdown.show {
  display: initial;
}

.dropdown {
  display: none;
}

.expand-hitbox{
    padding: 1rem;
}

.main-img-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.main-img {
    object-fit: cover;
    max-height: 50vh;
    max-width: 95vw;
}

.text-small {
    font-size: 0.75rem;
}

#ingredients-multiplier{
    max-width: 30vw;
}

.recipe-ingredient-box {
    width: 100%;
    background-color: lightgray;
    border-radius: 0.25rem;
    padding: 1rem;
}

.footer {
    background-color: lightgray;
    padding: 1rem;
    width: 100%;
}

.m-w-3{
    max-width: 33.3%;
}

.w-3 {
    width: 33%;
}

.w-100{
    width: 100%;
}

.suggestion-bar-image{
    width: 100%;
    object-fit: cover;
    flex-grow: 1;
    max-height: 20rem;
}

#search-results{
    padding: 0.5rem;
    border: 2px solid gray;
    position: absolute;
    background-color: white;
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;
}

#search-results-wrapper{
    position: relative;
}

#nav-bar-search-text{
    width: 20rem;
    max-width: 40vw;
    margin-left: 1rem;
}

.suggestion-bar-link{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: stretch;
    flex-grow: 1;
}

.flex-align-items-stretch{
    align-items: stretch;
}

.suggestion-bar{
    flex-wrap: nowrap;
    justify-content: space-around;
}

@media screen and (max-width: 700px) {
    .suggestion-bar{
        flex-wrap: wrap;
    }

    .w-3 {
    width: 100%;
}
}