<script setup lang="ts">
import UserStatusArea from '../components/User.vue'
</script>

<template>
  <q-layout view="hHh lpR fFf" class="font-roboto">
    <q-header elevated class="bg-dark text-white">
      <q-toolbar>
        <q-toolbar-title class="q-ml-md">
        </q-toolbar-title>

        <UserStatusArea />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page class="flex justify-start items-center column q-pa-md">


          <header class="text-center q-mb-xl q-mt-md">
            <transition
              appear
              enter-active-class="animate__fadeInDown"
              leave-active-class="animate__fadeOutUp"
            >
              <div
                class="animate__animated"
                :style="{ animationDuration: '1.6s' }"
              >
          <h1 class="game-title text-white q-my-none">
            KnockOutWhist
          </h1>
          </div>
        </transition>
      </header>

        <router-view></router-view>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style scoped>
.game-title {
  font-family: serif;


  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #FFD700;

  text-shadow:
    2px 2px 0px #000000,
    4px 4px 0px #8B4513,
    6px 6px 12px rgba(0, 0, 0, 0.9);
}
@media (max-width: 600px) {
  .game-title {
    font-size: 3rem;
  }
}
</style>
