@media (prefers-color-scheme: light) { 
  body {
    background: var(--c15);
    color: var(--c18) !important;

    --color: #e1e1e15c;
    background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
        linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
    background-size: 55px 55px;
  }


.xbutton {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #e8e8e8;
  border: 1.6px solid #e2e2e2;
  box-shadow: 6px 6px 10px #c5c5c5, -6px -6px 12px #ffffff;
  transform: skewX(-5deg);
  position: relative;
  overflow: hidden;
}

  .xbutton::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.5s, filter 0.5s;
  }

  .xbutton:hover::before {
    filter: blur(10px);
    opacity: 1;
    animation: animateBorder 8s linear infinite;
    border: 4px solid rgb(255, 255, 255);
  }

  /*.xbutton:hover {
    color: #fff;
  }*/

  @keyframes animateBorder {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
  }

  .xspan {
    color: black;
    letter-spacing: 3px;
    font-size: 18px;
  }

  .xbutton:active {
    box-shadow: 5px 5px 12px #cfcece, -4px -4px 12px #fcfcfc;
  }

  .xbutton:hover {
    color: #fff;
    text-shadow: 1px 1px 2px black;
  }


  footer.page-footer, footer.page-footer a, footer.page-footer .footer-copyright {
    color: var(--c18);
  }

  .modal-content {
    background: var(--c15) !important;
  }

    /*導覽列*/
  .nav_background {
      background: var(--c1);
  }

  .nav_text {
      color: var(--c2) !important;
  }

  .navbar.navbar-dark form .md-form input {
      border-bottom: 1px solid var(--c2); 
  }

  .dropdown-item:hover {
      background-color: var(--c1) !important;
  }

  .footer-copyright {

  }

  /*下拉清單文字*/
  .dropdown .dropdown-menu .dropdown-item:hover {
      color: var(--c2) !important;
  }


  .nav_text::placeholder {
      color:  var(--c2) !important;
      opacity: 1;
  }

  /*主標題*/
  .clabel {
      color: var(--c3);
  }

  /*邊匡*/
  .title_col {
      border-left: solid 4px var(--c3);
  }

  /*副標題*/
  .elabel {
      color:  var(--c4);
  }

  /*按鈕色*/
  .btn-blue-grey, .input-group-text {
      background-color: var(--c5) !important;
  }

  /*focus*/
  .btn-blue-grey:not([disabled]):not(.disabled):active, .btn-blue-grey:not([disabled]):not(.disabled).active, .show>.btn-blue-grey.dropdown-toggle {
      background-color:  var(--c5) !important;
      filter: brightness(0.8);
  }

  /*dropdown*/
  .btn-blue-grey.dropdown-toggle {
      background-color: var(--c1) !important;
  }

  .btn-blue-grey.dropdown-toggle:hover {
      background-color:  var(--c1) !important;
      filter: brightness(0.8);
  }

  .btn-blue-grey.dropdown-toggle:focus {
      background-color:  var(--c1) !important;
      filter: brightness(0.8);
  }


  /*輪播按鈕*/
  .carousel-multi-item .carousel-indicators li {
      background-color: var(--c5);
  }

  .carousel-multi-item .carousel-indicators .active {
      background-color: var(--c5);
  }

  /*按鈕文字*/
  .btn-blue-grey, .input-group-text {
      color: var(--c6);
  }

  /*分頁按鈕*/
  .pagination .page-item.active .page-link {
      background-color: var(--c5);
      color: var(--c6);
  }


  /*目錄色*/
  .main_item span {
      color:  var(--c7) !important;
  }

  /*數量色*/
  .list-badge {
      background-color: var(--c8);
  }

  /*footer*/
  .page-footer {
      background-color: var(--c9);
  }

  /*card*/
  .card-back {
      background-color: var(--c15);
  }

  .footer-text {
       color:  var(--c10) !important;
  }

  /*商品名*/
  .prodname {
      color:  var(--c12);
  }


  /*特價*/
  .sprice-text {
      color:  var(--c13);
  }

  /*原價*/
  .price-text {
      color:  var(--c14);
  }

  /*大螢幕導覽列*/
  .sub_nav {
      background: var(--c16);
      background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.35) 1px, transparent 0);
      background-size: 20px 20px;
  }


  .dropdown-menu {
      background-color: var(--c19);
  }

  /*分享按鈕*/
  .btn-share {
      background-color: var(--c17);
  }


  #slide-out a, #plinks a {
    color: var(--c18);
  }


  #pmodal {
    background: #adadad;
  }



#pmodal {
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.35) 1px, transparent 0);
  background-size: 20px 20px;
}

footer.page-footer {
      background: rgb(210 199 177 / 91%);
      background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.35) 1px, transparent 0);
      background-size: 20px 20px;
      box-shadow: rgba(0, 0, 0, 0.4) 0px -2px 4px, rgba(0, 0, 0, 0.3) 0px -7px 13px -3px, rgba(0, 0, 0, 0.2) 0px 3px 0px inset;
     
}

/*  商品頁陰影效果*/
  #pmodal .container.modal-content {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }


  .navbar.nav2, #pmodal {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }

  .footer-copyright {
    background: var(--c1) !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px -2px 4px, rgba(0, 0, 0, 0.3) 0px -7px 13px -3px, rgba(0, 0, 0, 0.2) 0px 3px 0px inset;
  }


  /*  menu button*/
  #menu_btn {
      border-radius: 6px;
      border: 3px solid black;
      cursor: pointer;
  }


@media (min-width: 1200px) {

        /*body {
            background-image: var(--page_name1);
            background-repeat: no-repeat;
            background-size: contain;
        }*/

    }




  /*  訂單紀錄*/
  #orderEx .card-body {
      background: #cce9e9;
      box-shadow: inset rgb(43 5 5 / 51%) 0px 20px 20px -20px;
  }


  #orderEx .card-header {
    background-color: white;
  }

  #orderEx small {
      font-size: .9rem;
  }


  #full_menu {
    background: linear-gradient(to bottom, #c9d6ff, #e2e2e2);
  }

  .menu_logo {
      filter: drop-shadow(2px 2px 2px #fff);
  }


  @media (hover: hover) and (pointer: fine) {
    #full_menu h4:hover {
        background: #737d9c;
        color: white;
    }

    /*#menu_group a:hover {
      color: #dc7184 !important;
    }*/

    /*#menu_group .light_btn:hover span.btn_label {
      display: inline-block !important;
    }

    .user-dd:hover .btn_label,
    .user-dd.show .btn_label,
    .user-dd:focus-within .btn_label,
    .user-dd:has(.dropdown-menu:hover) .btn_label{
      display: inline-block !important;
    }*/

  }


  .blog_row img {
    border-radius: 8px;
    padding: 1rem;
    box-shadow: inset rgb(193 193 193 / 46%) 0px 1px 3px 0px, rgb(44 44 44 / 33%) 0px 4px 2px, rgb(89 89 89 / 14%) 0px 8px 4px, rgb(74 74 74 / 41%) -1px 9px 15px 0px, rgb(35 76 98 / 0%) 0px 32px 16px 0px;
  }


  .last_target {
     background: pink;
  }


  .light_btn {
    border-radius: 6px;
    margin-top: 6px;
    width: fit-content;
    color: #525252;
    background-color: #fffef8;
    border: 1px solid #ececec;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 6px 2px, rgba(0, 0, 0, 0.09) 0px 1px 1px, rgba(0, 0, 0, 0.09) 0px 6px 8px;
  }


}