<template>
  <v-container
    fluid
    fill-height
    style="background-color: #151726;"
    class="full-screen d-flex align-content-start"
  >
    <v-row>
      <v-col class="d-flex justify-center">
        <v-img
          src="../assets/images/space-wheel.svg"
          aspect-ratio="1"
          max-height="650px"
          max-width="650px"
          class="d-flex align-start justify-start space-image"
          position="top"
        ></v-img>
      </v-col>
    </v-row>
    <v-row class="mt-10">
      <v-col class="d-flex align-center justify-center">
        <h1 class="white--text display-2">
          <font-awesome-icon :icon="['fas', 'space-shuttle']" />
          Space Wheel
        </h1>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpaceShuttle } from "@fortawesome/free-solid-svg-icons";
library.add(faSpaceShuttle);

export default {};
</script>

<style lang="scss" scoped>
.full-screen {
  min-height: calc(100vh);
  max-height: 920px;
}

.space-image {
  animation: spin 40s linear infinite;
  -webkit-animation: spin 40s linear infinite;
  -moz-animation: spin 40s linear infinite;
  animation-play-state: running;
}

.space-image:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
