<script>
  import FemtoStarLogo from "./FemtoStarLogo.svelte";
</script>

<div class="femtoHeader">
  <div class="femtoLogotypeContainer"><FemtoStarLogo /><span class="femtoLogotype">FemtoStar</span></div>
  <h2>Satellite communications, done differently.</h2>

  <div class="introText">
    <p>
      The FemtoStar Project is a global community developing a satellite
      constellation for secure, open, and private communications - anywhere on
      planet Earth.
    </p>
  </div>
</div>

<style>
  @font-face {
    font-family: Jost;
    src: url(../../Jost.ttf);
  }

  div {
    display: flex;
    width: 100%;
    background-color: #00111d;
    color: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .femtoLogotypeContainer{
    
  }

  .femtoLogotype{
    font-weight: 500;
    font-family: Jost, sans-serif;
    font-size: 3.0em;
  }

  svg {
    padding-top: 1em;
  }

  h2 {
    margin-top: 0.5em;
  }

  .introText {
    width: 100%;
    color: #ffffff;
  }

  p {
    max-width: 512px;
  }
</style>
