phantasma/app/static/css/partials/_index.scss

.body--home {
  display: flex;
  flex-direction: column;
  background-color: #000;
  min-height: 100vh;

  .topnav {
    display: none;
  }

  main {
    margin: auto;
  }
}

.index {
  padding: var(--spacing-2);

  a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: 700;

    &:hover, &:focus {
      opacity: 0.7;
    }
  }

  p {
    margin-bottom: var(--spacing-2);
  }


  .margin-reset {
      margin: 0;
  }

  h1 { 
    font-family: "wrong font";
    margin: auto;
    font-weight: normal;
    font-size: 34px;
    font-weight: bold;

    @media screen and (min-width: 800px) {
      font-size: 44px;
    }
  }

  .h1-en-home {
    line-height: 1.2;
  }

  .h1-zh-home {
    font-size: 24px;

    @media screen and (min-width: 800px) {
      font-size: 34px;
    }
  }

  h2, .h2 {
    font-size: 22px;
  }

  h2 {
    margin-top: var(--spacing-2);
  }

  h3, .h3 {
    font-size: 21px;
  }
  .home {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    .box {
      margin: auto;
      background: rgba(0,0,0,0.5);
      padding: 16px;
      border-radius: 2px;
      .font-size-sm {
        display: flex;
        gap: 16px;
        justify-content: center;
      }
    }
  }
}