<script setup>
    import { ref, onMounted, computed } from "vue";
    import moment from 'moment-timezone';

</script>

<template>
  <div>
    <header class="grid justify-center z-10">
      <div class="greetings justify-center pt-2 pb-3">
        <h1 class="green">
          <RouterLink to="/">DigiSnaxx.com</RouterLink>
        </h1>
        <!-- <span class="subtitle z-40">
          another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project
        </span> -->
        <span class="subtitle z-40">
          Events for Adventurers
        </span>
      </div>
    </header>
  </div>
</template>

<style scoped>
    header {
      line-height: 1.5;
      max-height: 50vh;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: -15px;
    }

    .subtitle {
      margin-left: 65px;
      letter-spacing: .15em;
    }
    
    .logo {
      display: block;
      margin: 0 auto 2rem;
    }

    .nav {
      background-color: var(--color-background) !important;
      opacity: 1;
      z-index: 9;
    }
    
    @media (min-width: 1024px) {
      header {
        display: flex;
        place-items: center;
      }
    
      .logo {
        margin: 0 2rem 0 0;
      }
    
      header .wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
      }
    }
    </style>