:root {
  --font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --size: max(1em, 1dvw, 1dvh, 16px);
  --bg-color: #00060a;
  --gc-height: calc(var(--size) * 20);
  font-size: var(--size);
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: var(--bg-color);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media only screen and (min-width: 800px) {
    --gc-height: calc(var(--size) * 25);
  }
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family);
  font-display: swap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-variant-numeric: tabular-nums;
}

html,
body {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--bg-color);
  color: #ffffff;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#navbar {
  width: 100%;
  height: calc(var(--size) * 4);
  padding: calc(var(--size) * 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 99999;
  background-color: #00060a70;
  backdrop-filter: blur(20px);

  @media only screen and (min-width: 800px) {
    padding: calc(var(--size) * 0.5) var(--size);
  }

  #navbar-right {
    width: fit-content;
    height: inherit;
  }
}

.social-links {
  width: min(calc(var(--size) * 11), 50dvw);
  height: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--size) * 0.5);

  .social-link {
    height: calc(var(--size) * 1.2);
    width: auto;
    aspect-ratio: 1;
  }
}

.mobile-hide {
  display: none;

  @media (min-width: 800px) {
    display: flex;
  }
}

#container {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  flex: 1;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: top center;

  #title {
    width: 100%;
    height: calc(var(--size) * 6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: calc(var(--size) * 1.5) 0;

    @media only screen and (min-width: 800px) {
      height: calc(var(--size) * 8);
      margin-top: calc(var(--size) * 3);
    }
  }

  #overview {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: calc(var(--size) * 2);

    @media only screen and (min-width: 800px) {
      margin-top: calc(var(--size) * 3);
    }

    & .overview-title-text {
      font-size: calc(var(--size) * 1.2);
      line-height: 1.5;
      font-weight: 500;
      width: min(95%, calc(var(--size) * 35));
      margin-bottom: calc(var(--size) * 0.5);

      @media only screen and (min-width: 800px) {
        font-size: calc(var(--size) * 2.6);
        line-height: 1;
      }
    }

    & #aggregated-cards {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--size) * 0.5);
      padding: 0 calc(var(--size) * 0.5);
      flex-wrap: wrap;

      @media only screen and (min-width: 800px) {
        padding: 0 var(--size);
      }

      & .card {
        width: calc(calc(100% / 2) - calc(var(--size) * 0.25));
        height: calc(var(--size) * 6);
        border: calc(var(--size) * 0.08) solid #222a38;
        background-color: #00060a70;
        border-radius: calc(var(--size) * 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: calc(var(--size) * 0.5);
        backdrop-filter: blur(20px);

        @media only screen and (min-width: 800px) {
          width: calc(calc(100% / 3) - calc(var(--size) * 0.5));
          height: calc(var(--size) * 7);
        }

        &>.title {
          font-size: calc(var(--size) * 0.75);
          color: #cdd1d7;

          @media only screen and (min-width: 800px) {
            font-size: calc(var(--size) * 1.2);
          }
        }

        &>.value {
          font-size: calc(var(--size) * 1.1);
          font-weight: 500;

          @media only screen and (min-width: 800px) {
            font-size: calc(var(--size) * 1.8);
          }
        }
      }
    }

    #graph-cards {
      width: 100%;
      margin-top: calc(var(--size) * 1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--size) * 0.5);
      padding: 0 calc(var(--size) * 0.5);
      flex-wrap: wrap;

      @media only screen and (min-width: 800px) {
        padding: 0 var(--size);
      }

      & .card {
        width: calc(100% - calc(var(--size) * 0.25));
        height: var(--gc-height);
        border: calc(var(--size) * 0.08) solid #222a38;
        background-color: #00060a70;
        border-radius: calc(var(--size) * 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        gap: calc(var(--size) * 0.5);
        backdrop-filter: blur(20px);
        padding: calc(var(--size) * 0.5);

        @media only screen and (min-width: 800px) {
          width: calc(calc(100% / 2) - calc(var(--size) * 0.25));

          &:nth-last-child(1):nth-child(odd) {
            width: calc(100% - var(--size) * 0.25);
          }
        }

        .top {
          width: 100%;
          height: calc(var(--gc-height) * 0.2);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .bottom {
          width: 100%;
          height: calc(var(--gc-height) * 0.8);
        }

        .center {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: calc(var(--gc-height) * 0.8);
        }

        .graph {
          width: 100%;
          height: calc(var(--gc-height) * 0.8);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: calc(var(--size) * 0.5);
          position: relative;
          background: none;

          canvas {
            width: 100% !important;
            height: calc(100% - calc(var(--size) * 2)) !important;
            background: none;
          }

          .reset-zoom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .text {
              cursor: pointer;
              font-size: calc(var(--size) * 0.75);
            }
          }
        }
      }
    }
  }
}

a,
a:focus,
a:active,
a:hover,
a:visited {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: none;
  border: none;
}

img {
  user-select: none;
}

h1,
h2 {
  margin: 0;
}



.blue {
  color: #0156fc;
}

.page-title {
  font-size: calc(var(--size) * 1.2);
  line-height: 1.5;
  font-weight: 500;
  width: min(95%, calc(var(--size) * 35));
  margin-bottom: calc(var(--size) * 0.5);

  @media only screen and (min-width: 800px) {
    font-size: calc(var(--size) * 2.6);
    line-height: 1;
  }
}

.page-subtitle {
  font-size: calc(var(--size) * 0.75);
  line-height: 1.5;
  font-weight: 300;
  width: min(95%, calc(var(--size) * 35));

  @media only screen and (min-width: 800px) {
    font-size: calc(var(--size) * 1.1);
  }
}