<style scoped>
  .home {
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0.5em;
  }

  @media screen and (min-width : 906px) {
    .home {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  #welcome-image {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
  }

  p, h1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
  }
  
  #information {
    display: block;
    margin-top: 5%;
    padding: 5%;
    font-size: 0.8em;
    text-align: center;
  }

  #title {
    font-size: 1.2em;
    color: #23286B;
  }
</style>

<template>
  <div class="home">
    <img id="welcome-image" alt="Welcome" src="../assets/welcome.png">
    <div>
      <h1 id="title"><b>COVID</b>assist</h1>
      <p>Die COVID-19 Verhaltensdiagnose, die keine Daten speichert.</p>
      <div class="button-wrapper">
        <router-link style="text-decoration:none" to="/warning">
          <button>Infektionsrisiko ermitteln</button>
        </router-link> 
      </div>
    </div>

    <a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19 vom Robert-Koch-Institut</b></a>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    // HelloWorld
  }
}
</script>
