body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-image: url("/static/assets/background-light.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image: url("/static/assets/background-dark.png");
  }
}

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-large);
  padding-inline: var(--size-item-large);
  padding-block: var(--size-item-large);
  margin-inline: auto;
  max-width: 964px;
  min-width: 280px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.site-logo {
  position: absolute;
  top: var(--space-large);
  left: var(--space-xlarge);
  width: var(--size-item-xlarge);
  height: var(--size-item-xlarge);
}

@media (min-width: 501px) {
  .site-header {
    padding-block: 42px 50px;
  }
  .site-logo {
    top: var(--space-xxlarge);
    left: var(--space-xxlarge);
  }
}

@media (min-width: 821px) {
  .site-logo {
    top: var(--size-item-xlarge);
    left: auto;
    margin-inline-end: 0;
  }
}

@media (min-width: 965px) {
  .site-header {
    padding-inline: var(--space-medium);
  }
}

@media (min-width: 1300px) {
  .site-logo {
    left: -100px;
  }
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* hide the card if it's not defined yet to prevent it from flashing on load */
moz-card:not(:defined) {
  visibility: hidden;
}

/* borrowed styles from moz-button.mjs since the CTA is an a element */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  margin-block-start: var(--space-large);
  min-height: var(--button-min-height);
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color-primary);
  border-color: var(--button-border-color-primary);
  color: var(--button-text-color-primary);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  text-decoration: none;

  &:visited {
    color: var(--button-text-color-primary);
  }

  &:hover {
    background-color: var(--button-background-color-primary-hover);
    border-color: var(--button-border-color-primary-hover);
    color: var(--button-text-color-primary-hover);
  }

  &:hover:active {
    background-color: var(--button-background-color-primary-active);
    border-color: var(--button-border-color-primary-active);
    color: var(--button-text-color-primary-active);
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }
}

moz-card {
  --card-box-shadow: none;
  --card-border: none;
  --card-border-radius: var(--size-item-medium);
  margin-inline: var(--space-xlarge);
  min-width: 320px;

  &::part(moz-card),
  &::part(content) {
    padding: 0;
  }
}