<script setup lang="ts">
import { RouterView } from "vue-router";
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue'
</script>

<template>
  <Header />
  <main>
    <RouterView />
  </main>
  <Footer />
</template>

<style land='scss'>
@import "@/assets/base.scss";

html {
  overflow-x: hidden;
}

body {
  font-family: 'Crimson Text', sans-serif;
  color: #2f273e;
  font-size: 1.1rem;
  margin: 0px;
}

@media screen and (max-width: 600px) {
  body {
    background-color: #d5caf2;
    overflow-x: hidden;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 500px;
}

a {
  color: #2f273e;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  text-align: left;
  max-width: 44%;
}

@media screen and (max-width: 600px) {
  ul {
    max-width: 90% !important;
  }
}

h1,
h2,
h3,
h4,
h5 {
  text-shadow: 3px 3px 3px #ababab;
}

h1 {
  font-size: 3rem;
}

p {
  text-align: justify;
}
</style>

<style lang="scss">
section.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 1000px;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
  text-align: center;
  border-radius: 3px 3px 0px 0px;

  p {
    padding: 0px 20px;
    max-width: 56%;
    width: 100%;
  }

  @media screen and (max-width: 600px) {
    p {
      max-width: none;
    }
  }

  .link-back {
    font-weight: bolder;
    margin-top: 20px;
    margin-bottom: 20px;
    text-decoration: underline;
  }
}

section.logo~section.main {
  border-radius: 0px;
}

.generic-link {
  color: #2222ed;
  text-decoration: underline;
}

hr {
  width: inherit;
}

.foot-note {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
