<script setup lang="ts"></script>

<template>
  <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
    <div class="bg-primary ring-2 ring-primary/80">
      <div
        class="flex flex-col w-full h-full p-2 space-x-4 rounded-sm space-2 drop-shadow-md drop-shadow-accent"
      >
        <h1 class="text-md md:text-xl">> ACCESS RESTRICTED</h1>
      </div>
    </div>
  </div>
  <a
    class="flex w-full p-2 font-mono text-lg md:p-4 md:text-2xl bg-secondary ring-2 ring-secondary/80 h-fit0 hover:bg-secondary/50"
    href="http://localhost:31337/auth/login"
  >
    <div class="w-full h-full text-center bg-primary">
      <p class="drop-shadow-accent drop-shadow-md">Login with Discord</p>
    </div>
  </a>
</template>
