* {
     margin: 0;
     padding: 0;

     box-sizing: border-box;
 }



 body {
     background-color: #98b0d2;

     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

     display: flex;
     justify-content: center;

     min-height: 100vh;
     margin: 0;
 }

 main {
     margin: 1rem 1rem;
     min-width: 60%;
     margin-bottom: 2rem;
 }

 .backgroundImage {
     min-height: 100vh;
     background-image: url('../images/lightblue.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
 }


 .searchDiv {
     margin-top: 2rem;
     border: 1px solid #414e69;

     background-color: #5b6e8f;
     box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.506);
     padding: 2rem 1rem;

     border-radius: 5px;

     text-align: center;
     display: flex;
     flex-direction: row;
     gap: 0.5rem;

 }

 .searchInputs {
     display: flex;
     flex-direction: column;
     flex: 7;
 }

 .searchFilter {
     padding-left: 0.5rem;
     min-height: 2rem;
     border-radius: 5px;
 }

 .foodDropDown {
     padding-left: 0.5rem;
     min-height: 2.5rem;
     border-radius: 5px;
 }

 .foodDropDown:hover {
     cursor: pointer;
 }

 .foodDropDown option {}

 .addButton {
     flex: 1;

     color: white;
     border-radius: 5px;
     border: 1px solid #7589a9;
     background-color: #687ea2;
     min-height: 2rem;

     transition: background-color 0.1s ease;
 }

 .addButton:hover {
     background-color: #586a88;
 }

 .addButton:active {
     background-color: #809ac4;
     cursor: pointer;
 }






 .food-container {
     /* margin-top: 2rem; */
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }


 .slider {
     -webkit-appearance: none;
     appearance: none;

     width: 100%;
     height: 15px;

     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity .2s;

     border-radius: 3px;
 }

 .slider:hover {
     opacity: 1;
 }

 .slider::-webkit-slider-thumb {
     /* Override default look */
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;

     width: 15px;
     height: 15px;

     background: #33355f;
     border-radius: 2px;
 }


 .food-card {
     color: white;

     padding: 1rem;
     border-radius: 5px;
     border: 1px solid #414e69;
     background-color: #5b6e8f;

     box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.506);
     min-width: 300px;
 }

 .food-card .calculation {
     padding: 0.5rem;
     border: 1px solid #7589a9;
     background-color: #687ea2;
     border-radius: 5px;
 }

 .variant-container {
     border-bottom: 1px solid #7589a9;
     padding-bottom: 0.2rem;
     margin-bottom: 0.5rem;
 }

 .variantText {
     display: inline-block;
     width: 8rem;
 }

 .food-card h1,
 .food-card h2,
 .food-card h3,
 .food-card h4,
 .totals-container h1,
 .totals-container h2,
 .totals-container h3,
 .totals-container h4 {
     padding: 0.2rem;
     margin-top: 0.2rem;
     margin-bottom: 0.2rem;

 }


 .grams-container {
     padding: 0.2rem;

 }

 .grams-container .variantText {
     margin-right: 1rem;
 }


 .removeButton {
     color: white;

     margin-top: 0.7rem;
     border-radius: 5px;
     padding: 0.5rem;

     width: 100%;
     border: 1px solid #7589a9;
     background-color: #687ea2;
     transition: background-color 0.1s ease;
 }

 .removeButton:hover {
     background-color: #586a88;
 }

 .removeButton:active {
     background-color: #809ac4;
     cursor: pointer;
 }


 .totals-container {
     margin-top: 2rem;
     border-radius: 5px;
     padding: 1rem;
     border: 1px solid hsl(224, 29%, 36%);
     background-color: hsl(222, 30%, 44%);
     color: white;
     box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.506);

     margin-top: 5rem;

 }

 .totals-container h3 {
     margin-bottom: 0.5rem;
 }

 .totals-container .calculation {
     padding: 1rem;
     border-radius: 5px;
     border: 1px solid hsl(224, 30%, 38%);
     background-color: hsl(222, 26%, 50%);
 }

 .totals-container span {
     display: inline-block;
     border-radius: 5px;
     margin-top: 0.2rem;

 }


 .hidden {
     display: none;
 }



 .minimizeButton {
     margin-top: 0.5rem;
     margin-left: 0.5rem;
     padding: 0.3rem;
     float: right;
     border-radius: 3px;
     color: white;
     border: 1px solid #7589a9;
     background-color: #687ea2;
     transition: background-color 0.1s ease;

 }

 .minimizeButton:hover {
     background-color: #586a88;
 }

 .minimizeButton:active {
     background-color: #809ac4;
     cursor: pointer;
 }



 .quickAdd-container {
     border: 1px solid #414e69;
     background-color: #5b6e8f;
     box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.506);
     border-radius: 5px;
     color: white;
     padding: 1rem;
     margin-top: 1rem;
     margin-bottom: 5rem;

     gap: 1rem;
 }

 .quickAdd-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    gap: 1rem;
 }

 .quickAdd-buttons button {
     min-width: 5rem;
 }

 .buttonStyle {
     padding: 0.3rem;
     border-radius: 3px;
     color: white;
     border: 1px solid #7589a9;
     background-color: #687ea2;
     transition: background-color 0.1s ease;

 }

 .buttonStyle:hover {
     background-color: #586a88;
 }

 .buttonStyle:active {
     background-color: #809ac4;
     cursor: pointer;
 }


  @media (max-width: 740px) {
     main {

         min-width: 94%;
     }

     .searchDiv{
        flex-direction: column;
     }
 }