<template>
  <v-app>
    <v-main class="bg-main">
      <div class="d-block w-100 text-right pa-3">
        <span class="img-logo">
          <router-link to="/">
            <span class="float-left">
              <v-img
                :aspect-ratio="1"
                src="./assets/logo.png"
                width="80"
              ></v-img></span></router-link
        ></span>
        <span
          ><v-btn
            icon="mdi-home-variant-outline"
            variant="text"
            href="/"
          ></v-btn
          ><v-btn icon="mdi-account-outline" variant="text"></v-btn>
          <v-btn variant="text"> Sign In </v-btn>
          <v-btn elevated color="#F4C03F"> Get Started </v-btn></span
        >
      </div>
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
import { client } from "./utils/trpc.ts";
console.log(client);
// import MainVote from "./components/MainVote.vue";

export default {
  name: "App",

  components: {
    // MainVote,
  },

  data: () => ({
    //
  }),
};
</script>
<style>
.img-logo {
  position: absolute;
  left: 0;
  top: 0;
}
* {
  font-family: "IBM Plex Sans Thai", sans-serif;
}
.text-title {
  font-size: 40px;
  font-weight: 500;
  /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
}
.text-normal {
  font-size: 30px;
}
.text-subtitle {
  font-size: 25px;
  font-weight: 600;
}
.text-sub {
  font-size: 24px;
  font-weight: 400;
}
.text-sub2 {
  font-size: 20px;
  /* font-weight: 500; */
}
.text-sub3 {
  font-size: 18px;
  /* font-weight: 500; */
}
.text-small {
  font-size: 16px;
}
.txt-black {
  color: #37332f;
  /* color: black; */
}

@media only screen and (min-width: 0px) and (max-width: 700px) {
  .img-logo {
    display: none;
  }
  .text-title {
    font-size: 28px;
    font-weight: 500;
    /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
  }
  .text-normal {
    font-size: 25px;
  }
  .text-subtitle {
    font-size: 22px;
    font-weight: 600;
  }
  .text-sub {
    font-size: 23px;
    font-weight: 400;
  }
  .text-sub2 {
    font-size: 20px;
    /* font-weight: 500; */
  }
  .text-sub3 {
    font-size: 18px;
    /* font-weight: 500; */
  }
}
</style>
