@import url("https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap");

/* html,
        body {
            max-width: 100%;
            overflow-x: hidden;
        }
         */

.mt-6 {
  margin-top: 4rem !important;
}

.mt-7 {
  margin-top: 6rem !important;
}

.mt-8 {
  margin-top: 8rem !important;
}

body {
  font-family: "Hina Mincho", serif;

  background: #000;
  color: #ccc;

  font-size: 1.5rem;
}

#logo-section-desktop {
  position: relative;
  width: 530px;
  height: 430px;
  /* background-color: red; */
  transform-origin: center center;
  /* display: block; */
}

#sketch-holder {
  position: absolute;
  transform: translate(1%, 0) scale(0.7);
  transform-origin: top right;
  right: 0;
  top: 0;
  height: fit-content;
  width: fit-content;
}

#label-en {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-80%, 50%);

  font-weight: 450;
  font-size: 3rem;
  color: #ccc;
  text-align: right;
  line-height: 100%;
}

#label-jp {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-32%, 114%);

  font-size: 2.5rem;
  color: #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 100%;
}

.sticky-col {
  position: sticky;
  top: 1rem;
  height: 100vh;
}

@media (max-width: 575px) {
  .sticky-col {
    position: relative;
    height: max-content;
  }

  #logo-section-desktop {
    position: relative;
    width: 500px;
    height: 430px;
  }

  #sketch-holder {
    position: absolute;
    transform: translate(0%, 0%) scale(0.83);
    transform-origin: left bottom;
    left: 0;
    top: 0;
  }

  #label-en {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
    text-align: left;
  }

  #label-jp {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-0%, 105%);
  }
}

a {
  text-decoration: none;
  color: #ccc;
}

.btn-clear {
  background: transparent !important;
  color: #fff !important;
  border-color: #555555;
}

.btn-clear:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #555555;
}

.rsvp-btn {
  position: relative;
  color: #fff;

  border: 1px solid #898989;
  border-radius: 8px;

  transition:
    color 0.9s ease,
    border-color 0.8s ease;
}

.rsvp-btn:hover {
  color: #73d9f5;
  border-color: #73d9f5;
}

.btn.rsvp-btn {
  background-color: transparent !important;
}

.active {
  border-color: #555555 !important;
  background: rgba(87, 87, 87, 0.205) !important;
}

.gradient-text-schedule {
  background: radial-gradient(
    circle,
    #faaedc 0%,
    /* start */ #acaaec 33%,
    /* first blend stop */ #bcf7d2 66%,
    /* second blend stop */ #ece3bc 100% /* end */
  );
  background-size: 1000% 1000%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 60s ease infinite;
}

.gradient-text {
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15);
  background-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 30s ease infinite;
}

.gradient-text-2 {
  background: linear-gradient(150deg, #ff6ec4, #facc15, #4ade80, #7873f5);
  background-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 30s ease infinite;
}

.gradient-text-space-orbit {
  background: linear-gradient(130deg, #edf8f2, #b3ffdd, #f2fff9, #caffe7);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bw {
  filter: grayscale(100%);
}

#clockLabels span {
  position: absolute;
  white-space: nowrap;
  /* font-size: 10px; */
  /* font-family: monospace; */
}

#clockLabels span.time {
  font-size: 70%;

  opacity: 0.7;
}

/* Scaling layer */
.clock-scale-wrapper {
  width: 100%;
}

/* Scale down on small screens */
@media (max-width: 768px) {
  .clock-scale-wrapper {
    transform: scale(0.8) translate(0px, -30px);
    transform-origin: center top;
  }
  
}


@media (max-width: 480px) {
  .clock-scale-wrapper {
    transform: scale(0.7) translate(-25px, -30px);
    transform-origin: left top;
  }
  #clockWrapParent {
    height: 450px !important;
  }
}

.smoll {
  font-size: smaller;
  opacity: 0.7;
}

.offcanvas {
  background-color: #000000c5;
  width: 90vw !important;
  max-width: 90vw !important;
  font-size: 3rem;
}

.offcanvas a {
  font-size: 3rem;
}

.offcanvas a span.smoll {
  font-size: 2rem;
  color: inherit;
}

.offcanvas-backdrop {
  background-color: rgba(0, 0, 0, 0.968);
}

.ticket-list {
  /* border: none; */
}

.ticket-list td {
  /* font-style:normal ; */
}

.table-unstyled {
  --bs-table-border-color: #fefefe;

  color: inherit;
  background-color: transparent;
}

.table-unstyled th,
.table-unstyled td {
  background-color: transparent !important;
  color: inherit;
  border-bottom: 1px solid #323232;
  padding: 0.25rem 0.5rem;
  font-style: inherit;

  font-size: smaller;

}