.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;
  }
}