@import "./style.css";

header {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  #header-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    padding: 64px 16px;

    &>div {
      display: flex;
      flex-direction: column;
      max-width: var(--max-reading-width);
      gap: 16px;

      h1 {
        color: var(--accent);
      }

      h2 {
        color: var(--foreground1);
      }

      p {}

      &>div {
        display: flex;
        flex-direction: column;
        background: var(--surface0);

        .contact-head {
          display: flex;
          justify-content: space-between;
          gap: 16px;
          background: var(--surface1);
          padding: 16px 1ch;

          span {
            color: var(--foreground1);
          }
        }

        .contact-body {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 16px 1ch;
        }
      }
    }
  }
}