@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");
body,
h1, h2, h3, h4, h5, h6,
p, pre, ol, ul {
  margin: unset;
}

h1, h2, h3, h4, h5, h6,
pre, address,
code, small {
  font: unset;
}

ul, ol, dd {
  padding: unset;
}

html {
  --body-typeface: "Noto Sans", sans-serif;
  --heading-typeface: "Red Hat Display", "Noto Sans", sans-serif;
  --content-width: 48em;
  --color-blurple: #5865F2;
  --color-not-quite-black: #23272A;
  --color-channel-dark: #313338;
  font: 100%/1.5 var(--body-typeface);
  color: white;
  background-color: var(--color-not-quite-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-typeface);
}

code {
  display: inline-block;
  padding-inline: 0.25em;
  background-color: var(--color-channel-dark);
  border-radius: 4px;
  font-weight: 500;
}

.-content_area {
  max-width: var(--content-width);
  margin-inline: auto;
}

.site-header {
  margin: 1rlh;
}
.site-header h1 {
  display: flex;
  justify-content: center;
  font-size: 2rlh;
  line-height: 1;
  font-weight: bold;
}
.site-header h1 a {
  display: flex;
  align-items: center;
}
.site-header h1 a img {
  display: block;
  height: 1em;
  border-radius: 50%;
}
.site-header ul {
  display: flex;
  list-style: none;
}
.site-header ul :any-link {
  color: currentColor;
  text-decoration: unset;
}
.site-header ul :any-link:active, .site-header ul :any-link:focus, .site-header ul :any-link:hover {
  text-decoration: underline;
}
.site-header li {
  display: flex;
  margin-inline-start: 1rlh;
}
.site-header li .-icon {
  margin-inline-end: 1ex;
}
.site-header .-content_area {
  display: flex;
  align-items: center;
}

.site-header-secondary_nav {
  margin-inline-start: auto;
}
.site-header-secondary_nav li a {
  display: none;
}
@media (min-width: 48em) {
  .site-header-secondary_nav li a {
    display: inline;
  }
}

.page {
  margin-inline: 1rlh;
}
.page .-content_area {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page :any-link {
  color: var(--color-blurple);
}

@media (min-width: 48em) {
  .-intro {
    margin-block: 5rlh 2rlh;
  }
}
@media (min-width: calc(60rem + 2rlh)) {
  .-intro {
    width: 100vw;
    max-width: 60rem;
  }
}

.page-lead {
  font-size: 1.15em;
  font-weight: 300;
}

.page-header hgroup h2 {
  text-transform: uppercase;
  font-weight: bold;
}
.page-header hgroup p {
  font-family: var(--heading-typeface);
  font-size: 2em;
  font-weight: 900;
  line-height: 1.5rlh;
  margin-bottom: 1rlh;
}
@media (min-width: 48em) {
  .page-header hgroup p {
    font-size: 4em;
    line-height: 3rlh;
  }
}

.split {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  grid-gap: 1rlh;
}
@media (min-width: 48em) {
  .split {
    grid-auto-flow: column;
    align-items: center;
    grid-gap: 2rlh;
  }
}

@media (min-width: 48em) {
  .split.-reverse .split-right {
    order: -1;
  }
}

.card {
  width: max-content;
  margin: auto;
  text-align: center;
  border-radius: 12px;
  background-color: #313338;
}

.card-header {
  position: relative;
}
.card-header h3 {
  font-size: 1.5em;
  margin-top: -0.5rlh;
  font-weight: 900;
}
.card-header hgroup {
  margin-block-end: 1rlh;
}

.card-header-banner {
  display: block;
  height: 4rlh;
  aspect-ratio: 17/6;
  width: auto;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card-header-avatar {
  display: block;
  width: auto;
  height: 4rlh;
  border-radius: 50%;
  margin-block-start: -2rlh;
  margin-block-end: 1rlh;
  margin-inline: auto;
  outline: 5px solid var(--color-channel-dark);
}

.card-body {
  padding-bottom: 1rlh;
}
.card-body .tray {
  justify-content: center;
}

.tray {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rlh;
  grid-auto-columns: max-content;
}

.button {
  display: inline-block;
  background-color: var(--color-blurple);
  color: white;
  padding: 0.5rlh 1rlh;
  border-radius: 12px;
}
.button:any-link {
  color: unset;
  text-decoration: unset;
}

.feature {
  margin-block-start: 4rlh;
}

.feature-header hgroup h3 {
  text-transform: uppercase;
  font-weight: bold;
}

.feature-image {
  display: block;
  width: 100%;
  max-width: 12rlh;
  height: 12rlh;
  margin: auto;
  border-radius: 12px;
  object-fit: contain;
  background-color: #313338;
  padding-block: 10%;
  box-sizing: border-box;
  aspect-ratio: 1/1;
}

.site-footer {
  background-color: var(--color-channel-dark);
  margin-block-start: 12rlh;
  padding-inline: 1rlh;
}
.site-footer .-content_area {
  padding-block: 1rlh;
  display: grid;
  grid-gap: 1rlh;
}
.site-footer address {
  font-size: small;
}
.site-footer address :any-link {
  color: unset;
}

/*# sourceMappingURL=wrangler.css.map */