@import "https://db.onlinewebfonts.com/c/130a63bec7d0efc605bbe6253a27de98?family=InspireTWDC";
html {
  color-scheme: light dark;
  min-height: 100%;
  font-family: InspireTWDC, sans-serif;
}

body {
  --global-background: #2d2f36;
  --background: #00000095;
  --shadow-1: #000000f4;
  min-height: 100%;
}

img {
  overflow-clip-margin: content-box;
  border-radius: inherit;
  width: 100%;
  overflow: clip;
}

li {
  margin-bottom: 4px;
}

li .header {
  margin: 8px 0;
  font-size: 18px;
}

:focus {
  outline-offset: 2px;
  border-radius: 4px;
  outline: 2px solid #fff;
}

.instructions {
  margin: 10px;
}

.instructions > ul {
  margin-top: 4px;
  padding-inline-start: 20px;
}

.instructions h3 {
  margin-bottom: 2px;
  font-size: 20px;
}

.view {
  color: #fff;
  background-color: #17171b;
  width: 1080px;
  padding: 8px;
}

.collection-title {
  margin-bottom: 6px;
  margin-left: 12px;
  font-family: InspireTWDC;
}

.tile {
  aspect-ratio: 16 / 9;
  scroll-snap-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
  background-color: var(--global-background);
  opacity: 0;
  width: 303px;
  height: auto;
  transform-style: preserve-3d;
  view-transition-class: tile;
  border-radius: 4px;
  flex-shrink: 0;
  align-content: center;
  justify-items: center;
  margin: 10px;
  transition: transform .5s ease-in-out;
  animation: .3s cubic-bezier(.175, .885, .32, 1.275) .5s forwards bounceIn;
  position: relative;
  transform: scale(1)translateZ(0);
}

.tile:focus-visible {
  transform: scale(1.05)translateZ(0)translateZ(0);
}

a .tile {
  height: fit-content;
}

.tile-row {
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-flow: row;
  padding-left: 8px;
  display: flex;
  overflow-x: scroll;
}

.tile-row::-webkit-scrollbar {
  display: none;
}

.tile-row:focus {
  outline: none;
}

.tile-image {
  border-radius: inherit;
  aspect-ratio: 16 / 9;
  width: 100%;
  animation: .3s ease-in forwards fadeIn;
  display: block;
}

.tile-content {
  background-color: var(--global-background);
  border-radius: inherit;
  justify-content: center;
  align-items: center;
  max-height: 100%;
  position: relative;
}

video {
  border-radius: 4px;
  animation: .3s ease-in forwards fadeIn;
}

.video-text {
  z-index: 2;
  animation: .5s ease-in forwards fadeInUp;
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.background-container {
  background-color: var(--global-background);
  border-radius: 8px;
  width: 500px;
  height: 281px;
  position: relative;
}

.background-container:before {
  content: "";
  border-radius: inherit;
  aspect-ratio: 16 / 9;
  background-image: linear-gradient(to left, #12121200 40%, #121212 100%), linear-gradient(#12121200 20%, #121212 100%);
  width: 500px;
  position: absolute;
}

.background-title-container {
  z-index: 2;
  align-content: end;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.background-title {
  width: 200px;
  margin: 30px 40px;
}

.image-placeholder-text {
  padding: 20px;
}

.modal-overlay {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  animation: 1s cubic-bezier(.165, .84, .44, 1) forwards unfoldIn;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  transform: scaleY(.01)scaleX(0);
}

.modal-background {
  background: #00000095;
  background: var(--background);
  align-content: center;
  justify-items: center;
  width: 100%;
  height: 100%;
}

.modal {
  animation: .5s cubic-bezier(.165, .84, .44, 1) .8s forwards zoomIn;
  transform: scale(0);
}

.modal-overlay.out {
  animation: 1s cubic-bezier(.165, .84, .44, 1) .3s forwards unfoldOut;
  transform: scale(1);
}

.modal-overlay.out .modal-background .modal {
  animation: .5s cubic-bezier(.165, .84, .44, 1) forwards zoomOut;
}

.modal {
  width: 100%;
  max-width: 500px;
  box-shadow: 0rem 0rem 2.4rem .5rem var(--shadow-1);
  background: #121212;
  border-radius: 8px;
  padding-bottom: 8px;
  position: relative;
}

.modal-button {
  font-family: inherit;
  font-size: inherit;
  color: #fff;
  z-index: 10;
  background: none;
  border: none;
  flex-direction: row;
  align-items: center;
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.modal-button p {
  margin: 0;
  padding: 0;
}

.modal-button span {
  display: flex;
}

.modal-button svg {
  fill: #fff;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  transition: transform .3s ease-in-out;
}

.modal-button:focus {
  outline: none;
  text-decoration: underline;
}

.chip-row {
  flex-wrap: wrap;
  padding: 8px 8px 8px 20px;
  display: flex;
}

.chip {
  color: #fff;
  background-color: #535151;
  border-radius: 4px;
  margin: 4px;
  padding: 4px 8px;
  font-size: 14px;
  transition: transform .3s ease-in-out;
  display: inline-block;
}

html:active-view-transition-type(ArrowUp, ArrowDown, ArrowLeft, ArrowRight) {
  & :root {
    view-transition-name: none;
  }

  & .tile-row {
    view-transition-name: content;
  }
}

html:active-view-transition-type(ArrowDown) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-top;
  }

  &::view-transition-new(content) {
    animation-name: slide-in-from-bottom;
  }
}

html:active-view-transition-type(ArrowUp) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-bottom;
  }

  &::view-transition-new(content) {
    animation-name: slide-in-from-top;
  }
}

html:active-view-transition-type(ArrowLeft, ArrowRight) {
  &::view-transition-old(content) {
    display: none;
  }

  &::view-transition-new(content) {
    mix-blend-mode: normal;
    animation: none;
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scaleX(.55)scaleY(.89);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(.005)scaleX(0);
  }

  50% {
    transform: scaleY(.005)scaleX(1);
  }

  100% {
    transform: scaleY(1)scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1)scaleX(1);
  }

  50% {
    transform: scaleY(.005)scaleX(1);
  }

  100% {
    transform: scaleY(.005)scaleX(0);
  }
}

@keyframes slide-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(-200px);
  }
}

@keyframes slide-in-from-top {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
}

@keyframes slide-out-to-bottom {
  to {
    opacity: 0;
    transform: translateY(-200px);
  }
}

@keyframes slide-out-to-top {
  to {
    opacity: 0;
    transform: translateY(200px);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/*# sourceMappingURL=bbd-app.79787353.css.map */