<script setup lang="ts">
import TheHeader from './components/TheHeader.vue'
import TheFooter from './components/TheFooter.vue'
</script>

<template>
  <div class="center">
  <header>
    <TheHeader />
  </header>
  <main>
    <RouterView />
  </main>
  <footer>
    <TheFooter />
  </footer>
  </div>
</template>

<style scoped>
.center {
  box-sizing: border-box;
	min-width: 60vw;
	width: 60em;
  min-height: 100vh;
	max-width: 94vw;
  padding-left: 4em;
  padding-right: 4em;
  border-style: solid;
  border-width: 0 5px;
  border-color: #d54e53;
}

main {
  padding-top: 1em;
}
</style>
