:root {
    /* Color pallete ^^*/
    --honeydew: #EBF5DF;
    --cucumber: #BAD4AA;
    --vanilla: #D4D4AA;
    --honeymustard: #EDB458;
    --citrus: #E8871E;
    --cream: #FFFEFC;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lobster', cursive;
    font-weight: 400;
}
/* aside styling */

#toggleSidebar {
    display: flex; 
    align-items: center;
    justify-content: center;
    margin: 20px;
    color: var(--cream);
    background-color: var(--cucumber);
   
}

#sidebar {
    background-color: var(--cream);
}

#shTitle {
    color: var(--citrus);
}

#searchButton {
    color: var(--citrus);
    background-color: var(--honeydew);
}

#searchHistory {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.search-history-btn {
    position: relative;
    left: 2%;
    background-color: var(--honeymustard);
    color: var(--cream);
    height: 6vh;
    width: 80%;
    border: 2px solid var(--citrus);
    border-radius: 5px;
    margin: 5%;
}

#searchInput {
    background-color: var(--cream);
    color: var(--honeymustard);
}

#formBackground {
    background-color: var(--cucumber);
}

/* HEADER CONTENT */
header {
    color: var(--citrus);
    
}

.dishIcon {
    position: relative;
    top: 7px;
    width: 60px;
    height: auto;
    margin-top: 1px;
    
}

h1 {
    font-size: 45px;
    display: flex;
    justify-content: center;
    align-content: center;
}

#headerSegment {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--cucumber);
    height: 15vh;
    width: 100%;
}

/* MAIN STYLING */
body {
    background-color: var(--cream);
}
/* LANDING PAGE STYLING */
.landing-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    background-color: var(--cream);
  }
  
  .landing-page h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--citrus);
  }
  
  .landing-page p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    font-weight: 700;
    color: var(--cucumber);
  }
  
  #startButton {
    background-color: var(--honeymustard);
    color: var(--cream);
  }
  /* CARD STYLING */
  #searchResults {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  #toggleSidebar {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 20px;
}

  .card {
    width: 60vw;
    height: auto;
    position: relative;
    top: 20vh;
    left: 30%;
    padding: 25px;
    border: 4px solid var(--cucumber);
    border-radius: 15px;
    margin: 5%;
  }

  .header {
    font-family: 'Lobster', cursive;
    color: var(--citrus);
  }
  .column img{
    border-radius: 15px;
  }

  .content {
    padding-top: 5%;
  }

  .meta a{
    color: var(--citrus);
  }
  /* FOOTER STYLING */
  footer a{
    color: var(--citrus);
    display: flex;
    justify-content: center;
  }