<template>
  <div class="ssse-trume1-container">
    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
    <h1 class="ssse-trume1-heading">
      <span>Süsse Träume</span>
      <br />
    </h1>
    <span class="ssse-trume1-caption">
      <span>Fantasy Mini-LARP</span>
      <br />
    </span>
    <app-footer rootClassName="footer-root-class-name"></app-footer>
  </div>
</template>

<script>
import AppNavbar from '../components/navbar'
import AppFooter from '../components/footer'

export default {
  name: 'SsseTrume1',
  components: {
    AppNavbar,
    AppFooter,
  },
  metaInfo: {
    title: 'Ssse-Trume1 - MitOffenemVisier',
    meta: [
      {
        property: 'og:title',
        content: 'Ssse-Trume1 - MitOffenemVisier',
      },
    ],
  },
}
</script>

<style scoped>
.ssse-trume1-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  overflow-x: hidden;
  align-items: center;
  flex-direction: column;
  background-color: #0F0F0F;
}
.ssse-trume1-heading {
  color: rgb(255, 255, 255);
  font-size: 64px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 600;
}
.ssse-trume1-caption {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 30px;
}
@media(max-width: 991px) {
  .ssse-trume1-heading {
    text-align: left;
  }
  .ssse-trume1-caption {
    text-align: left;
  }
}
@media(max-width: 767px) {
  .ssse-trume1-heading {
    font-size: 40px;
  }
  .ssse-trume1-caption {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: Poppins;
    line-height: 24px;
  }
}
@media(max-width: 479px) {
  .ssse-trume1-heading {
    max-width: 280px;
  }
}
</style>
