<template>
  <div class="root">    
    <Header />
    <div class="body">
        <nuxt />
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header';
import Footer from '../components/Footer';

export default {
    components: {
        Header,
        Footer
    },
}
</script>
<style>
.root {
    @apply font-sans;
    background: linear-gradient(to right top,#b8c2cc,#3b90c6);
    background-size: cover;
    min-height: 100vh;
}
.body {
    @apply text-white relative overflow-y-auto;
    height: calc(100vh - 7rem);
}
.page {
    @apply relative w-full h-full;
}

.card {
    @apply px-4 py-4 mx-4 my-4;
    background-color: rgba(0,0,0,0.4);
}
.card .card-title {
    @apply text-xl;
}
.title-card {
    @apply mx-0 my-0;
}
.title-card .card-title {
    @apply font-bold text-4xl pb-2;
}
.title-card .card-subtitle {
    @apply text-xl;
}
.title-card .card-content {
    @apply text-xl px-0;
}
.gallery {
    @apply flex flex-row flex-wrap items-center;
}
.gallery .gallery-image {
    @apply w-full px-4 py-4;
}
@screen md {
    .gallery .gallery-image {
        @apply w-1/2;
    }
}
@screen lg {
    .gallery .gallery-image {
        @apply w-1/3;
    }
}

ul {
  @apply list-disc;
}
ul li {
  @apply ml-4;
}
a {
  @apply transition-colors;
}
a:hover {
  @apply text-gray-400;
}
</style>
