@font-face {
  font-family: "Impostor";
  src: url("./fonts/The Impostor.ttf");
}

html,
body {
  height: 100%;
  background-color: #191716;
  font-family: "Impostor", sans-serif;
}

main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-container {
  background-image: linear-gradient(to bottom, #929982, #8e5572);
  background: -webkit-linear-gradient(135deg, #929982, #8e5572 80%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.header-title {
  margin: 0;
  font-size: 32px;
  height: 72px;
  line-height: 72px;
  cursor: default;
}

.header-tag {
  cursor: default;
}

.header-link {
  text-decoration: none;
  cursor: pointer;
}

.header-link:hover {
  background-color: #929982;
  -webkit-background-clip: text;
  background-clip: text;
  transition: all ease 1s;
}

.tag-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tag-group--upper {
  align-items: flex-start;
}

.tag-group--lower {
  align-items: flex-end;
}

@media (min-width: 900px) {
  .header-title {
    font-size: 96px;
    height: 148px;
    line-height: 148px;
  }

  .header-tag, .header-link {
    font-size: 24px;
  }
}