@font-face {
  font-family: adwaita-sans;
  src: url(font/AdwaitaSans-Regular.woff2);
}

@font-face {
  font-family: adwaita-mono;
  src: url(font/AdwaitaMono-Regular.woff2);
}

@font-face {
  font-family: adwaita-mono;
  src: url(font/AdwaitaMono-Bold.woff2);
  font-weight: bold;
}

@font-face {
  font-family: adwaita-mono;
  src: url(font/AdwaitaMono-Italic.woff2);
  font-style: italic;
}

@font-face {
  font-family: adwaita-mono;
  src: url(font/AdwaitaMono-BoldItalic.woff2);
  font-weight: bold;
  font-style: italic;
}

:root {
  --content-width: 58rem;
  --title-icon-size: 12rem;
  --page-thickness: 3rem;
  --page-tab-width: 3.3rem;
  --page-bg-color: #f8f8f8;
  --page-text-color: rgb(0 0 6 / 80%);
  --orange-1: #ffc69a;
  --orange-2: #ffa663;
  --orange-3: #f68f41;
  --orange-4: #e9741a;
  --orange-5: #cb4900;
  --page-stack-1: #c6c6c6;
  --page-stack-2: #d0d0d0;
  --page-stack-3: #dcdcdc;
  --page-stack-4: #e7e7e7;
}

@media (prefers-color-scheme: light) {
  :root {
    --main-text-color: rgb(0 0 6 / 80%);
    --header-gradient: linear-gradient(0, #ccdef9 0, #ffffff 100vh);

    background: linear-gradient(0, #ccdef9 0, #ffffff 100vh);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-text-color: #fff;
    --header-gradient: linear-gradient(0, #433583 0, #5494e0 100vh);

    background: #222226;
  }
}

html {
  font-family: adwaita-sans;

  body {
    min-height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

    header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4rem 0 2rem 0;

      background: var(--header-gradient);

      #icon {
        max-width: var(--title-icon-size);
        max-height: var(--title-icon-size);
        min-width: var(--title-icon-size);
        min-height: var(--title-icon-size);
        filter: drop-shadow(0px 1px 0.5rem #0003);
      }
    }

    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4rem 0;
      gap: 2rem;

      section {
        display: flex;
        flex-direction: column;

        font-family: adwaita-mono;
        padding: 0 4rem 0 4rem;
        max-width: var(--content-width);

        picture {
          display: flex;
          flex-direction: row;
          justify-content: center;
        }

        img {
          max-width: 100%;
          max-height: 100%;
        }

        .screenshot-row {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          padding: 1.5rem 0;
          gap: 0.2rem;

          .screenshot {
            margin-left: -0.2rem;
            margin-right: -0.2rem;
          }
        }

        .screenshot {
          margin-left: -1rem;
          margin-right: -1rem;
        }
      }
    }

    footer {
      padding: 2rem;
      font-family: adwaita-sans;
      display: flex;
      flex-direction: column;
      align-items: center;

      background: #555;
      color: #eee;

      a {
        color: #eee;
      }
    }

    .download-banner {
      display: flex;
      flex-direction: row;
      justify-content: center;

      color: #fff;

      .content {
        flex-grow: 1;
        max-width: var(--content-width);
        padding: 1rem 3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3rem;
      }

      a {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
    }

    @media (prefers-color-scheme: light) {
      .download-banner {
        background: #ccdef9;
        background: linear-gradient(
          90deg,
          #23928b 0%,
          rgba(142, 171, 230, 1) 100%
        );
      }
    }

    @media (prefers-color-scheme: dark) {
      .download-banner {
        background: #171d25;
        background: linear-gradient(
          90deg,
          rgba(27, 40, 56, 1) 0%,
          #205c58 100%
        );
      }
    }
  }
}

.fake-markdown {
  color: var(--main-text-color);

  h1 {
    color: #20b2aa;
    font-weight: bold;
  }

  h2 {
    color: #23948e;
    font-weight: bold;
  }

  s,
  del {
    color: cadetblue;
  }

  mark {
    background: #e5a50a33;
    color: var(--main-text-color);
  }

  a {
    color: steelblue;
  }
}

.markdown-mark {
  display: inline;
  filter: opacity(80%);
  height: 1em;
  @media (prefers-color-scheme: dark) {
    filter: invert();
  }
}

#page {
  max-width: var(--content-width);
  margin: auto;
  display: flex;
  border-radius: 1rem 3rem 3rem 1rem;
  box-shadow: 0 0.5rem 1rem #0008;
  overflow: hidden;
  background: var(--page-bg-color);
  color: var(--page-text-color);

  .fake-markdown {
    color: var(--page-text-color);
  }

  #page-main {
    padding-top: 4rem;

    background-image: url("assets/page-corner.svg");
    background-size: 128px;
    background-repeat: no-repeat;
    background-position: 100% 0;

    #pagestack1 {
      background: var(--page-stack-1);
    }
    #pagestack2 {
      background: var(--page-stack-2);
    }
    #pagestack3 {
      background: var(--page-stack-3);
    }
    #pagestack4 {
      background: var(--page-stack-4);
    }
    #pagestack5 {
      background: var(--page-bg-color);
    }
    .pagestack {
      min-height: var(--page-thickness);
      border-radius: 0 0 3rem 0;
      display: flex;
      flex-direction: column;
      padding-bottom: calc(var(--page-thickness) / 4);
      box-sizing: border-box;
    }
  }

  #page-side {
    min-width: var(--page-tab-width);
    max-width: var(--page-tab-width);
    display: flex;
    flex-direction: column;

    background: #cb4900;
    background: linear-gradient(
      90deg,
      rgba(203, 73, 0, 1) 0%,
      rgba(255, 166, 99, 1) 20%,
      rgba(203, 73, 0, 1) 50%
    );

    #orangetab1 {
      background: var(--orange-1);
    }
    #orangetab2 {
      background: var(--orange-2);
    }
    #orangetab3 {
      background: var(--orange-3);
    }
    #orangetab4 {
      background: var(--orange-4);
    }
    .orangetab {
      flex-grow: 1;
      border-radius: 1rem 0 0 1rem;
      display: flex;
      flex-direction: column;
    }
    .spacer {
      height: 6rem;
      box-sizing: border-box;
      padding: 1rem;
    }
    .end-spacer {
      flex-grow: 1;
    }
    .bottom {
      height: var(--page-thickness);
      box-sizing: border-box;
      padding: 1rem;
    }

    #markdown-mark {
      filter: opacity(20%);
      width: 3rem;
      rotate: -90deg;
      position: relative;
      bottom: 1.5rem;
      left: 0.2rem;
    }
  }
}