* {
  box-sizing: border-box;
}

html,
body {
  min-width: 360px;
  height: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
}

body {
  font-family: 'PT Root UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  background-color: var(--background-color);
  color: var(--default-text-color);

  &.home {
    display: flex;
    flex-direction: column;

    .projectName {
      h1 {
        font-size: 200px;
      }

      h2 {
        font-size: 30px;
      }
    }
  }

  &.docs {
    display: flex;
    flex-direction: column;

    .projectName {
      h1 {
        font-size: 50px;
      }
    }
  }
}

a {
  color: var(--default-text-color);
}

.mobileOnly {
  display: none;
}

.desktopOnly {
  display: initial;
}

.projectName {
  width: 100%;
  margin: auto;
  /* padding-bottom: 50px; */
  font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;

  h1 {
    a {
      text-decoration: none;
    }
  }
}

.new_user {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: auto;

  input {
    text-align: center;
  }
}

footer {
  text-align: center;

  h2,
  p {
    font-size: 14px;
  }

  h2 {
    margin-bottom: 10px;
    font-weight: bold;
  }

  section {
    margin-bottom: 20px;
    line-height: 120%;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }
}

@media (max-width: 880px) {
  .mobileOnly {
    display: block;
  }

  .desktopOnly {
    display: none;
  }

  .projectName {
    h1 {
      font-size: 60px;

      a {
        font-size: 60px;
      }
    }

    h2 {
      font-size: 30px;
    }
  }
}

body.docs {
  font-family: 'PT Root UI', Arial, Helvetica, sans-serif;

  article {
    width: 100%;
    max-width: var(--document-article-width);
    margin: 0 auto;
    padding-right: var(--document-article-padding-horizontal);
    padding-left: var(--document-article-padding-horizontal);
    padding-bottom: var(--document-article-padding-bottom);
  }

  h1 {
    margin-top: var(--document-heading-1-margin-top);
    font-size: var(--document-heading-1-font-size);
    line-height: var(--document-heading-1-line-height);
    font-weight: var(--document-heading-1-font-weight);
    font-style: var(--document-heading-1-font-style);
    color: var(--document-heading-1-color);
  }

  h2 {
    margin-top: var(--document-heading-2-margin-top);
    font-size: var(--document-heading-2-font-size);
    line-height: var(--document-heading-2-line-height);
    font-weight: var(--document-heading-2-font-weight);
    font-style: var(--document-heading-2-font-style);
    color: var(--document-heading-2-color);
  }

  h3 {
    margin-top: var(--document-heading-3-margin-top);
    font-size: var(--document-heading-3-font-size);
    line-height: var(--document-heading-3-line-height);
    font-weight: var(--document-heading-3-font-weight);
    font-style: var(--document-heading-3-font-style);
    color: var(--document-heading-3-color);
  }

  p {
    margin-top: var(--document-paragraph-margin-top);
    font-size: var(--document-paragraph-font-size);
    line-height: var(--document-paragraph-line-height);
    font-weight: var(--document-paragraph-font-weight);
    font-style: var(--document-paragraph-font-style);
    color: var(--document-paragraph-color);
  }

  p.descriptor {
    margin-top: var(--document-descriptor-margin-top);
    font-size: var(--document-descriptor-font-size);
    line-height: var(--document-descriptor-line-height);
    font-weight: var(--document-descriptor-font-weight);
    font-style: var(--document-descriptor-font-style);
    color: var(--document-descriptor-color);
  }

  li {
    margin-top: var(--document-li-margin-top);
    font-size: var(--document-li-font-size);
    line-height: var(--document-li-line-height);
    font-weight: var(--document-li-font-weight);
    font-style: var(--document-li-font-style);
    color: var(--document-li-color);
  }

  ul {
    list-style-type: disc;
    list-style-position: inside;
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;
  }

  ul ul,
  ol ul {
    margin-top: var(--document-list-list-margin-top);
    margin-bottom: var(--document-list-list-margin-bottom);
    margin-left: var(--document-list-list-margin-left);
    list-style-type: circle;
    list-style-position: inside;
  }

  ol ol,
  ul ol {
    margin-top: var(--document-list-list-margin-top);
    margin-bottom: var(--document-list-list-margin-bottom);
    margin-left: var(--document-list-list-margin-left);
    list-style-type: lower-latin;
    list-style-position: inside;
  }

  ol + ol,
  ul + ul,
  ol + ul,
  ul + ol {
    margin-top: var(--document-list-p-margin-top);
  }

  p + ol {
    margin-top: var(--document-p-list-margin-top);
  }

  p + ul {
    margin-top: var(--document-p-list-margin-top);
  }

  ol + p {
    margin-top: var(--document-list-p-margin-top);
  }

  ul + p {
    margin-top: var(--document-list-p-margin-top);
  }

  a {
    color: var(--text-link);
  }

  a:link {
    color: var(--text-link);
  }

  a:visited {
    color: var(--text-link-visited);
  }

  a:hover {
    color: var(--text-link-hover);
  }

  a:active {
    color: var(--text-primary);
  }

  .danger {
    color: var(--text-danger);
  }
}