<template>
  <!-- <smooth-scrollbar :options="options" id="scroll-area" > -->
    <div id="app" class="main-app" >
      <TheHeader />
      <main class="main">
        <transition name="fade">
          <router-view/>
        </transition>
      </main>
      <TheFooter/>
    </div>
  <!-- </smooth-scrollbar> -->
</template>

<script>
// @ is an alias to /src
import TheHeader from "@/components/TheHeader.vue";
import TheFooter from "@/components/TheFooter.vue";



export default {
  name: "Home",
  components: {
    TheHeader,
    TheFooter,
  },
  
  data() {
    return {
      options: {damping: 0.08} 
    }
  }
};
</script>

<style lang="scss">




#scroll-area {
  width: 100%;
  height: 100vh;
}

.fade-enter {
  opacity: 0;
  transition: all 1s cubic-bezier(.41,.01,.57,1.61);
  transition-delay: 1s;
}

.fade-enter-to {
  opacity: 1;
  transition: all ease-in-out 1s;
  transition-delay: 1s;
}

.fade-leave {
  opacity: 1;
  transition: all ease-in-out 1s;
}


.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transition: all 1s cubic-bezier(.41,.01,.57,1.61);
}


@media (max-width: 768px){
  .container.m-top{
    margin-top: 70px;
  }
}


@keyframes animate-cloud {
    from {
        position: absolute;
        left: 95vw;
    }
    to {
        position: absolute;
        left: -90%;
    }
}

@keyframes animate-cloud2 {
    from {
        position: absolute;
        left: 90vw;
    }
    to {
        position: absolute;
        left: -80%;
    }
}
</style>
