@import url("assets/fonts/dm-sans/dm-sans.css");
@import url("assets/fonts/dm-serif-display/dm-serif-display.css");

:root {
  --fg: light-dark(rgb(from black r g b / 0.8), white);
  --bg: light-dark(white, #111);
  color-scheme: light dark;
  color: var(--fg);
  background-color: var(--bg);
  font-family: "DM Sans", sans-serif;
}

h1 {
  font-family: "DM Serif Display";
}

a {
  color: inherit;
  font-weight: 600;
  text-underline-offset: 0.15em;

  @media not (prefers-contrast: more) {
    text-decoration: none;
  }
}

body {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4em;
  max-width: 90%;
  width: 30em;
  opacity: 1;
  transition: all 0.5s;

  @starting-style {
    opacity: 0;
  }
}

header {
  text-align: center;
  margin-top: 7em;

  > p {
    margin: 0 0 -2.5em -7em;
  }

  > h1 {
    font-size: 4em;
    line-height: 1em;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;

  > img {
    width: auto;
    height: 2em;
    margin: 0 0 -0.1em 15em;

    @media (prefers-color-scheme: light) {
      filter: opacity(0.8) invert();
    }
  }

  > ul {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 20em;

    > li > a {
      --card-bg: light-dark(
        rgb(from var(--fg) r g b / 0.03),
        rgb(from var(--fg) r g b / 0.05)
      );
      --card-border: light-dark(
        rgb(from var(--fg) r g b / 0.06),
        rgb(from var(--fg) r g b / 0.08)
      );

      @media (prefers-contrast: more) {
        --card-border: rgb(from var(--fg) r g b / 0.4);
      }

      display: block;
      position: relative;
      background-color: var(--card-bg);
      border: 0.15em solid var(--card-border);
      box-shadow: 0 0.15em 0 var(--card-border);
      background-clip: padding-box;
      text-align: center;
      padding: 1em 0;
      border-radius: 0.5em;

      @media not (prefers-reduced-motion) {
        transition: all 0.2s ease-in-out;
      }

      &:active {
        transform: translateY(0.15em);
        box-shadow: none;
      }

      > img {
        width: auto;
        height: 3em;
        position: absolute;
        bottom: 0;

        &#signal {
          left: 4em;
        }

        &#mastodon {
          right: 3em;
        }

        &#donate {
          left: 2.5em;
        }

        &#mail {
          right: 5em;
        }
      }
    }
  }
}

footer {
  text-align: center;

  > p {
    @media not (prefers-contrast: more) {
      color: rgb(from var(--fg) r g b / 0.5);
    }
  }

  > img {
    width: auto;
    height: 8em;
  }
}