<template>
  <div
    class="page-container animated fadeIn flex column self-center items-center text-center"
  >
    <!-- <q-img
      v-if="!isLoggedIn"
      class="page-logo"
      alt="Teknokomo Logo"
      src="~assets/logo.svg"
      fit="contain"
    /> -->
    <!-- <span class="page-text"> Вы авторизованы </span> -->
    <div
      class="main-block-with-cropped text-black q-pa-sm flex flex-center"
      style="height: 340px"
    >
      Этот раздел ещё не реализован, но не волнуйтесь, он будет готов в одном из
      следующих обновлений!
    </div>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useAuthStore } from "src/stores/auth";
export default {
  name: "UniversesStub",
  props: {},
  components: {},
  computed: {
    ...mapState(useAuthStore, ["isLoggedIn"]),
  },
};
</script>

<style scoped>
.page-container {
  --animate-duration: 2s;
  --animate-delay: 2s;

  width: 100%;
  gap: 20px;
  color: rgba(255, 255, 255, 1);
  font-style: normal;
  font-stretch: normal;
  text-decoration: none;
  font-size: 24px;
  font-weight: 900;
}
.page-logo {
  max-height: 25vh;
  max-width: 25vw;
}

.page-text {
  font-size: 4rem;
}

.page-text02 {
  font-size: 2rem;
}

.page-text07 {
  font-size: 1.5rem;
}

.page-text09 {
  font-size: 1.5rem;
}

@media (max-width: 820px) {
  .page-text {
    font-size: 2.5rem;
  }
  .page-text02 {
    font-size: 1.6rem;
  }
  .page-text07 {
    font-size: 1.2rem;
  }
  .page-text09 {
    font-size: 1.2rem;
  }
}
@media (max-width: 530px) {
  .page-text02 {
    font-size: 1.2rem;
  }
}
@media (max-width: 400px) {
  .page-text {
    font-size: 2rem;
  }
  .page-text02 {
    font-size: 0.8rem;
  }
  .page-text07 {
    font-size: 0.8rem;
  }
  .page-text09 {
    font-size: 0.8rem;
  }
}
</style>
