App.vue

<template>
  <v-app>
    <NavBar />
    <v-main class="wisp-bg" fluid>
      <router-view id="main-content" />
    </v-main>
    <P1Footer />
  </v-app>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import P1Footer from "@/components/Footer.vue";

export default {
  name: "App",
  components: { NavBar, P1Footer },
};
</script>
<style lang="scss">
#app {
  min-width: 320px;

  #main-content {
    z-index: 2;
  }

  .wisp-bg {
    background-image: url(@/assets/images/Background_WH_Texture.webp);
    background-size: 100% 750px;
    background-repeat: no-repeat;
    background-position-y: 715px;
    @include sm-down {
      background-size: 960px 750px;
    }
  }

  a {
    color: $link-color;
    &:hover,
    &:active {
      color: $link-hover-color;
      i:not(.no-link) {
        color: $link-hover-color;
      }
    }

    i:not(.no-link) {
      color: $link-color;
    }

    &.inline {
      margin-top: -3px;
    }

    &.v-btn:not(.v-btn--round) {
      min-width: 160px;
    }
    &.link.v-btn--text {
      text-transform: none !important;
      color: $link-color;
    }
    &.link.v-btn--text {
      text-transform: none !important;
      color: $link-color;
      &:hover,
      &:active {
        color: $link-hover-color;
      }
    }
  }

  .theme--dark {
    h1,
    h2,
    h3,
    h4,
    p {
      color: $light-text-color;
    }
  }

  .v-btn:not(.v-btn--outlined).primary,
  .v-btn:not(.v-btn--outlined).secondary,
  .v-btn:not(.v-btn--outlined).accent {
    color: $button-text-color;
    border: $button-border;
  }

  .v-list-item {
    &.v-list-item--active {
      color: $dark-bg-color !important;
    }
    .v-list-item__content {
      text-align: left;
    }
  }
  .v-select__selections {
    line-height: 1.25rem;
  }

  .v-image {
    &.h-flip {
      transform: rotate(180deg);
    }
  }

  .dark-section {
    @include sm-down {
      border-radius: 0px;
    }
    border-radius: 10px;
    background-color: #031726 !important;
  }
}
</style>