<template>
    <div class="container">
        <div>
            <logo/>
            <h1 class="title">
                TheGolem.cz
            </h1>
            <h2 class="subtitle">
                One server to host them all!
            </h2>
        </div>
    </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Logo from '~/components/Logo.vue'

  export default Vue.extend({
    components: {
      Logo
    }
  })
</script>

<style>
    .container {
        margin: 0 auto;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .title {
        font-family: GolemAscend, 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        display: block;
        font-weight: 300;
        font-size: 100px;
        color: #35495e;
        letter-spacing: 1px;
    }

    .subtitle {
        font-family: GolemAscend, 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-weight: 300;
        font-size: 42px;
        color: #526488;
        word-spacing: 5px;
        padding-bottom: 15px;
    }

    @media screen and (max-width: 700px) {
        .title {
            font-size: 50px;
        }

        .subtitle {
            font-size: 30px;
        }
    }

    .links {
        padding-top: 15px;
    }
</style>
