@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap);
html, body {
  font-family: "Source Han Sans TC", "Noto Sans TC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-image: url(https://storage.qubic.market/partners/timeverse/timeverse-bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left 0 bottom -120px; }
  @media screen and (max-width: 576px) {
    html,
    body {
      background-size: 130% auto;
      background-position: left 50% bottom 160px; } }

.navbar {
  background-color: unset; }
  .navbar::before {
    backdrop-filter: none;
    background-image: linear-gradient(180deg, #0b111b 0, #0b111b 80%, transparent); }
  .navbar .navbar-brand img {
    max-height: 100px; }
  .navbar .nav-link:not(.non-link):hover {
    opacity: 1; }

@media (min-width: 768px) {
  .navbar-expand-md.navbar .navbar-brand img {
    max-height: 160px; }
  .navbar-expand-md.navbar .nav-link {
    position: relative;
    font-size: 20px; }
    .navbar-expand-md.navbar .nav-link:not(.non-link)::after {
      content: "";
      height: 4px;
      background-image: linear-gradient(90deg, #26afe6, #fe3dce);
      transition: right 0.3s;
      border-radius: 4px;
      position: absolute;
      bottom: -10px;
      left: var(--qb-navbar-nav-link-padding-x);
      right: 100%; }
    .navbar-expand-md.navbar .nav-link:hover::after {
      right: var(--qb-navbar-nav-link-padding-x); }
  .navbar-expand-md.navbar .offcanvas {
    align-self: center; }
    .navbar-expand-md.navbar .offcanvas .offcanvas-body {
      background-color: unset; } }

@media (min-width: 992px) {
  .navbar-expand-lg.navbar .navbar-brand img {
    max-height: 160px; }
  .navbar-expand-lg.navbar .nav-link {
    position: relative;
    font-size: 20px; }
    .navbar-expand-lg.navbar .nav-link:not(.non-link)::after {
      content: "";
      height: 4px;
      background-image: linear-gradient(90deg, #26afe6, #fe3dce);
      transition: right 0.3s;
      border-radius: 4px;
      position: absolute;
      bottom: -10px;
      left: var(--qb-navbar-nav-link-padding-x);
      right: 100%; }
    .navbar-expand-lg.navbar .nav-link:hover::after {
      right: var(--qb-navbar-nav-link-padding-x); }
  .navbar-expand-lg.navbar .offcanvas {
    align-self: center; }
    .navbar-expand-lg.navbar .offcanvas .offcanvas-body {
      background-color: unset; } }

.footer {
  background-color: unset;
  background-image: linear-gradient(0deg, #0b111b 0, #0b111b 50%, rgba(11, 17, 27, 0)); }
  .footer .container {
    position: relative; }
    .footer .container > hr {
      visibility: hidden; }
  .footer .footer-main {
    position: absolute;
    width: 100%;
    justify-content: center;
    top: 4em; }
    .footer .footer-main .footer-brand {
      display: none; }
    .footer .footer-main .nav {
      font-size: 14px;
      font-weight: 300; }
    @media (min-width: 576px) {
      .footer .footer-main .nav-link {
        --qb-nav-link-padding-y: 0;
        line-height: 1.15; }
        .footer .footer-main .nav-link:not(:last-child) {
          border-right: 2px solid var(--footer-color); } }
  .footer .footer-social {
    margin-bottom: 12em; }
    @media (min-width: 576px) {
      .footer .footer-social {
        margin-bottom: 6em; } }
    .footer .footer-social .icon::before {
      opacity: 0; }

.card {
  --qb-card-box-shadow: none;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(135deg, #26afe6, rgba(254, 61, 206, 0.25) 30%, rgba(254, 61, 206, 0) 63%, rgba(254, 61, 206, 0));
  background-size: 200%;
  background-position: 30% 0; }

.btn.btn-primary {
  color: #ffffff;
  background-image: linear-gradient(90deg, #26afe6 0, #fe3dce 50%, #26afe6);
  background-size: 200%;
  background-position: 0;
  transition: background-position 0.3s;
  border-color: transparent; }
  .btn.btn-primary:hover {
    background-position: 100%; }

.tag-filter .swiper-slide .btn-outline-primary.selected {
  background-image: linear-gradient(90deg, #26afe6 0, #fe3dce 50%, #26afe6);
  background-size: 200%;
  background-position: 0;
  border-color: transparent; }

.product .product-media-card {
  top: 12em; }

.product .product-name {
  font-size: 2rem; }

.asset-traits .trait {
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 20px; }

@media (min-width: 1200px) {
  .login-section {
    max-width: 540px;
    margin: auto;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: var(--card-border-radius); }
    .login-section .login-brand {
      filter: drop-shadow(0 4px 16px #000); } }

:root {
  --body-bg: #0b111b;
  --body-color: #ffffff;
  --primary: #fe3dce;
  --secondary: #26afe6;
  --card-bg: rgba(0, 0, 0, 0.5);
  --btn-border-radius: 10px;
  --btn-border-width: 3px;
  --navbar-bg: #0b111b;
  --navbar-color: #ffffff;
  --footer-bg: #0b111b;
  --footer-color: #ffffff; }