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

.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: 68px;
    margin-inline: 8px;
  }

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

  .flexBox {
    margin-block: 60px -75px;
  }

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