body {
  background-color: wheat;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  flex: 1 0 auto;
}

.Welcome{
  text-align: center;
  font-size: xx-large;
  color: teal;
}

.Explore{
  text-align: center;
  font-size: large;
}
h4.list-title {
  font-weight: bold;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.nav-wrapper {
  background-color: teal;
}
#favourites{
  text-align: center;
}

fieldset {
  border-radius: 5px;
  border-width: 3px;
  border-color: teal;
  color: grey;
}
::-webkit-input-placeholder {
  color: teal !important;
}

input[type="text"] {
  color: teal;
}

main {
  flex: 1 0 auto;
}

.main-search-bar {
  display: flex;
  justify-content: start;
  align-content: center;
  align-items: center;
}
img.responsive-img.tiles {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#recipename {
  font-weight: bold;
}
#recipename:hover {
  color: brown;
}

.row.search {
  margin-top: 33px;
}

button,
#advanced-search-button,
.waves-effect,
.waves-light,
.btn {
  margin-top: 10px;
  object-position: center;
  background-color: #c1382a;
}

.fa-search{
    font-size: 20px;
    margin:10px;
    cursor: pointer;
}
.fa-search:hover, .fa-search:focus{
    transform: scale(1.05);
    color: teal;
}
.spinner{
    transform: rotate3d(1,1,0,180deg);
    transition:cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s;
}
/* Please change these cart colours, their horrible, but it's late and i'm moving on haha. */
#open-cart{
    font-size: 40px;
    color: white;
}
#cart-container{
    background-color: teal;
    padding: 15px;
    border-radius: 5px;
    border:none;
    
}

footer.page-footer{
  background-color: grey;
}

/* --------------------------- favourites card css-------------------------------------- */
aside{
    width:100px;
    height:100px;
}


.favourite-card{
    width:100px;
    height:100px;
}

.favourite-img{
    display: block;
    max-width: 100px;
    height: 100px;

}

.favourite-title{
    font-size:40px;

}