/* Eugene Kepich */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr_sky_rgb: 135, 206, 235;
  --clr_sky: rgb(var(--clr_sky_rgb));
  --clr_sky_pattern: rgba(var(--clr_sky_rgb), 0.7);
  --clr_beacon_rgb: 245, 222, 179;
  --clr_beacon: rgb(var(--clr_beacon_rgb));
  --clr_beacon_pattern: rgba(var(--clr_beacon_rgb), 0.7);
  --clr_nav: rgb(16, 96, 176);
  --clr_nav_hover: var(--clr_beacon);
  --clr_nav_text: white;
  --clr_footer: var(--clr_nav_text);
  --clr_footer_bg: var(--clr_nav);
  --clr_nav_text_hover: var(--clr_beacon);
  --clr_bag_count_bg: var(--clr_sky_pattern);
  --clr_overlay_box_header: var(--clr_nav);
  --clr_menu_category_gb: rgba(var(--clr_beacon_rgb), 0.3);

  --px_header_height: 164px;
  --px_overlay_box_header_height: 48px;
  --px_pattern_height: 400px;
  --px_pattern_beacon_width: 64px;
  --pattern_angle_offset: 18%;
  --px_pattern_beacon_offset: calc(
    (var(--px_pattern_height) - var(--px_pattern_beacon_width)) / 2
  );
  --beacon_logo_div_width: calc(var(--px_header_height) * 0.8);
  --beacon_logo_img_offset_left: 12px;
  --beacon_logo_img_offset_top: 22px;
  --bistro_logo_div_width: calc(var(--px_header_height) * 0.9);
  --bistro_logo_img_offset_right: 8px;
  --bistro_logo_img_offset_left: 0px;
  --bistro_logo_img_offset_top: 24px;

  --beacon_lamp_offset_down: 39px;
  --beacon_lamp_offset_ratio: calc(20 / 64);
  --beacon_lamp_offset_left: 30px;

  --font_roboto: "Roboto", sans-serif;
  --font_roboto_condensed: "Roboto Condensed", sans-serif;
  --font_roboto_serif: "Roboto Serif", serif;
  --font_stint_ultra_condensed: "Stint Ultra Condensed", serif;

  --html_font_family: var(--font_roboto);

  --nav_height: 48px;
  --nav_font_family: var(--font_roboto_condensed);
  --nav_font_size: 1.5rem;
  --nav_gap: clamp(30px, 3vw, 80px);

  --px_overlay_box_header_height: 28px;
  --overlay_box_header_font_size: 1rem;
  --overlay_box_header_font_family: var(--font_roboto_condensed);
}

html {
  font-size: 16px;
  font-family: var(--html_font_family);
  font-weight: 400;
  font-style: normal;
  /* scroll-behavior: smooth; */
}

body {
  min-width: 320px;
  max-width: 1980px;
  /* background-color: var(--clr_sky_pattern); */
  /* color: lightgray; */
  margin: 0 auto;
}

.body_visible {
  background-color: var(--clr_sky_pattern);
}

a,
div {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  touch-action: manipulation;
}

.header_container {
  height: var(--px_header_height);
  width: 100%;
  position: relative;
}

.header_main {
  background-color: var(--clr_sky);
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.beacon_logo_div {
  width: var(--beacon_logo_div_width);
  height: 100%;
}

.beacon_logo_img {
  width: 100%;
  margin-left: var(--beacon_logo_img_offset_left);
  margin-top: var(--beacon_logo_img_offset_top);
}

.beacon_container {
  margin-left: calc(-1 * var(--beacon_lamp_offset_left));
  height: 100%;
  flex: 1;
  background-color: var(--clr_beacon);
  display: flex;
  justify-content: flex-end;
  clip-path: polygon(
    calc(
        var(--beacon_lamp_offset_ratio) * (100% - var(--bistro_logo_div_width))
      )
      0,
    100% 0,
    100% 100%,
    calc(100% - var(--bistro_logo_div_width)) 100%,
    0 var(--beacon_lamp_offset_down)
  );
}

.bistro_logo_div {
  width: var(--bistro_logo_div_width);
  height: 100%;
  padding-right: var(--bistro_logo_img_offset_right);
}

.bistro_logo_img {
  width: 100%;
  margin-top: var(--bistro_logo_img_offset_top);
  margin-left: var(--bistro_logo_img_offset_left);
}

.restaurant_name_div {
  /* background-color: lightslategray; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  /* column-gap: 20px; */
  row-gap: 0px;
  /* padding: 20px; */
  z-index: 5;
  white-space: nowrap;
}

.restaurant_name_div h1 {
  font-family: var(--font_roboto_serif);
  font-size: 4rem;
  font-weight: 400;
  color: var(--clr_nav);
}

.restaurant_name_div h2 {
  font-family: var(--font_roboto);
  font-size: 1rem;
  font-weight: 500;
  color: black;
  margin-top: -8px;
}

.nav_container {
  height: var(--nav_height);
  width: 100%;
  background-color: var(--clr_nav);
  font-family: var(--nav_font_family);
  font-size: var(--nav_font_size);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav_main {
  margin-left: 16px;
  margin-right: 4px;
}

.nav_main ul {
  display: flex;
  list-style: none;
  gap: var(--nav_gap);
  align-items: center;
}

.nav_main li {
  line-height: var(--nav_height);
  display: inline-block;
}

.nav_main li a {
  text-decoration: none;
  color: var(--clr_nav_text);
}

.nav_main li a:hover {
  color: var(--clr_nav_text_hover);
}

.the_beacon_welcome {
  font-family: var(--font_stint_ultra_condensed);
  font-size: calc(1.3 * var(--nav_font_size));
  display: none;
}

.align-right {
  margin-left: auto;
}

.cart a {
  /* background-color: lightseagreen; */
  display: flex;
  align-items: center;
  text-decoration: none;
}

.bag_count {
  margin-left: -5px;
  background-color: var(--clr_sky_pattern);

  text-align: center;
  clip-path: circle(25% at 50% 50%);
  width: var(--nav_height);
  height: var(--nav_height);
  font-family: var(--font_roboto);
  font-size: 1rem;
  /* background-color: green; */
}

.bag_icon,
.reservations_icon,
.menu_icon,
.beacon_icon,
.order_icon {
  width: calc(var(--nav_height) * 0.7 * 0.7);
  display: none;
  align-items: center;
  justify-content: center;
}

.bag_icon {
  width: calc(var(--nav_height) * 0.7 * 0.75);
  height: 100%;
}

.beacon_icon {
  width: calc(var(--nav_height) * 0.65 * 0.7);
}

.order_icon {
  width: calc(var(--nav_height) * 0.77 * 0.7);
}

.bag_img,
.reservations_img,
.order_img,
.menu_img,
.beacon_img {
  width: 100%;
  height: auto;
  filter: invert(100%) brightness(100%);
}

.bag_img:hover,
.reservations_img:hover,
.order_img:hover,
.menu_img:hover,
.beacon_img:hover {
  filter: invert(91%) sepia(16%) saturate(657%) hue-rotate(314deg)
    brightness(95%) contrast(89%);
}

.pattern_1 {
  background-color: var(--clr_beacon_pattern);
  height: var(--px_pattern_height);
  width: 100%;
  position: relative;
  z-index: 5;
  clip-path: polygon(
    0 var(--px_pattern_beacon_offset),
    100% var(--pattern_angle_offset),
    100% calc(100% - var(--pattern_angle_offset)),
    0 calc(100% - var(--px_pattern_beacon_offset))
  );
}

.pattern_2 {
  background-color: var(--clr_beacon_pattern);
  height: var(--px_pattern_height);
  width: 100%;
  position: relative;
  z-index: 1;
  clip-path: polygon(
    0 var(--pattern_angle_offset),
    100% var(--px_pattern_beacon_offset),
    100% calc(100% - var(--px_pattern_beacon_offset)),
    0 calc(100% - var(--pattern_angle_offset))
  );
}

.main_content_container {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.main_content_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  z-index: 1;
  pointer-events: none;
}

.menu_content {
  display: none;
}

.main_content,
.menu_content {
  position: relative;
  z-index: 3;
  margin: 10px;
}

.main_content {
  display: grid;
  grid-template-areas:
    "main aside1"
    "main aside2";
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto auto;
  grid-auto-columns: minmax(200px, auto);
}

.main_container h1,
aside h1 {
  padding: 10px;

  color: var(--clr_nav);
  text-align: center;
  margin-bottom: 10px;
}

.main_container img {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  /* opacity: 0.85; */
}

blockquote {
  font-family: var(--font_roboto_serif);
}

.news_container p {
  font-size: 1rem;
}

aside h2 {
  text-align: center;

  margin-bottom: 10px;
}

.main_container p,
aside p {
  margin-top: 10px;
  margin-bottom: 10px;
}

.main_container,
.news_container,
.feedback_container {
  margin: 24px;
}

.main_container {
  grid-area: main;
}

.news_container {
  grid-area: aside1;
}

.feedback_container {
  grid-area: aside2;
}

.main_image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 1440px) {
  .main_content {
    grid-template-areas:
      "main aside1"
      "aside2 aside2";
    grid-template-columns: 1fr 1fr;
  }
  .news_container p {
    font-size: 1.2rem;
  }
  .main_container h1 {
    font-family: var(--font_roboto_condensed);
    font-size: 1.8rem;
  }
  aside h2 {
    font-family: var(--font_roboto_condensed);
  }
}

@media (max-width: 600px) {
  .main_content {
    grid-template-areas:
      "main"
      "aside1"
      "aside2";
    grid-template-columns: 1fr;
  }
  .main_container h1 {
    font-family: var(--font_roboto_condensed);
    font-size: 1.5rem;
  }
  .news_container p {
    font-size: 1rem;
  }
}

.shadow_overlay {
  /* display: none; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 15;
  /* pointer-events: none; */
  /* user-select: none; */
}

@media (max-width: 750px) {
  .restaurant_name_div h1 {
    font-family: var(--font_stint_ultra_condensed);
  }
  .restaurant_name_div h2 {
    font-family: var(--font_roboto_condensed);
  }
}

@media (max-width: 550px) {
  .restaurant_name_div {
    display: none;
  }

  .reservations_title {
    display: none;
  }

  .reservations_icon {
    display: flex;
  }

  :root {
    --nav_height: 56px;
  }

  .nav_main li {
    line-height: var(--nav_height);
  }

  .order_title,
  .menu_title,
  .reservations_title,
  .beacon_title,
  .bag_title {
    display: none;
  }

  .the_beacon_welcome {
    display: inline;
  }

  .order_icon,
  .menu_icon,
  .reservations_icon,
  .bag_icon {
    display: flex;
  }
}

@media (max-width: 500px) {
  .order_title,
  .menu_title {
    display: none;
  }

  .order_icon,
  .menu_icon {
    display: flex;
  }
}

/* begin style for universal popup dialog box */
.box_overlay {
  /* display: none; */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 1300px;
  /* max-height: 1000px; */
  max-height: 80%;
  /* background-color: lightgrey; */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  /* background-color: var(--clr_sky_pattern); */
  z-index: 15;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#checkout_overlay {
  width: 500px;
}

@media (max-width: 600px) {
  .box_overlay,
  #checkout_overlay {
    width: 100%;
    max-height: 100%;
  }
}

.box_header {
  background-color: var(--clr_nav);
  padding: 10px;
  width: 100%;
  display: flex;
  /* centers header text, aligns close button to right */
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}

.box_header_text {
  color: white;
}

.box_close_button {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.box_close_img {
  width: 100%;
  height: auto;
  filter: invert(100%);
}

.box_close_img:hover {
  filter: invert(91%) sepia(16%) saturate(657%) hue-rotate(314deg)
    brightness(95%) contrast(89%);
}

.box_content {
  background-color: var(--clr_sky_pattern);
  /* padding: 20px; */
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.box_footer {
  background-color: var(--clr_nav);
  padding: 10px;
  width: 100%;
  text-align: center;
  color: white;
  position: sticky;
  bottom: 0;
}

/* end style for universal popup dialog box */

/* start style for menu categories */
.menu_category_container {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.menu_category_container > div {
  /* position: relative; */
  background-color: var(--clr_menu_category_gb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  /* padding-bottom: 60px; */
}
.menu_category_heading {
  background-color: var(--clr_sky);
  color: var(--clr_nav);
  /* color: black; */
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.menu_category_image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.menu_category_image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.menu_category_description {
  margin: 10px 0;
}

.menu_category_button,
.box_footer_button_1,
.box_footer_button_2,
.box_footer_button_3 {
  /* position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);  */

  background-color: cornflowerblue;
  color: white;
  margin: 0px 0px;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  font-size: var(--overlay_box_header_font_size);
}

.menu_category_button {
  background-color: var(--clr_nav);
}

.box_footer_button_1,
.box_footer_button_2,
.box_footer_button_3 {
  padding: 10px 8px;
}

.menu_category_button:hover,
.box_footer_button_1:hover,
.box_footer_button_2:hover,
.box_footer_button_3:hover {
  /* background-color: var(--clr_sky); */
  color: var(--clr_beacon);
}

@media (min-width: 901px) {
  .menu_category_container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .menu_category_container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .menu_category_container {
    grid-template-columns: 1fr;
  }
}

/* end style for menu categories */

/* start style for dish selection */

.dish_item_container {
  display: flex;
  width: 90%;
  /* max-width: 70%; */
  margin: 30px auto;
  padding: 30px;

  /* margin-right: 40px; */
  background-color: var(--clr_beacon_pattern);
  /* border: 1px solid #ccc; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dish_image_container {
  flex: 1;
  max-width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dish_image_container > img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.dish_item_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  /* background-color: var(--clr_sky_pattern); */
}

.dish_item_description {
  margin-bottom: 10px;
}

.dish_item_button {
  text-align: center;
}

.dish_item_heading {
  font-size: 1rem;
  font-weight: bold;
  color: var(--clr_nav);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.dish_item_price {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--clr_nav);
  margin-bottom: 1rem;
  text-align: center;
}

.dish_item_button > button {
  padding: 10px 20px;
  background-color: var(--clr_nav);
  color: white;
  border: none;
  cursor: pointer;
  font-size: var(--overlay_box_header_font_size);
}

.dish_item_button > button:hover {
  color: var(--clr_beacon);
}

@media (max-width: 768px) {
  /* .container {
      max-width: 100vw;
  } */

  .dish_item_container {
    flex-direction: column;
  }

  .dish_image_container {
    max-width: 100%;
  }
}

/* end style for dish selection */

.status_message {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 128, 0, 0.5);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
  z-index: 9000;
}

.error_message {
  background-color: rgba(255, 0, 0, 0.6);
}

.empty_cart,
.order_done {
  /* opacity: 1; */
  line-height: 10rem;
  margin: 0px auto;
  font-size: 1.5rem;
  text-align: center;
  background-color: var(--clr_sky_rgb);
  color: white;
}

.order_done {
  padding-top: 30px;
  padding-bottom: 30px;
  line-height: 2rem;
}

#debug {
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);

  font-size: 0.5rem;
  text-align: center;
  border-radius: 10px;
  pointer-events: none;
  z-index: 9999;
}

/* begin style for shopping cart */
/* Container for the cart */
.cart_table_container {
  background-color: var(--clr_beacon_pattern);
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bag_category_table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.bag_category_table tbody tr {
  height: 3rem;
  vertical-align: middle;
}

.bag_category_header {
  background-color: var(--clr_sky_pattern);
  color: var(--clr_nav);
  font-weight: bold;
  text-align: left;
  padding: 10px;
  /* margin-top: 50px; */
}

/* Cart item rows */

.bag_remove_column,
.bag_dish_price,
.bag_dish_qty,
.bag_dish_controls,
.bag_dish_total {
  width: 7rem;
  text-align: center;
}

.bag_dish_price {
  width: 6rem;
}

.bag_remove_column {
  width: 4rem;
}

.bag_dish_name {
  font-size: 1.2rem;
}

.bag_dish_qty {
  width: 1.5rem;
}

.bag_dish_controls {
  width: 1rem;
}

.bag_dish_name {
  width: auto;
  text-align: left;
}

.bag_remove_button {
  background-color: darkred;
  color: white;
  width: 2rem;
  height: 2rem;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.bag_add_button,
.bag_sub_button {
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  /* border-radius: 50%; */
  /* display: inline-block; */
}

.bag_add_button {
  background-color: forestgreen;
}

.bag_sub_button {
  background-color: darkred;
}

@media (max-width: 500px) {
  .bag_category_table tbody tr {
    height: 3rem;
    vertical-align: middle;
  }

  /* category heading row */
  .bag_category_header {
    background-color: var(--clr_sky_pattern);
    color: var(--clr_nav);
    font-weight: bold;
    text-align: left;
    padding: 10px;
    /* margin-top: 50px; */
  }

  /* fixed width columns */
  .bag_remove_column,
  .bag_dish_price,
  .bag_dish_qty,
  .bag_dish_controls,
  .bag_dish_total {
    width: 3.5rem;
    text-align: center;
  }

  .bag_dish_price {
    width: 3rem;
  }

  .bag_remove_column {
    width: 1.5rem;
  }

  .bag_dish_name {
    font-size: 1.2rem;
  }

  .bag_dish_qty {
    width: 1.2rem;
  }

  .bag_dish_controls {
    width: 0.5rem;
  }

  /* Flexible width for item name */
  .bag_dish_name {
    width: auto;
    text-align: left;
  }

  /* remove button */
  .bag_remove_button {
    background-color: darkred;
    color: white;
    width: 1.2rem;
    height: 1.2rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
  }

  /* quantity buttons */
  .bag_add_button,
  .bag_sub_button {
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    /* border-radius: 50%; */
    /* display: inline-block; */
  }

  .bag_add_button {
    background-color: forestgreen;
  }

  .bag_sub_button {
    background-color: darkred;
  }

  .bag_dish_name {
    font-family: var(--font_roboto_condensed);
    font-size: 0.9rem;
  }

  .bag_dish_price,
  .bag_dish_qty,
  .bag_dish_total {
    font-family: var(--font_roboto_condensed);
    font-size: 0.85rem;
  }
}

/* end style for shopping cart */

/* begin style for checkout */

/* order total Section */
.order_total_section {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  /* background-color:  */
}

.order_total_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

.order_total_heading {
  background-color: #007bff;
  /* color: white; */
  padding: 0.5rem;
  text-align: center;
}

.order_total_table td {
  padding: 0.5rem;
  text-align: right;
}

/* Order Form Section */
.order_form_section {
  width: 100%;
  padding: 1rem;
}

.order_form_row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.order_form_row label {
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.order_input,
.order_textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.order_input_small {
  width: calc(50% - 0.5rem);
  margin-right: 0.5rem;
  display: inline-block;
}

.order_textarea {
  min-height: 80px;
  resize: vertical;
}

.order_form_instruction {
  font-size: 0.8rem;
  color: lightslategray;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}

/* end style for checkout */

.order_error {
  border: 2px solid rgba(255, 0, 0, 0.6);
  background-color: #ffe6e6;
}

/* begin footer containers */
footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--clr_footer_bg);
  color: var(--clr_footer);
  box-sizing: border-box;
  /* text-align: left; */
  height: calc(1.5 * var(--nav_height));
}

.footer_container {
  display: flex;
  align-items: center;
  height: 100%;
  /* text-align: left; */
}

.footer_left_container {
  justify-content: flex-start;
  /* text-align: left; */
}

.footer_right_container {
  justify-content: flex-end;
  /* text-align: right; */
}

.footer_sub_container {
  margin: 0 10px;
  /* text-align: left; */
}

.beacon_1 {
  font-family: var(--font_stint_ultra_condensed);
  font-size: 2rem;
  height: auto;
}

.beacon_2 {
  font-family: var(--font_roboto);
  font-size: 0.8rem;
  height: auto;
}

.face_2 {
  width: 5rem;
}

footer a {
  /* margin-left: 0.5rem; */
  text-decoration: none;
}

footer a img {
  /* display: inline-block; */
  width: 2rem;
  height: 2rem;
  filter: invert(100%);
}

footer a img:hover {
  filter: invert(91%) sepia(16%) saturate(657%) hue-rotate(314deg)
    brightness(95%) contrast(89%);
}

@media (max-width: 600px) {
  footer {
    /* flex-direction: column; */
    /* align-items: center;  */
  }

  .footer_container {
    flex-direction: column;
    /* align-items: center;  */
    height: auto;
  }

  .footer_right_container {
    /* align-items: center; */
  }

  footer a img {
    /* display: inline-block; */
    width: 1.8rem;
    height: 1.8rem;
  }

  .beacon_1 {
    font-size: 1.45rem;
    margin-left: -4px;
    margin-top: -2px;
  }
  .beacon_2 {
    font-size: 0.5rem;
  }

  .face_1 {
    margin-top: -2px;
    margin-bottom: 3px;
    margin-left: -1px;
    font-size: 0.8rem;
  }
}

/* cart summary styles*/
.bag_summary {
  background-color: wheat;
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: darkblue;
  text-align: right;
}