<template>
  <the-notification-system />
  <the-header></the-header>
  <router-view v-slot="slotProps">
    <transition name="route" mode="out-in">
      <component :is="slotProps.Component"></component>
    </transition>
  </router-view>
</template>

<script>


import TheHeader from "@/components/layout/TheHeader.vue";
import TheNotificationSystem from "@/components/UI/TheNotificationSystem.vue";

export default {
  components: {TheNotificationSystem, TheHeader},

}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}





html.modal-open {
  background: #f8fafc;
}

.page-header {
  font-weight: normal;
  margin-bottom: 3rem;
  font-size: 2.4rem;
  color: #002F54;
}

.sub-header {
  font-weight: normal;
  font-size: 1.4rem;
  color: #6B869C;
}

html {
  font-size: 62.5%;
  font-family: 'Arial', sans-serif;
}

body {
  padding: 20px 60px;
  font-family: 'Poppins', sans-serif;
  background-color: #f8fafc;
  color: #002F54;
}

.route-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.route-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.route-enter-active {
  transition: all 0.2s ease-out;
}

.route-leave-active {
  transition: all 0.2s ease-out;
}

.route-enter-to,
.route-leave-from {
  opacity: 1;
  transform: translateX(0);
}





</style>
