{{ define "main" }}

<section class="countdown-lg-section">
  <div class="countdown-lg-container">
    <div class="countdown-lg-contents my-auto">
      <img class="tea-logo mb-5" src="/Images/tea-light.svg" alt="tea logo">
      <p class="text-center display-1" id="demoLarge"></p>
      <p class="text-center authenticate display-6">You can still authenticate your GitHub <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz">here</a>.</p>
    </div>
  </div>
</section>

<style>

  .countdown-section{
    display:none;
  }

  @font-face {
    font-family: "pp-neue-machina";
    src: url("/fonts/PPNeueMachina-InktrapLight.woff") format("woff");
  }

  #demoLarge, .authenticate{
    font-family: "pp-neue-machina", sans-serif;
  }

  #demoLarge,
  .authenticate a{
    color: #00ffd0;
  }

  .tea-logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 10vw;
  }

  @media only screen and (max-width: 600px) {
    .tea-logo{
      width: 25vw;
    }
  }

  .navbar,
  footer,
  .gf-container{
    display: none;
  }

  html,body{
    background-color: #1a1a1a !important;
  }

  .countdown-lg-section{
  }

  .countdown-lg-container{
    height: 100vh;
    position: relative;
    width: 100%;
  }

  .countdown-lg-contents{
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

</style>

{{ end }}