@import url("/static/fonts.css");

:root {
  color-scheme: light dark;

  --text-color: #25282d;
  --background-color: #f8f8ff;

  --start-border-color: #c8cbd1;
  --start-shadow-color: #00000030;

  --external-border-color: #eef0f5;
  --external-border-focus-color: #dee1e8;

  --external-box-shadow: 0 5px 10px 2px #0000000f;
  --external-box-shadow-focus: 0 5px 15px 2px #00000020;

  --external-background: #fdfdff;
  --external-background-focus: #f2f3f8;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --text-color: #e8e8e8;
    --background-color: #0b0b0d;

    --start-border-color: #191919;
    --start-shadow-color: #000000a0;

    --external-border-color: #1f1f1f;
    --external-border-focus-color: #2d2d2f;

    --external-box-shadow: 0 5px 10px 2px #000000a0;
    --external-box-shadow-focus: 0 5px 15px 4px #000000c0;

    --external-background: #0b0b0d;
    --external-background-focus: #111114;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  margin: 0;
  gap: 4rem;
  background-color: var(--background-color);
  font-family: "IBM Plex Mono", monospace;
  color: var(--text-color);
}

@keyframes gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.start {
  display: flex;
  padding: 1rem;
  border: 5px solid var(--start-border-color);
  animation: gradient 12s ease infinite;
  background: linear-gradient(
    45deg,
    #7429f080,
    #e52a9a80,
    #ff1a5080,
    #ff663080,
    #ffab0e80
  );
  background-size: 400% 400%;
  box-shadow: 1px 5px 20px 5px var(--start-shadow-color);

  transition:
    box-shadow 0.5s ease,
    border-color 0.3s ease;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
    background-size: 100% 100%;
  }

  img.logo {
    width: clamp(15rem, 35dvw, 40rem);
  }
}

.separator {
  width: 100%;
  height: 0.5rem;
  background: linear-gradient(
    90deg,
    #7429f0 0% 20%,
    #e52a9a 20% 40%,
    #ff1a50 40% 60%,
    #ff6630 60% 80%,
    #ffab0e 80% 100%
  );
}

.description {
  max-width: 95%;
  text-align: center;
}

.externals {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 1rem;

  a {
    display: flex;
    width: 6rem;
    height: 6rem;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--external-background);
    border: 2px solid var(--external-border-color);
    box-shadow: var(--external-box-shadow);

    transition:
      border-color 0.2s ease-in-out,
      background-color 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;

    &:is(:hover, :focus) {
      border-color: var(--external-border-focus-color);
      background-color: var(--external-background-focus);
      box-shadow: var(--external-box-shadow-focus);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}