<template>
  <div class="app">
    <div class="content" v-dragscroll:nochildscroll>
      <router-view class="page" />
    </div>
    <nav>
      <router-link to="/">chart</router-link>
      <router-link to="/discover">discover</router-link>
      <a href="/docs">api</a>
    </nav>
  </div>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: Daisy;
  src: url("@/assets/HeadUpDaisy.ttf");
}

* {
  font-family: Daisy;
}

html {
  height: 100%;
  width: 100%;
  background-color: #030f0a;
  color: #aaf0d1;
}

canvas {
  image-rendering: pixelated;
}
</style>

<style scoped>
@keyframes movebg {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: 0px 1080px;
  }
}

.app {
  height: 100%;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  flex-direction: column;
}
.content {
  height: 100%;
  flex-basis: 1;
  overflow: hidden;
  flex-grow: 1;
  background-image: url("../public/images/background.webp");
  animation-name: movebg;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}

nav {
  flex-basis: 1;
  flex-shrink: 1;
  border-top-style: solid;
  padding: 1em;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  font-size: large;
  color: #aaf0d1;
}

nav a:focus,
nav a:hover {
  color: #f0d1aa;
}
</style>
