<script lang="ts">
  import { RouterView } from 'vue-router'
  import Footer from '@/components/Footer.vue'
  export default {
      name: 'App',
      components:{
        RouterView,
        Footer
      },
    }
</script>

<template>
  <RouterView />
  <Footer />
</template>

<style>
header {
  line-height: 1.5;
  max-height: 100vh;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
