<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"> <h1 class="game-title text-white q-my-none">
        KnockOutWhist
      </h1>
      </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>
