<script setup lang="ts">
import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
</script>

<template>
  <q-layout view="hHh lpR fFf" class="font-roboto">
    <q-page-container>
      <q-page class="flex justify-start items-center column">

        <header class="text-center q-mb-xl">
          <h1 class="game-title text-white q-my-none">
            KnockOutWhist
          </h1>
          <p
            class="text-h5 text-grey-4 q-mt-md"
            style="max-width: 900px; margin-left: auto; margin-right: auto;"
          >
            Welcome to KnockOutWhist! In this game you have to "knock-out" your opponents until you are the last player standing.
            Do you have what it takes to be crowned the champion?
          </p>
        </header>

        <MainMenuBoxes />

      </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>
