@font-face {
  font-family: Roboto;
  src: url('assets/font/Roboto-Regular.ttf');
}

.noTapHighlight {
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);	
}

.app {
  display: flex;
  flex-wrap: wrap;
  font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  block-size: 100%;
}

.routerView {
  flex: 1 1 0%;
  margin-block: 18px;
  margin-inline: 10px;
}

.banner {
  inline-size: 85%;
  margin-block: 40px 0;
  margin-inline: auto;
}

.banner + .banner {
  margin-block: 20px;
}

.banner-wrapper {
  margin-block: 0;
  margin-inline: 10px;
}

.flexBox {
  display: block;
  user-select: unset;
}

.changeLogTitle {
  padding-inline: 16px;
  overflow-wrap: break-word;
  margin-block-end: 16px;
}

.changeLogText {
  overflow-y: scroll;
  block-size: 40vh;
  display: block;
  padding-inline: 16px;
  margin-block-end: 16px;
  overflow-wrap: break-word;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media only screen and (width <= 680px) {
  .routerView {
    margin-block: 20px 68px;
    margin-inline: 8px;
  }

  .banner {
    inline-size: 90%;
    margin-block: 60px 0;
  }

  .flexBox:not(:has(.banner-wrapper)) {
    margin-block: 60px -75px;
  }

  .flexBox:has(.floatingRefreshSection) {
    margin-block: 100px;
  }

  .flexBox:has(.floatingRefreshSection):has(.banner-wrapper) {
    margin-block: 60px;
  }

  .changeLogText {
    block-size: 65vh;
  }
}

@media (width <= 420px) {
  :deep(.ft-card.promptCard.readable-width.fullscreen) {
    display: flex;
    flex-direction: column;
  }

  .changeLogText {
    block-size: revert;
    max-block-size: calc(100vh - 100px);
    overflow-y: scroll;
  }

  .changeLogText + :deep(.ft-flex-box) {
    flex-grow: 1;
  }

  .changeLogText + :deep(.ft-flex-box .btn) {
    margin-block-start: auto;
  }
}
